1 /*

     2 YUI 3.10.3 (build 2fb5187)

     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.10.3', {"requires": ["dd-drag", "dd-drop-plugin", "event-mouseenter"]});