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/
8 YUI.add('dd-delegate', function (Y, NAME) {
12 * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
14 * @submodule dd-delegate
17 * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
25 var Delegate = function() {
26 Delegate.superclass.constructor.apply(this, arguments);
30 _tmpNode = Y.Node.create('<div>Temp Node</div>');
33 Y.extend(Delegate, Y.Base, {
35 * The default bubbleTarget for this object. Default: Y.DD.DDM
37 * @property _bubbleTargets
39 _bubbleTargets: Y.DD.DDM,
41 * A reference to the temporary dd instance used under the hood.
46 * The state of the Y.DD.DDM._noShim property to it can be reset.
47 * @property _shimState
52 * Array of event handles to be destroyed
58 * Listens to the nodeChange event and sets the dragNode on the temp dd instance.
60 * @method _onNodeChange
61 * @param {Event} e The Event.
63 _onNodeChange: function(e) {
64 this.set('dragNode', e.newVal);
67 * Listens for the drag:end event and updates the temp dd instance.
69 * @method _afterDragEnd
70 * @param {Event} e The Event.
72 _afterDragEnd: function() {
73 Y.DD.DDM._noShim = this._shimState;
75 this.set('lastNode', this.dd.get('node'));
76 this.get('lastNode').removeClass(Y.DD.DDM.CSS_PREFIX + '-dragging');
78 this.dd.set('node', _tmpNode);
81 * The callback for the Y.DD.Delegate instance used
83 * @method _delMouseDown
84 * @param {Event} e The MouseDown Event.
86 _delMouseDown: function(e) {
87 var tar = e.currentTarget,
90 config = this.get('dragConfig');
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);
97 if (config && config.dragNode) {
98 dNode = config.dragNode;
99 } else if (dd.proxy) {
100 dNode = Y.DD.DDM._proxy;
102 dd.set('dragNode', dNode);
105 dd.fire('drag:mouseDown', { ev: e });
109 * Sets the target shim state
111 * @method _onMouseEnter
112 * @param {Event} e The MouseEnter Event
114 _onMouseEnter: function() {
115 this._shimState = Y.DD.DDM._noShim;
116 Y.DD.DDM._noShim = true;
119 * Resets the target shim state
121 * @method _onMouseLeave
122 * @param {Event} e The MouseLeave Event
124 _onMouseLeave: function() {
125 Y.DD.DDM._noShim = this._shimState;
127 initializer: function() {
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);
134 conf.node = _tmpNode.cloneNode(true);
135 conf.bubbleTargets = this;
137 if (this.get('handles')) {
138 conf.handles = this.get('handles');
141 this.dd = new Y.DD.Drag(conf);
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() {
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)));
153 this._handles.push(Y.on('mouseenter', Y.bind(this._onMouseEnter, this), cont));
155 this._handles.push(Y.on('mouseleave', Y.bind(this._onMouseLeave, this), cont));
157 Y.later(50, this, this.syncTargets);
158 Y.DD.DDM.regDelegate(this);
161 * Applies the Y.Plugin.Drop to all nodes matching the cont + nodes selector query.
162 * @method syncTargets
166 syncTargets: function() {
167 if (!Y.Plugin.Drop || this.get('destroyed')) {
170 var items, groups, config;
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');
177 if (config && config.groups) {
178 groups = config.groups;
181 items.each(function(i) {
182 this.createDrop(i, groups);
188 * Apply the Drop plugin to this node
190 * @param {Node} node The Node to apply the plugin to
191 * @param {Array} groups The default groups to assign this target to.
194 createDrop: function(node, groups) {
201 node.plug(Y.Plugin.Drop, config);
203 node.drop.set('groups', groups);
206 destructor: function() {
211 var targets = Y.one(this.get(CONT)).all(this.get(NODES));
212 targets.unplug(Y.Plugin.Drop);
214 Y.Array.each(this._handles, function(v) {
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
230 * A selector query to get the children of the "container" to make draggable elements from.
235 value: '.dd-draggable'
238 * A selector query to test a node to see if it's an invalid item.
243 value: 'input, select, button, a, textarea'
246 * Y.Node instance of the last item dragged.
247 * @attribute lastNode
254 * Y.Node instance of the dd node.
255 * @attribute currentNode
262 * Y.Node instance of the dd dragNode.
263 * @attribute dragNode
270 * Is the mouse currently over the container
278 * Should the items also be a drop target.
286 * The default config to be used when creating the DD instance.
287 * @attribute dragConfig
294 * The handles config option added to the temp DD instance.
306 * Holder for all Y.DD.Delegate instances
309 * @property _delegates
314 * Register a Delegate with the DDM
316 * @method regDelegate
318 regDelegate: function(del) {
319 this._delegates.push(del);
322 * Get a delegate instance from a container node
324 * @method getDelegate
325 * @return Y.DD.Delegate
327 getDelegate: function(node) {
330 Y.Array.each(this._delegates, function(v) {
331 if (node.test(v.get(CONT))) {
340 Y.DD.Delegate = Delegate;
345 }, '3.13.0', {"requires": ["dd-drag", "dd-drop-plugin", "event-mouseenter"]});