[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('dd-delegate', function (Y, NAME) {
   9  
  10  
  11      /**
  12       * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
  13       * @module dd
  14       * @submodule dd-delegate
  15       */
  16      /**
  17       * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
  18       * @class Delegate
  19       * @extends Base
  20       * @constructor
  21       * @namespace DD
  22       */
  23  
  24  
  25      var Delegate = function() {
  26          Delegate.superclass.constructor.apply(this, arguments);
  27      },
  28      CONT = 'container',
  29      NODES = 'nodes',
  30      _tmpNode = Y.Node.create('<div>Temp Node</div>');
  31  
  32  
  33      Y.extend(Delegate, Y.Base, {
  34          /**
  35          * The default bubbleTarget for this object. Default: Y.DD.DDM
  36          * @private
  37          * @property _bubbleTargets
  38          */
  39          _bubbleTargets: Y.DD.DDM,
  40          /**
  41          * A reference to the temporary dd instance used under the hood.
  42          * @property dd
  43          */
  44          dd: null,
  45          /**
  46          * The state of the Y.DD.DDM._noShim property to it can be reset.
  47          * @property _shimState
  48          * @private
  49          */
  50          _shimState: null,
  51          /**
  52          * Array of event handles to be destroyed
  53          * @private
  54          * @property _handles
  55          */
  56          _handles: null,
  57          /**
  58          * Listens to the nodeChange event and sets the dragNode on the temp dd instance.
  59          * @private
  60          * @method _onNodeChange
  61          * @param {Event} e The Event.
  62          */
  63          _onNodeChange: function(e) {
  64              this.set('dragNode', e.newVal);
  65          },
  66          /**
  67          * Listens for the drag:end event and updates the temp dd instance.
  68          * @private
  69          * @method _afterDragEnd
  70          * @param {Event} e The Event.
  71          */
  72          _afterDragEnd: function() {
  73              Y.DD.DDM._noShim = this._shimState;
  74  
  75              this.set('lastNode', this.dd.get('node'));
  76              this.get('lastNode').removeClass(Y.DD.DDM.CSS_PREFIX + '-dragging');
  77              this.dd._unprep();
  78              this.dd.set('node', _tmpNode);
  79          },
  80          /**
  81          * The callback for the Y.DD.Delegate instance used
  82          * @private
  83          * @method _delMouseDown
  84          * @param {Event} e The MouseDown Event.
  85          */
  86          _delMouseDown: function(e) {
  87              var tar = e.currentTarget,
  88                  dd = this.dd,
  89                  dNode = tar,
  90                  config = this.get('dragConfig');
  91  
  92              if (tar.test(this.get(NODES)) && !tar.test(this.get('invalid'))) {
  93                  this._shimState = Y.DD.DDM._noShim;
  94                  Y.DD.DDM._noShim = true;
  95                  this.set('currentNode', tar);
  96                  dd.set('node', tar);
  97                  if (config && config.dragNode) {
  98                      dNode = config.dragNode;
  99                  } else if (dd.proxy) {
 100                      dNode = Y.DD.DDM._proxy;
 101                  }
 102                  dd.set('dragNode', dNode);
 103                  dd._prep();
 104  
 105                  dd.fire('drag:mouseDown', { ev: e });
 106              }
 107          },
 108          /**
 109          * Sets the target shim state
 110          * @private
 111          * @method _onMouseEnter
 112          * @param {Event} e The MouseEnter Event
 113          */
 114          _onMouseEnter: function() {
 115              this._shimState = Y.DD.DDM._noShim;
 116              Y.DD.DDM._noShim = true;
 117          },
 118          /**
 119          * Resets the target shim state
 120          * @private
 121          * @method _onMouseLeave
 122          * @param {Event} e The MouseLeave Event
 123          */
 124          _onMouseLeave: function() {
 125              Y.DD.DDM._noShim = this._shimState;
 126          },
 127          initializer: function() {
 128              this._handles = [];
 129              //Create a tmp DD instance under the hood.
 130              //var conf = Y.clone(this.get('dragConfig') || {}),
 131              var conf = this.get('dragConfig') || {},
 132                  cont = this.get(CONT);
 133  
 134              conf.node = _tmpNode.cloneNode(true);
 135              conf.bubbleTargets = this;
 136  
 137              if (this.get('handles')) {
 138                  conf.handles = this.get('handles');
 139              }
 140  
 141              this.dd = new Y.DD.Drag(conf);
 142  
 143              //On end drag, detach the listeners
 144              this.dd.after('drag:end', Y.bind(this._afterDragEnd, this));
 145              this.dd.on('dragNodeChange', Y.bind(this._onNodeChange, this));
 146              this.dd.after('drag:mouseup', function() {
 147                  this._unprep();
 148              });
 149  
 150              //Attach the delegate to the container
 151              this._handles.push(Y.delegate(Y.DD.Drag.START_EVENT, Y.bind(this._delMouseDown, this), cont, this.get(NODES)));
 152  
 153              this._handles.push(Y.on('mouseenter', Y.bind(this._onMouseEnter, this), cont));
 154  
 155              this._handles.push(Y.on('mouseleave', Y.bind(this._onMouseLeave, this), cont));
 156  
 157              Y.later(50, this, this.syncTargets);
 158              Y.DD.DDM.regDelegate(this);
 159          },
 160          /**
 161          * Applies the Y.Plugin.Drop to all nodes matching the cont + nodes selector query.
 162          * @method syncTargets
 163          * @chainable
 164          */
 165          syncTargets: function() {
 166              if (!Y.Plugin.Drop || this.get('destroyed')) {
 167                  return;
 168              }
 169              var items, groups, config;
 170  
 171              if (this.get('target')) {
 172                  items = Y.one(this.get(CONT)).all(this.get(NODES));
 173                  groups = this.dd.get('groups');
 174                  config = this.get('dragConfig');
 175  
 176                  if (config && config.groups) {
 177                      groups = config.groups;
 178                  }
 179  
 180                  items.each(function(i) {
 181                      this.createDrop(i, groups);
 182                  }, this);
 183              }
 184              return this;
 185          },
 186          /**
 187          * Apply the Drop plugin to this node
 188          * @method createDrop
 189          * @param {Node} node The Node to apply the plugin to
 190          * @param {Array} groups The default groups to assign this target to.
 191          * @return Node
 192          */
 193          createDrop: function(node, groups) {
 194              var config = {
 195                  useShim: false,
 196                  bubbleTargets: this
 197              };
 198  
 199              if (!node.drop) {
 200                  node.plug(Y.Plugin.Drop, config);
 201              }
 202              node.drop.set('groups', groups);
 203              return node;
 204          },
 205          destructor: function() {
 206              if (this.dd) {
 207                  this.dd.destroy();
 208              }
 209              if (Y.Plugin.Drop) {
 210                  var targets = Y.one(this.get(CONT)).all(this.get(NODES));
 211                  targets.unplug(Y.Plugin.Drop);
 212              }
 213              Y.Array.each(this._handles, function(v) {
 214                  v.detach();
 215              });
 216          }
 217      }, {
 218          NAME: 'delegate',
 219          ATTRS: {
 220              /**
 221              * A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
 222              * @attribute container
 223              * @type String
 224              */
 225              container: {
 226                  value: 'body'
 227              },
 228              /**
 229              * A selector query to get the children of the "container" to make draggable elements from.
 230              * @attribute nodes
 231              * @type String
 232              */
 233              nodes: {
 234                  value: '.dd-draggable'
 235              },
 236              /**
 237              * A selector query to test a node to see if it's an invalid item.
 238              * @attribute invalid
 239              * @type String
 240              */
 241              invalid: {
 242                  value: 'input, select, button, a, textarea'
 243              },
 244              /**
 245              * Y.Node instance of the last item dragged.
 246              * @attribute lastNode
 247              * @type Node
 248              */
 249              lastNode: {
 250                  value: _tmpNode
 251              },
 252              /**
 253              * Y.Node instance of the dd node.
 254              * @attribute currentNode
 255              * @type Node
 256              */
 257              currentNode: {
 258                  value: _tmpNode
 259              },
 260              /**
 261              * Y.Node instance of the dd dragNode.
 262              * @attribute dragNode
 263              * @type Node
 264              */
 265              dragNode: {
 266                  value: _tmpNode
 267              },
 268              /**
 269              * Is the mouse currently over the container
 270              * @attribute over
 271              * @type Boolean
 272              */
 273              over: {
 274                  value: false
 275              },
 276              /**
 277              * Should the items also be a drop target.
 278              * @attribute target
 279              * @type Boolean
 280              */
 281              target: {
 282                  value: false
 283              },
 284              /**
 285              * The default config to be used when creating the DD instance.
 286              * @attribute dragConfig
 287              * @type Object
 288              */
 289              dragConfig: {
 290                  value: null
 291              },
 292              /**
 293              * The handles config option added to the temp DD instance.
 294              * @attribute handles
 295              * @type Array
 296              */
 297              handles: {
 298                  value: null
 299              }
 300          }
 301      });
 302  
 303      Y.mix(Y.DD.DDM, {
 304          /**
 305          * Holder for all Y.DD.Delegate instances
 306          * @private
 307          * @for DDM
 308          * @property _delegates
 309          * @type Array
 310          */
 311          _delegates: [],
 312          /**
 313          * Register a Delegate with the DDM
 314          * @for DDM
 315          * @method regDelegate
 316          */
 317          regDelegate: function(del) {
 318              this._delegates.push(del);
 319          },
 320          /**
 321          * Get a delegate instance from a container node
 322          * @for DDM
 323          * @method getDelegate
 324          * @return Y.DD.Delegate
 325          */
 326          getDelegate: function(node) {
 327              var del = null;
 328              node = Y.one(node);
 329              Y.Array.each(this._delegates, function(v) {
 330                  if (node.test(v.get(CONT))) {
 331                      del = v;
 332                  }
 333              }, this);
 334              return del;
 335          }
 336      });
 337  
 338      Y.namespace('DD');
 339      Y.DD.Delegate = Delegate;
 340  
 341  
 342  
 343  
 344  }, '3.17.2', {"requires": ["dd-drag", "dd-drop-plugin", "event-mouseenter"]});