right-rails 0.6.0 → 1.0.0

data/public/javascripts/right/sortable-src.js

@@ -0,0 +1,392 @@
+/**
+ * Sortable feature for RightJS
+ * See http://rightjs.org/ui/sortable
+ *
+ * NOTE: requires the dnd-plugin
+ *
+ * Copyright (C) 2009-2010 Nikolay Nemshilov
+ */
+var Sortable = RightJS.Sortable = (function(document, RightJS) {
+/**
+ * This module defines the basic widgets constructor
+ * it creates an abstract proxy with the common functionality
+ * which then we reuse and override in the actual widgets
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+
+/**
+ * Sortable initialization script
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+var R        = RightJS,
+    $        = RightJS.$,
+    $w       = RightJS.$w,
+    isString = RightJS.isString,
+    isArray  = RightJS.isArray,
+    Object   = RightJS.Object;
+
+
+
+
+/**
+ * The widget units constructor
+ *
+ * @param String tag-name or Object methods
+ * @param Object methods
+ * @return Widget wrapper
+ */ 
+function Widget(tag_name, methods) {
+  if (!methods) {
+    methods = tag_name;
+    tag_name = 'DIV';
+  }
+  
+  /**
+   * An Abstract Widget Unit
+   *
+   * Copyright (C) 2010 Nikolay Nemshilov
+   */
+  var AbstractWidget = new RightJS.Wrapper(RightJS.Element.Wrappers[tag_name] || RightJS.Element, {
+    /**
+     * The common constructor
+     *
+     * @param Object options
+     * @param String optional tag name
+     * @return void
+     */
+    initialize: function(key, options) {
+      this.key = key;
+      var args = [{'class': 'rui-' + key}];
+      
+      // those two have different constructors
+      if (!(this instanceof RightJS.Input || this instanceof RightJS.Form)) {
+        args.unshift(tag_name);
+      }
+      this.$super.apply(this, args);
+      
+      if (RightJS.isString(options)) {
+        options = RightJS.$(options);
+      }
+      
+      // if the options is another element then
+      // try to dynamically rewrap it with our widget
+      if (options instanceof RightJS.Element) {
+        this._ = options._;
+        if ('$listeners' in options) {
+          options.$listeners = options.$listeners;
+        }
+        options = {};
+      }
+      this.setOptions(options, this);
+      return this;
+    },
+
+  // protected
+
+    /**
+     * Catches the options
+     *
+     * @param Object user-options
+     * @param Element element with contextual options
+     * @return void
+     */
+    setOptions: function(options, element) {
+      element = element || this;
+      RightJS.Options.setOptions.call(this,
+        RightJS.Object.merge(options, eval("("+(
+          element.get('data-'+ this.key) || '{}'
+        )+")"))
+      );
+      return this;
+    }
+  });
+  
+  /**
+   * Creating the actual widget class
+   *
+   */
+  var Klass = new RightJS.Wrapper(AbstractWidget, methods);
+  
+  // creating the widget related shortcuts
+  RightJS.Observer.createShortcuts(Klass.prototype, Klass.EVENTS || []);
+  
+  return Klass;
+}
+
+
+/**
+ * The Sortable unit
+ *
+ * Copyright (C) 2009-2010 Nikolay Nemshilov
+ */
+var Sortable = new Widget('UL', {
+  extend: {
+    version: '2.0.0',
+    
+    EVENTS: $w('change'),
+    
+    Options: {
+      url:        null,       // the Xhr requests url address, might contain the '%{id}' placeholder
+      method:     'put',      // the Xhr requests method
+                  
+      Xhr:        {},         // additional Xhr options
+                  
+      idParam:    'id',       // the id value name
+      posParam:   'position', // the position value name
+      parseId:    true,       // if the id attribute should be converted into an integer before sending
+      
+      dragClass:  'dragging', // the in-process class name
+      accept:     null,       // a reference or a list of references to the other sortables between which you can drag the items
+      minLength:  1,          // minimum number of items on the list when the feature works
+      
+      cssRule:    '*[data-sortable]' // css-rule for automatically initializable sortables
+    },
+    
+    current: false // a reference to the currently active sortable
+  },
+  
+  /**
+   * basic constructor
+   *
+   * @param mixed element reference
+   * @param Object options
+   * @return void
+   */
+  initialize: function(element, options) {
+    this.$super('sortable', element)
+      .setOptions(options)
+      .addClass('rui-sortable')
+      .on('change', this._tryXhr)
+      .on('selectstart', 'stopEvent'); // disable select under IE
+  },
+  
+  /**
+   * some additional options processing
+   *
+   * @param Object options
+   * @param Element optional context
+   * @return Sortable this
+   */
+  setOptions: function(options, context) {
+    this.$super(options, context);
+    
+    options = this.options;
+    
+    // Preprocessing the acceptance list
+    var list = options.accept || [];
+    if (!isArray(list)) { list = [list]; }
+    
+    options.accept = R([this].concat(list)).map($).uniq();
+    
+    return this;
+  },
+
+// protected
+  
+  // starts the drag
+  startDrag: function(event) {
+    // don't let to drag out the last item
+    if (this.children().length <= this.options.minLength) { return; }
+    
+    // trying to find the list-item upon which the user pressed the mouse
+    var target = event.target, targets = R([target].concat(target.parents())),
+        item = targets[targets.indexOf(this) - 1], event_pos = event.position();
+    
+    if (item) {
+      this._initDrag(item, event_pos);
+      Sortable.current = this;
+    }
+  },
+  
+  // moves the item
+  moveItem: function(event) {
+    var event_pos = event.position(),
+        item   = this.itemClone._.style,
+        top    = event_pos.y - this.yRDiff,
+        left   = event_pos.x - this.xRDiff,
+        right  = left + this.cloneWidth,
+        bottom = top  + this.cloneHeight;
+    
+    // moving the clone
+    item.top  = (event_pos.y - this.yDiff) + 'px';
+    item.left = (event_pos.x - this.xDiff) + 'px';
+    
+    // checking for an overlaping item
+    var over_item = this.suspects.first(function(suspect) {
+      return (
+        (top    > suspect.top    && top    < suspect.topHalf) ||
+        (bottom < suspect.bottom && bottom > suspect.topHalf)
+      ) && (
+        (left   > suspect.left   && left   < suspect.leftHalf) ||
+        (right  < suspect.right  && right  > suspect.leftHalf)
+      );
+    });
+    
+    if (over_item) {
+      item = over_item.item;
+      item.insert(this.item, item.prevSiblings().include(this.item) ? 'after' : 'before');
+      this._findSuspects();
+      
+      // sending the event
+      var list = item.parent();
+      
+      if (!(list instanceof Sortable)) {
+        list = new Sortable(list);
+      }
+      
+      this.fire('change', {
+        list:  list,
+        item:  this.item,
+        index: list.children().indexOf(this.item)
+      });
+    }
+  },
+  
+  // finalizes the drag
+  finishDrag: function() {
+    if (this.itemClone) {
+      this.itemClone.remove();
+      this.item.setStyle('visibility:visible');
+    }
+    Sortable.current = false;
+  },
+  
+  _initDrag: function(item, event_pos) {
+    var dims   = this.dimensions(), item_dims = item.dimensions();
+    
+    // creating the draggable clone
+    var clone = item.clone().setStyle({
+      margin:   0,
+      zIndex:   9999,
+      position: 'absolute',
+      top:      '0px',
+      left:     '0px'
+    })
+    .addClass(this.options.dragClass).insertTo(this)
+    .setHeight(this.cloneHeight = item_dims.height)
+    .setWidth(this.cloneWidth = item_dims.width);
+    
+    // adjusting the clone position to compensate relative fields and margins
+    var clone_pos = clone.position(),
+        real_x    = item_dims.left - clone_pos.x,
+        real_y    = item_dims.top  - clone_pos.y;
+    
+    clone.moveTo(real_x, real_y);
+    
+    this.item = item.setStyle('visibility:hidden');
+    this.itemClone = clone;
+    
+    // mouse event-position diffs
+    this.xDiff  = event_pos.x - real_x;
+    this.yDiff  = event_pos.y - real_y;
+    this.xRDiff = event_pos.x - clone.position().x;
+    this.yRDiff = event_pos.y - clone.position().y;
+    
+    // collecting the list of interchangable items with their positions
+    this._findSuspects();
+  },
+  
+  // collects the precached list of suspects
+  _findSuspects: function() {
+    var suspects = this.suspects = R([]), item = this.item, clone = this.itemClone;
+    this.options.accept.each(function(list) {
+      list.children().each(function(element) {
+        if (element !== item && element !== clone) {
+          var dims = element.dimensions();
+          
+          // caching the sizes
+          suspects.push({
+            item:     element,
+            top:      dims.top,
+            left:     dims.left,
+            right:    dims.left + dims.width,
+            bottom:   dims.top  + dims.height,
+            topHalf:  dims.top  + dims.height/2,
+            leftHalf: dims.left + dims.width/2
+          });
+        }
+      });
+    });
+  },
+  
+  // tries to send an Xhr request about the element relocation
+  _tryXhr: function(event) {
+    if (this.options.url) {
+      var url = R(this.options.url), params = {}, item = event.item, position = event.index + 1;
+      
+      // building the Xhr request options
+      var options = Object.merge({
+        method: this.options.method,
+        params: {}
+      }, this.options.Xhr);
+      
+      // grabbing the id
+      var id = item.get('id') || '';
+      if (this.options.parseId && id) {
+        id = (id.match(/\d+/) || [''])[0];
+      }
+      
+      // assigning the parameters
+      if (url.include('%{id}')) {
+        url = url.replace('%{id}', id);
+      } else {
+        params[this.options.idParam] = id;
+      }
+      params[this.options.posParam] = position;
+      
+      // merging the params with possible Xhr params
+      if (isString(options.params)) {
+        options.params += '&'+Object.toQueryString(params);
+      } else {
+        options.params = Object.merge(options.params, params);
+      }
+      
+      // calling the server
+      RightJS.Xhr.load(url, options);
+    }
+  }
+});
+
+/**
+ * Document level hooks for sortables
+ *
+ * Copyright (C) 2009-2010 Nikolay Nemshilov
+ */
+$(document).on({
+  mousedown: function(event) {
+    var element = event.find(Sortable.Options.cssRule);
+  
+    if (element) {
+      if (!(element instanceof Sortable)) {
+        element = new Sortable(element);
+      }
+    
+      element.startDrag(event);
+    }
+  },
+  
+  mousemove: function(event) {
+    if (Sortable.current) {
+      Sortable.current.moveItem(event);
+    }
+  },
+  
+  mouseup: function() {
+    if (Sortable.current) {
+      Sortable.current.finishDrag();
+    }
+  }
+});
+
+$(window).onBlur(function() {
+  if (Sortable.current) {
+    Sortable.current.finishDrag();
+  }
+});
+
+document.write("<style type=\"text/css\">.rui-sortable{user-select:none;-moz-user-select:none;-webkit-user-select:none}</style>");
+
+return Sortable;
+})(document, RightJS);

data/public/javascripts/right/sortable.js

@@ -0,0 +1,16 @@
+/**
+ * Sortable feature for RightJS
+ * See http://rightjs.org/ui/sortable
+ *
+ * NOTE: requires the dnd-plugin
+ *
+ * Copyright (C) 2009-2010 Nikolay Nemshilov
+ */
+var Sortable=RightJS.Sortable=function(l,f){var j=f.$,m=f.$w,n=f.isString,o=f.isArray,k=f.Object,h=new (function(a,b){if(!b){b=a;a="DIV"}var d=new f.Wrapper(f.Element.Wrappers[a]||f.Element,{initialize:function(e,c){this.key=e;var g=[{"class":"rui-"+e}];this instanceof f.Input||this instanceof f.Form||g.unshift(a);this.$super.apply(this,g);if(f.isString(c))c=f.$(c);if(c instanceof f.Element){this._=c._;if("$listeners"in c)c.$listeners=c.$listeners;c={}}this.setOptions(c,this);return this},setOptions:function(e,
+c){c=c||this;f.Options.setOptions.call(this,f.Object.merge(e,eval("("+(c.get("data-"+this.key)||"{}")+")")));return this}});d=new f.Wrapper(d,b);f.Observer.createShortcuts(d.prototype,d.EVENTS||[]);return d})("UL",{extend:{version:"2.0.0",EVENTS:m("change"),Options:{url:null,method:"put",Xhr:{},idParam:"id",posParam:"position",parseId:true,dragClass:"dragging",accept:null,minLength:1,cssRule:"*[data-sortable]"},current:false},initialize:function(a,b){this.$super("sortable",a).setOptions(b).addClass("rui-sortable").on("change",
+this._tryXhr).on("selectstart","stopEvent")},setOptions:function(a,b){this.$super(a,b);a=this.options;var d=a.accept||[];o(d)||(d=[d]);a.accept=f([this].concat(d)).map(j).uniq();return this},startDrag:function(a){if(!(this.children().length<=this.options.minLength)){var b=a.target;b=f([b].concat(b.parents()));b=b[b.indexOf(this)-1];a=a.position();if(b){this._initDrag(b,a);h.current=this}}},moveItem:function(a){a=a.position();var b=this.itemClone._.style,d=a.y-this.yRDiff,e=a.x-this.xRDiff,c=e+this.cloneWidth,
+g=d+this.cloneHeight;b.top=a.y-this.yDiff+"px";b.left=a.x-this.xDiff+"px";if(a=this.suspects.first(function(i){return(d>i.top&&d<i.topHalf||g<i.bottom&&g>i.topHalf)&&(e>i.left&&e<i.leftHalf||c<i.right&&c>i.leftHalf)})){b=a.item;b.insert(this.item,b.prevSiblings().include(this.item)?"after":"before");this._findSuspects();a=b.parent();a instanceof h||(a=new h(a));this.fire("change",{list:a,item:this.item,index:a.children().indexOf(this.item)})}},finishDrag:function(){if(this.itemClone){this.itemClone.remove();
+this.item.setStyle("visibility:visible")}h.current=false},_initDrag:function(a,b){this.dimensions();var d=a.dimensions(),e=a.clone().setStyle({margin:0,zIndex:9999,position:"absolute",top:"0px",left:"0px"}).addClass(this.options.dragClass).insertTo(this).setHeight(this.cloneHeight=d.height).setWidth(this.cloneWidth=d.width),c=e.position(),g=d.left-c.x;d=d.top-c.y;e.moveTo(g,d);this.item=a.setStyle("visibility:hidden");this.itemClone=e;this.xDiff=b.x-g;this.yDiff=b.y-d;this.xRDiff=b.x-e.position().x;
+this.yRDiff=b.y-e.position().y;this._findSuspects()},_findSuspects:function(){var a=this.suspects=f([]),b=this.item,d=this.itemClone;this.options.accept.each(function(e){e.children().each(function(c){if(c!==b&&c!==d){var g=c.dimensions();a.push({item:c,top:g.top,left:g.left,right:g.left+g.width,bottom:g.top+g.height,topHalf:g.top+g.height/2,leftHalf:g.left+g.width/2})}})})},_tryXhr:function(a){if(this.options.url){var b=f(this.options.url),d={},e=a.item;a=a.index+1;var c=k.merge({method:this.options.method,
+params:{}},this.options.Xhr);e=e.get("id")||"";if(this.options.parseId&&e)e=(e.match(/\d+/)||[""])[0];if(b.include("%{id}"))b=b.replace("%{id}",e);else d[this.options.idParam]=e;d[this.options.posParam]=a;if(n(c.params))c.params+="&"+k.toQueryString(d);else c.params=k.merge(c.params,d);f.Xhr.load(b,c)}}});j(l).on({mousedown:function(a){var b=a.find(h.Options.cssRule);if(b){b instanceof h||(b=new h(b));b.startDrag(a)}},mousemove:function(a){h.current&&h.current.moveItem(a)},mouseup:function(){h.current&&
+h.current.finishDrag()}});j(window).onBlur(function(){h.current&&h.current.finishDrag()});l.write('<style type="text/css">.rui-sortable{user-select:none;-moz-user-select:none;-webkit-user-select:none}</style>');return h}(document,RightJS);