lib/yuilib/3.13.0/dd-delegate/dd-delegate-debug.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 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         * @return {Self}
 164         * @chainable
 165         */
 166         syncTargets: function() {
 167             if (!Y.Plugin.Drop || this.get('destroyed')) {
 168                 return;
 169             }
 170             var items, groups, config;
 171
 172             if (this.get('target')) {
 173                 items = Y.one(this.get(CONT)).all(this.get(NODES));
 174                 groups = this.dd.get('groups');
 175                 config = this.get('dragConfig');
 176
 177                 if (config && config.groups) {
 178                     groups = config.groups;
 179                 }
 180
 181                 items.each(function(i) {
 182                     this.createDrop(i, groups);
 183                 }, this);
 184             }
 185             return this;
 186         },
 187         /**
 188         * Apply the Drop plugin to this node
 189         * @method createDrop
 190         * @param {Node} node The Node to apply the plugin to
 191         * @param {Array} groups The default groups to assign this target to.
 192         * @return Node
 193         */
 194         createDrop: function(node, groups) {
 195             var config = {
 196                 useShim: false,
 197                 bubbleTargets: this
 198             };
 199
 200             if (!node.drop) {
 201                 node.plug(Y.Plugin.Drop, config);
 202             }
 203             node.drop.set('groups', groups);
 204             return node;
 205         },
 206         destructor: function() {
 207             if (this.dd) {
 208                 this.dd.destroy();
 209             }
 210             if (Y.Plugin.Drop) {
 211                 var targets = Y.one(this.get(CONT)).all(this.get(NODES));
 212                 targets.unplug(Y.Plugin.Drop);
 213             }
 214             Y.Array.each(this._handles, function(v) {
 215                 v.detach();
 216             });
 217         }
 218     }, {
 219         NAME: 'delegate',
 220         ATTRS: {
 221             /**
 222             * A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
 223             * @attribute container
 224             * @type String
 225             */
 226             container: {
 227                 value: 'body'
 228             },
 229             /**
 230             * A selector query to get the children of the "container" to make draggable elements from.
 231             * @attribute nodes
 232             * @type String
 233             */
 234             nodes: {
 235                 value: '.dd-draggable'
 236             },
 237             /**
 238             * A selector query to test a node to see if it's an invalid item.
 239             * @attribute invalid
 240             * @type String
 241             */
 242             invalid: {
 243                 value: 'input, select, button, a, textarea'
 244             },
 245             /**
 246             * Y.Node instance of the last item dragged.
 247             * @attribute lastNode
 248             * @type Node
 249             */
 250             lastNode: {
 251                 value: _tmpNode
 252             },
 253             /**
 254             * Y.Node instance of the dd node.
 255             * @attribute currentNode
 256             * @type Node
 257             */
 258             currentNode: {
 259                 value: _tmpNode
 260             },
 261             /**
 262             * Y.Node instance of the dd dragNode.
 263             * @attribute dragNode
 264             * @type Node
 265             */
 266             dragNode: {
 267                 value: _tmpNode
 268             },
 269             /**
 270             * Is the mouse currently over the container
 271             * @attribute over
 272             * @type Boolean
 273             */
 274             over: {
 275                 value: false
 276             },
 277             /**
 278             * Should the items also be a drop target.
 279             * @attribute target
 280             * @type Boolean
 281             */
 282             target: {
 283                 value: false
 284             },
 285             /**
 286             * The default config to be used when creating the DD instance.
 287             * @attribute dragConfig
 288             * @type Object
 289             */
 290             dragConfig: {
 291                 value: null
 292             },
 293             /**
 294             * The handles config option added to the temp DD instance.
 295             * @attribute handles
 296             * @type Array
 297             */
 298             handles: {
 299                 value: null
 300             }
 301         }
 302     });
 303
 304     Y.mix(Y.DD.DDM, {
 305         /**
 306         * Holder for all Y.DD.Delegate instances
 307         * @private
 308         * @for DDM
 309         * @property _delegates
 310         * @type Array
 311         */
 312         _delegates: [],
 313         /**
 314         * Register a Delegate with the DDM
 315         * @for DDM
 316         * @method regDelegate
 317         */
 318         regDelegate: function(del) {
 319             this._delegates.push(del);
 320         },
 321         /**
 322         * Get a delegate instance from a container node
 323         * @for DDM
 324         * @method getDelegate
 325         * @return Y.DD.Delegate
 326         */
 327         getDelegate: function(node) {
 328             var del = null;
 329             node = Y.one(node);
 330             Y.Array.each(this._delegates, function(v) {
 331                 if (node.test(v.get(CONT))) {
 332                     del = v;
 333                 }
 334             }, this);
 335             return del;
 336         }
 337     });
 338
 339     Y.namespace('DD');
 340     Y.DD.Delegate = Delegate;
 341
 342
 343
 344
 345 }, '3.13.0', {"requires": ["dd-drag", "dd-drop-plugin", "event-mouseenter"]});