[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('sortable', function (Y, NAME) {
   9  
  10  
  11      /**
  12       * The class allows you to create a Drag & Drop reordered list.
  13       * @module sortable
  14       */
  15      /**
  16       * The class allows you to create a Drag & Drop reordered list.
  17       * @class Sortable
  18       * @extends Base
  19       * @constructor
  20       */
  21  
  22  
  23      var Sortable = function() {
  24          Sortable.superclass.constructor.apply(this, arguments);
  25      },
  26      CURRENT_NODE = 'currentNode',
  27      OPACITY_NODE = 'opacityNode',
  28      CONT = 'container',
  29      ID = 'id',
  30      ZINDEX = 'zIndex',
  31      OPACITY = 'opacity',
  32      PARENT_NODE = 'parentNode',
  33      NODES = 'nodes',
  34      NODE = 'node';
  35  
  36  
  37      Y.extend(Sortable, Y.Base, {
  38          /**
  39          * @property delegate
  40          * @type DD.Delegate
  41          * @description A reference to the DD.Delegate instance.
  42          */
  43          delegate: null,
  44          /**
  45          * @property drop
  46          * @type DD.Drop
  47          * @description A reference to the DD.Drop instance
  48          */
  49          drop: null,
  50          initializer: function() {
  51              var id = 'sortable-' + Y.guid(),
  52                  delConfig = {
  53                      container: this.get(CONT),
  54                      nodes: this.get(NODES),
  55                      target: true,
  56                      invalid: this.get('invalid'),
  57                      dragConfig: {
  58                          groups: [ id ]
  59                      }
  60                  }, del;
  61  
  62              if (this.get('handles')) {
  63                  delConfig.handles = this.get('handles');
  64              }
  65              del = new Y.DD.Delegate(delConfig);
  66  
  67              this.set(ID, id);
  68  
  69              del.dd.plug(Y.Plugin.DDProxy, {
  70                  moveOnEnd: false,
  71                  cloneNode: true
  72              });
  73  
  74              this.drop =  new Y.DD.Drop({
  75                  node: this.get(CONT),
  76                  bubbleTarget: del,
  77                  groups: del.dd.get('groups')
  78              });
  79              this.drop.on('drop:enter', Y.bind(this._onDropEnter, this));
  80  
  81              del.on({
  82                  'drag:start': Y.bind(this._onDragStart, this),
  83                  'drag:end': Y.bind(this._onDragEnd, this),
  84                  'drag:over': Y.bind(this._onDragOver, this),
  85                  'drag:drag': Y.bind(this._onDrag, this)
  86              });
  87  
  88              this.delegate = del;
  89              Sortable.reg(this, id);
  90          },
  91          _up: null,
  92          _y: null,
  93          _onDrag: function(e) {
  94              if (e.pageY < this._y) {
  95                  this._up = true;
  96              } else if (e.pageY > this._y) {
  97                  this._up = false;
  98              }
  99  
 100              this._y = e.pageY;
 101          },
 102          /**
 103          * @private
 104          * @method _onDropEnter
 105          * @param Event e The Event Object
 106          * @description Handles the DropEnter event to append a new node to a target.
 107          */
 108          _onDropEnter: function(e) {
 109              var dropNode = e.drop.get(NODE),
 110                  dragNode = e.drag.get(NODE);
 111  
 112              if (!dropNode.test(this.get(NODES)) &&
 113                  !dragNode.get(PARENT_NODE).compareTo(dropNode)) {
 114                  dropNode.append(dragNode);
 115              }
 116          },
 117          /**
 118          * @private
 119          * @method _onDragOver
 120          * @param Event e The Event Object
 121          * @description Handles the DragOver event that moves the object in the list or to another list.
 122          */
 123          _onDragOver: function(e) {
 124              if (!e.drop.get(NODE).test(this.get(NODES))) {
 125                  return;
 126              }
 127              if (e.drag.get(NODE) === e.drop.get(NODE)) {
 128                  return;
 129              }
 130              // is drop a child of drag?
 131              if (e.drag.get(NODE).contains(e.drop.get(NODE))) {
 132                  return;
 133              }
 134              var same = false, dir, oldNode, newNode, dropsort, dropNode,
 135                  moveType = this.get('moveType').toLowerCase();
 136  
 137              if (e.drag.get(NODE).get(PARENT_NODE).contains(e.drop.get(NODE))) {
 138                  same = true;
 139              }
 140              if (same && moveType === 'move') {
 141                  moveType = 'insert';
 142              }
 143              switch (moveType) {
 144                  case 'insert':
 145                      dir = ((this._up) ? 'before' : 'after');
 146                      dropNode = e.drop.get(NODE);
 147                      if (Y.Sortable._test(dropNode, this.get(CONT))) {
 148                          dropNode.append(e.drag.get(NODE));
 149                      } else {
 150                          dropNode.insert(e.drag.get(NODE), dir);
 151                      }
 152                      break;
 153                  case 'swap':
 154                      Y.DD.DDM.swapNode(e.drag, e.drop);
 155                      break;
 156                  case 'move':
 157                  case 'copy':
 158                      dropsort = Y.Sortable.getSortable(e.drop.get(NODE).get(PARENT_NODE));
 159  
 160                      if (!dropsort) {
 161                          Y.log('No delegate parent found', 'error', 'sortable');
 162                          return;
 163                      }
 164  
 165                      Y.DD.DDM.getDrop(e.drag.get(NODE)).addToGroup(dropsort.get(ID));
 166  
 167                      //Same List
 168                      if (same) {
 169                          Y.DD.DDM.swapNode(e.drag, e.drop);
 170                      } else {
 171                          if (this.get('moveType') === 'copy') {
 172                              //New List
 173                              oldNode = e.drag.get(NODE);
 174                              newNode = oldNode.cloneNode(true);
 175  
 176                              newNode.set(ID, '');
 177                              e.drag.set(NODE, newNode);
 178                              dropsort.delegate.createDrop(newNode, [dropsort.get(ID)]);
 179                              oldNode.setStyles({
 180                                  top: '',
 181                                  left: ''
 182                              });
 183                          }
 184                          e.drop.get(NODE).insert(e.drag.get(NODE), 'before');
 185                      }
 186                      break;
 187              }
 188  
 189              this.fire(moveType, { same: same, drag: e.drag, drop: e.drop });
 190              this.fire('moved', { same: same, drag: e.drag, drop: e.drop });
 191          },
 192          /**
 193          * @private
 194          * @method _onDragStart
 195          * @param Event e The Event Object
 196          * @description Handles the DragStart event and initializes some settings.
 197          */
 198          _onDragStart: function() {
 199              var del = this.delegate,
 200                  lastNode = del.get('lastNode');
 201              if (lastNode && lastNode.getDOMNode()) {
 202                  lastNode.setStyle(ZINDEX, '');
 203              }
 204              del.get(this.get(OPACITY_NODE)).setStyle(OPACITY, this.get(OPACITY));
 205              del.get(CURRENT_NODE).setStyle(ZINDEX, '999');
 206          },
 207          /**
 208          * @private
 209          * @method _onDragEnd
 210          * @param Event e The Event Object
 211          * @description Handles the DragEnd event that cleans up the settings in the drag:start event.
 212          */
 213          _onDragEnd: function() {
 214              this.delegate.get(this.get(OPACITY_NODE)).setStyle(OPACITY, 1);
 215              this.delegate.get(CURRENT_NODE).setStyle(ZINDEX, '');
 216              this.delegate.get(CURRENT_NODE).setStyles({
 217                  top: '',
 218                  left: ''
 219              });
 220              this.sync();
 221          },
 222          /**
 223          * @method plug
 224          * @param Class cls The class to plug
 225          * @param Object config The class config
 226          * @description Passthrough to the DD.Delegate.ddplug method
 227          * @chainable
 228          */
 229          plug: function(cls, config) {
 230              //I don't like this.. Not at all, need to discuss with the team
 231              if (cls && cls.NAME.substring(0, 4).toLowerCase() === 'sort') {
 232                  this.constructor.superclass.plug.call(this, cls, config);
 233              } else {
 234                  this.delegate.dd.plug(cls, config);
 235              }
 236              return this;
 237          },
 238          /**
 239          * @method sync
 240          * @description Passthrough to the DD.Delegate syncTargets method.
 241          * @chainable
 242          */
 243          sync: function() {
 244              this.delegate.syncTargets();
 245              return this;
 246          },
 247          destructor: function() {
 248              this.drop.destroy();
 249              this.delegate.destroy();
 250              Sortable.unreg(this, this.get(ID));
 251          },
 252          /**
 253          * @method join
 254          * @param Sortable sel The Sortable list to join with
 255          * @param String type The type of join to do: full, inner, outer, none. Default: full
 256          * @description Join this Sortable with another Sortable instance.
 257          * <ul>
 258          *   <li>full: Exchange nodes with both lists.</li>
 259          *   <li>inner: Items can go into this list from the joined list.</li>
 260          *   <li>outer: Items can go out of the joined list into this list.</li>
 261          *   <li>none: Removes the join.</li>
 262          * </ul>
 263          * @chainable
 264          */
 265          join: function(sel, type) {
 266              if (!(sel instanceof Y.Sortable)) {
 267                  Y.error('Sortable: join needs a Sortable Instance');
 268                  return this;
 269              }
 270              if (!type) {
 271                  type = 'full';
 272              }
 273              type = type.toLowerCase();
 274              var method = '_join_' + type;
 275  
 276              if (this[method]) {
 277                  this[method](sel);
 278              }
 279  
 280              return this;
 281          },
 282          /**
 283          * @private
 284          * @method _join_none
 285          * @param Sortable sel The Sortable to remove the join from
 286          * @description Removes the join with the passed Sortable.
 287          */
 288          _join_none: function(sel) {
 289              this.delegate.dd.removeFromGroup(sel.get(ID));
 290              sel.delegate.dd.removeFromGroup(this.get(ID));
 291          },
 292          /**
 293          * @private
 294          * @method _join_full
 295          * @param Sortable sel The Sortable list to join with
 296          * @description Joins both of the Sortables together.
 297          */
 298          _join_full: function(sel) {
 299              this.delegate.dd.addToGroup(sel.get(ID));
 300              sel.delegate.dd.addToGroup(this.get(ID));
 301          },
 302          /**
 303          * @private
 304          * @method _join_outer
 305          * @param Sortable sel The Sortable list to join with
 306          * @description Allows this Sortable to accept items from the passed Sortable.
 307          */
 308          _join_outer: function(sel) {
 309              this.delegate.dd.addToGroup(sel.get(ID));
 310          },
 311          /**
 312          * @private
 313          * @method _join_inner
 314          * @param Sortable sel The Sortable list to join with
 315          * @description Allows this Sortable to give items to the passed Sortable.
 316          */
 317          _join_inner: function(sel) {
 318              sel.delegate.dd.addToGroup(this.get(ID));
 319          },
 320          /**
 321          * A custom callback to allow a user to extract some sort of id or any other data
 322          * from the node to use in the "ordering list" and then that data should be returned from the callback.
 323          * @method getOrdering
 324          * @param Function callback
 325          * @return Array
 326          */
 327          getOrdering: function(callback) {
 328              var ordering = [];
 329  
 330              if (!Y.Lang.isFunction(callback)) {
 331                  callback = function (node) {
 332                      return node;
 333                  };
 334              }
 335  
 336              Y.one(this.get(CONT)).all(this.get(NODES)).each(function(node) {
 337                  ordering.push(callback(node));
 338              });
 339              return ordering;
 340         }
 341      }, {
 342          NAME: 'sortable',
 343          ATTRS: {
 344              /**
 345              * @attribute handles
 346              * @description Drag handles to pass on to the internal DD.Delegate instance.
 347              * @type Array
 348              */
 349              handles: {
 350                  value: false
 351              },
 352              /**
 353              * @attribute container
 354              * @description A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
 355              * @type String
 356              */
 357              container: {
 358                  value: 'body'
 359              },
 360              /**
 361              * @attribute nodes
 362              * @description A selector query to get the children of the "container" to make draggable elements from.
 363              * @type String
 364              */
 365              nodes: {
 366                  value: '.dd-draggable'
 367              },
 368              /**
 369              * @attribute opacity
 370              * @description The opacity to change the proxy item to when dragging.
 371              * @type String
 372              */
 373              opacity: {
 374                  value: '.75'
 375              },
 376              /**
 377              * @attribute opacityNode
 378              * @description The node to set opacity on when dragging (dragNode or currentNode). Default: currentNode.
 379              * @type String
 380              */
 381              opacityNode: {
 382                  value: 'currentNode'
 383              },
 384              /**
 385              * @attribute id
 386              * @description The id of this Sortable, used to get a reference to this Sortable list from another list.
 387              * @type String
 388              */
 389              id: {
 390                  value: null
 391              },
 392              /**
 393              * @attribute moveType
 394              * @description How should an item move to another list: insert, swap, move, copy. Default: insert
 395              * @type String
 396              */
 397              moveType: {
 398                  value: 'insert'
 399              },
 400              /**
 401              * @attribute invalid
 402              * @description A selector string to test if a list item is invalid and not sortable
 403              * @type String
 404              */
 405              invalid: {
 406                  value: ''
 407              }
 408          },
 409          /**
 410          * @static
 411          * @property _sortables
 412          * @private
 413          * @type Object
 414          * @description Hash map of all Sortables on the page.
 415          */
 416          _sortables: {},
 417          /**
 418          * @static
 419          * @method _test
 420          * @param {Node} node The node instance to test.
 421          * @param {String|Node} test The node instance or selector string to test against.
 422          * @description Test a Node or a selector for the container
 423          */
 424          _test: function(node, test) {
 425              var ret;
 426              if (test instanceof Y.Node) {
 427                  ret = (test === node);
 428              } else {
 429                  ret = node.test(test);
 430              }
 431              return ret;
 432          },
 433          /**
 434          * @static
 435          * @method getSortable
 436          * @param {String|Node} node The node instance or selector string to use to find a Sortable instance.
 437          * @description Get a Sortable instance back from a node reference or a selector string.
 438          */
 439          getSortable: function(node) {
 440              var s = null,
 441                  id = null;
 442              node = Y.one(node);
 443              id = node.get(ID);
 444              if(id && Y.Sortable._sortables[id]) {
 445                  return Y.Sortable._sortables[id];
 446              }
 447              Y.Object.each(Y.Sortable._sortables, function(v) {
 448                  if (Y.Sortable._test(node, v.get(CONT))) {
 449                      s = v;
 450                  }
 451              });
 452              return s;
 453          },
 454          /**
 455          * @static
 456          * @method reg
 457          * @param Sortable s A Sortable instance.
 458          * @param String id (optional) The id of the sortable instance.
 459          * @description Register a Sortable instance with the singleton to allow lookups later.
 460          */
 461          reg: function(s, id) {
 462              if (!id) {
 463                  id = s.get(ID);
 464              }
 465              Y.Sortable._sortables[id] = s;
 466          },
 467          /**
 468          * @static
 469          * @method unreg
 470          * @param Sortable s A Sortable instance.
 471          * @param String id (optional) The id of the sortable instance.
 472          * @description Unregister a Sortable instance with the singleton.
 473          */
 474          unreg: function(s, id) {
 475              if (!id) {
 476                  id = s.get(ID);
 477              }
 478              if (id && Y.Sortable._sortables[id]) {
 479                  delete Y.Sortable._sortables[id];
 480                  return;
 481              }
 482              Y.Object.each(Y.Sortable._sortables, function(v, k) {
 483                  if (v === s) {
 484                      delete Sortable._sortables[k];
 485                  }
 486              });
 487          }
 488      });
 489  
 490      Y.Sortable = Sortable;
 491  
 492      /**
 493      * @event copy
 494      * @description A Sortable node was moved with a copy.
 495      * @param {EventFacade} event An Event Facade object
 496      * @param {Boolean} event.same Moved to the same list.
 497      * @param {DD.Drag} event.drag The drag instance.
 498      * @param {DD.Drop} event.drop The drop instance.
 499      */
 500      /**
 501      * @event move
 502      * @description A Sortable node was moved with a move.
 503      * @param {EventFacade} event An Event Facade object with the following specific property added:
 504      * @param {Boolean} event.same Moved to the same list.
 505      * @param {DD.Drag} event.drag The drag instance.
 506      * @param {DD.Drop} event.drop The drop instance.
 507      */
 508      /**
 509      * @event insert
 510      * @description A Sortable node was moved with an insert.
 511      * @param {EventFacade} event An Event Facade object with the following specific property added:
 512      * @param {Boolean} event.same Moved to the same list.
 513      * @param {DD.Drag} event.drag The drag instance.
 514      * @param {DD.Drop} event.drop The drop instance.
 515      */
 516      /**
 517      * @event swap
 518      * @description A Sortable node was moved with a swap.
 519      * @param {EventFacade} event An Event Facade object with the following specific property added:
 520      * @param {Boolean} event.same Moved to the same list.
 521      * @param {DD.Drag} event.drag The drag instance.
 522      * @param {DD.Drop} event.drop The drop instance.
 523      */
 524      /**
 525      * @event moved
 526      * @description A Sortable node was moved.
 527      * @param {EventFacade} event An Event Facade object with the following specific property added:
 528      * @param {Boolean} event.same Moved to the same list.
 529      * @param {DD.Drag} event.drag The drag instance.
 530      * @param {DD.Drop} event.drop The drop instance.
 531      */
 532  
 533  
 534  
 535  }, '3.17.2', {"requires": ["dd-delegate", "dd-drop-plugin", "dd-proxy"]});