[Summary view] [Print] [Text view]

   1  /*
   2  ---
   3  
   4  script: Sortables.js
   5  
   6  name: Sortables
   7  
   8  description: Class for creating a drag and drop sorting interface for lists of items.
   9  
  10  license: MIT-style license
  11  
  12  authors:
  13    - Tom Occhino
  14  
  15  requires:
  16    - /Drag.Move
  17  
  18  provides: [Sortables]
  19  
  20  ...
  21  */
  22  
  23  var Sortables = new Class({
  24  
  25      Implements: [Events, Options],
  26  
  27      options: {/*
  28          onSort: $empty(element, clone),
  29          onStart: $empty(element, clone),
  30          onComplete: $empty(element),*/
  31          snap: 4,
  32          opacity: 1,
  33          clone: false,
  34          revert: false,
  35          handle: false,
  36          constrain: false,
  37          preventDefault: false
  38      },
  39  
  40      initialize: function(lists, options){
  41          this.setOptions(options);
  42          this.elements = [];
  43          this.lists = [];
  44          this.idle = true;
  45  
  46          this.addLists($$(document.id(lists) || lists));
  47          if (!this.options.clone) this.options.revert = false;
  48          if (this.options.revert) this.effect = new Fx.Morph(null, $merge({duration: 250, link: 'cancel'}, this.options.revert));
  49      },
  50  
  51      attach: function(){
  52          this.addLists(this.lists);
  53          return this;
  54      },
  55  
  56      detach: function(){
  57          this.lists = this.removeLists(this.lists);
  58          return this;
  59      },
  60  
  61      addItems: function(){
  62          Array.flatten(arguments).each(function(element){
  63              this.elements.push(element);
  64              var start = element.retrieve('sortables:start', this.start.bindWithEvent(this, element));
  65              (this.options.handle ? element.getElement(this.options.handle) || element : element).addEvent('mousedown', start);
  66          }, this);
  67          return this;
  68      },
  69  
  70      addLists: function(){
  71          Array.flatten(arguments).each(function(list){
  72              this.lists.push(list);
  73              this.addItems(list.getChildren());
  74          }, this);
  75          return this;
  76      },
  77  
  78      removeItems: function(){
  79          return $$(Array.flatten(arguments).map(function(element){
  80              this.elements.erase(element);
  81              var start = element.retrieve('sortables:start');
  82              (this.options.handle ? element.getElement(this.options.handle) || element : element).removeEvent('mousedown', start);
  83              
  84              return element;
  85          }, this));
  86      },
  87  
  88      removeLists: function(){
  89          return $$(Array.flatten(arguments).map(function(list){
  90              this.lists.erase(list);
  91              this.removeItems(list.getChildren());
  92              
  93              return list;
  94          }, this));
  95      },
  96  
  97      getClone: function(event, element){
  98          if (!this.options.clone) return new Element('div').inject(document.body);
  99          if ($type(this.options.clone) == 'function') return this.options.clone.call(this, event, element, this.list);
 100          var clone = element.clone(true).setStyles({
 101              margin: '0px',
 102              position: 'absolute',
 103              visibility: 'hidden',
 104              'width': element.getStyle('width')
 105          });
 106          //prevent the duplicated radio inputs from unchecking the real one
 107          if (clone.get('html').test('radio')) {
 108              clone.getElements('input[type=radio]').each(function(input, i) {
 109                  input.set('name', 'clone_' + i);
 110                  if (input.get('checked')) element.getElements('input[type=radio]')[i].set('checked', true);
 111              });
 112          }
 113          
 114          return clone.inject(this.list).setPosition(element.getPosition(element.getOffsetParent()));
 115      },
 116  
 117      getDroppables: function(){
 118          var droppables = this.list.getChildren();
 119          if (!this.options.constrain) droppables = this.lists.concat(droppables).erase(this.list);
 120          return droppables.erase(this.clone).erase(this.element);
 121      },
 122  
 123      insert: function(dragging, element){
 124          var where = 'inside';
 125          if (this.lists.contains(element)){
 126              this.list = element;
 127              this.drag.droppables = this.getDroppables();
 128          } else {
 129              where = this.element.getAllPrevious().contains(element) ? 'before' : 'after';
 130          }
 131          this.element.inject(element, where);
 132          this.fireEvent('sort', [this.element, this.clone]);
 133      },
 134  
 135      start: function(event, element){
 136          if (
 137              !this.idle ||
 138              event.rightClick ||
 139              ['button', 'input'].contains(document.id(event.target).get('tag'))
 140          ) return;
 141  
 142          this.idle = false;
 143          this.element = element;
 144          this.opacity = element.get('opacity');
 145          this.list = element.getParent();
 146          this.clone = this.getClone(event, element);
 147  
 148          this.drag = new Drag.Move(this.clone, {
 149              preventDefault: this.options.preventDefault,
 150              snap: this.options.snap,
 151              container: this.options.constrain && this.element.getParent(),
 152              droppables: this.getDroppables(),
 153              onSnap: function(){
 154                  event.stop();
 155                  this.clone.setStyle('visibility', 'visible');
 156                  this.element.set('opacity', this.options.opacity || 0);
 157                  this.fireEvent('start', [this.element, this.clone]);
 158              }.bind(this),
 159              onEnter: this.insert.bind(this),
 160              onCancel: this.reset.bind(this),
 161              onComplete: this.end.bind(this)
 162          });
 163  
 164          this.clone.inject(this.element, 'before');
 165          this.drag.start(event);
 166      },
 167  
 168      end: function(){
 169          this.drag.detach();
 170          this.element.set('opacity', this.opacity);
 171          if (this.effect){
 172              var dim = this.element.getStyles('width', 'height');
 173              var pos = this.clone.computePosition(this.element.getPosition(this.clone.offsetParent));
 174              this.effect.element = this.clone;
 175              this.effect.start({
 176                  top: pos.top,
 177                  left: pos.left,
 178                  width: dim.width,
 179                  height: dim.height,
 180                  opacity: 0.25
 181              }).chain(this.reset.bind(this));
 182          } else {
 183              this.reset();
 184          }
 185      },
 186  
 187      reset: function(){
 188          this.idle = true;
 189          this.clone.destroy();
 190          this.fireEvent('complete', this.element);
 191      },
 192  
 193      serialize: function(){
 194          var params = Array.link(arguments, {modifier: Function.type, index: $defined});
 195          var serial = this.lists.map(function(list){
 196              return list.getChildren().map(params.modifier || function(element){
 197                  return element.get('id');
 198              }, this);
 199          }, this);
 200  
 201          var index = params.index;
 202          if (this.lists.length == 1) index = 0;
 203          return $chk(index) && index >= 0 && index < this.lists.length ? serial[index] : serial;
 204      }
 205  
 206  });