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