|
0
|
1 |
/* |
|
|
2 |
Copyright (c) 2009, Yahoo! Inc. All rights reserved. |
|
|
3 |
Code licensed under the BSD License: |
|
|
4 |
http://developer.yahoo.net/yui/license.txt |
|
|
5 |
version: 3.0.0b1 |
|
|
6 |
build: 1163 |
|
|
7 |
*/ |
|
|
8 |
YUI.add('dd-drop', function(Y) { |
|
|
9 |
|
|
|
10 |
|
|
|
11 |
/** |
|
|
12 |
* The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic. |
|
|
13 |
* @module dd |
|
|
14 |
* @submodule dd-drop |
|
|
15 |
*/ |
|
|
16 |
/** |
|
|
17 |
* This class provides the ability to create a Drop Target. |
|
|
18 |
* @class Drop |
|
|
19 |
* @extends Base |
|
|
20 |
* @constructor |
|
|
21 |
* @namespace DD |
|
|
22 |
*/ |
|
|
23 |
|
|
|
24 |
var NODE = 'node', |
|
|
25 |
DDM = Y.DD.DDM, |
|
|
26 |
OFFSET_HEIGHT = 'offsetHeight', |
|
|
27 |
OFFSET_WIDTH = 'offsetWidth', |
|
|
28 |
/** |
|
|
29 |
* @event drop:over |
|
|
30 |
* @description Fires when a drag element is over this target. |
|
|
31 |
* @bubbles DDM |
|
|
32 |
* @type {Event.Custom} |
|
|
33 |
*/ |
|
|
34 |
EV_DROP_OVER = 'drop:over', |
|
|
35 |
/** |
|
|
36 |
* @event drop:enter |
|
|
37 |
* @description Fires when a drag element enters this target. |
|
|
38 |
* @bubbles DDM |
|
|
39 |
* @type {Event.Custom} |
|
|
40 |
*/ |
|
|
41 |
EV_DROP_ENTER = 'drop:enter', |
|
|
42 |
/** |
|
|
43 |
* @event drop:exit |
|
|
44 |
* @description Fires when a drag element exits this target. |
|
|
45 |
* @bubbles DDM |
|
|
46 |
* @type {Event.Custom} |
|
|
47 |
*/ |
|
|
48 |
EV_DROP_EXIT = 'drop:exit', |
|
|
49 |
|
|
|
50 |
/** |
|
|
51 |
* @event drop:hit |
|
|
52 |
* @description Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop) |
|
|
53 |
* @bubbles DDM |
|
|
54 |
* @type {Event.Custom} |
|
|
55 |
*/ |
|
|
56 |
|
|
|
57 |
|
|
|
58 |
Drop = function() { |
|
|
59 |
this._lazyAddAttrs = false; |
|
|
60 |
Drop.superclass.constructor.apply(this, arguments); |
|
|
61 |
|
|
|
62 |
|
|
|
63 |
//DD init speed up. |
|
|
64 |
Y.on('domready', Y.bind(function() { |
|
|
65 |
Y.later(100, this, this._createShim); |
|
|
66 |
}, this)); |
|
|
67 |
DDM._regTarget(this); |
|
|
68 |
|
|
|
69 |
/* TODO |
|
|
70 |
if (Dom.getStyle(this.el, 'position') == 'fixed') { |
|
|
71 |
Event.on(window, 'scroll', function() { |
|
|
72 |
this.activateShim(); |
|
|
73 |
}, this, true); |
|
|
74 |
} |
|
|
75 |
*/ |
|
|
76 |
}; |
|
|
77 |
|
|
|
78 |
Drop.NAME = 'drop'; |
|
|
79 |
|
|
|
80 |
Drop.ATTRS = { |
|
|
81 |
/** |
|
|
82 |
* @attribute node |
|
|
83 |
* @description Y.Node instanace to use as the element to make a Drop Target |
|
|
84 |
* @type Node |
|
|
85 |
*/ |
|
|
86 |
node: { |
|
|
87 |
setter: function(node) { |
|
|
88 |
var n = Y.Node.get(node); |
|
|
89 |
if (!n) { |
|
|
90 |
Y.error('DD.Drop: Invalid Node Given: ' + node); |
|
|
91 |
} |
|
|
92 |
return n; |
|
|
93 |
} |
|
|
94 |
}, |
|
|
95 |
/** |
|
|
96 |
* @attribute groups |
|
|
97 |
* @description Array of groups to add this drop into. |
|
|
98 |
* @type Array |
|
|
99 |
*/ |
|
|
100 |
groups: { |
|
|
101 |
value: ['default'], |
|
|
102 |
setter: function(g) { |
|
|
103 |
this._groups = {}; |
|
|
104 |
Y.each(g, function(v, k) { |
|
|
105 |
this._groups[v] = true; |
|
|
106 |
}, this); |
|
|
107 |
return g; |
|
|
108 |
} |
|
|
109 |
}, |
|
|
110 |
/** |
|
|
111 |
* @attribute padding |
|
|
112 |
* @description CSS style padding to make the Drop Target bigger than the node. |
|
|
113 |
* @type String |
|
|
114 |
*/ |
|
|
115 |
padding: { |
|
|
116 |
value: '0', |
|
|
117 |
setter: function(p) { |
|
|
118 |
return DDM.cssSizestoObject(p); |
|
|
119 |
} |
|
|
120 |
}, |
|
|
121 |
/** |
|
|
122 |
* @attribute lock |
|
|
123 |
* @description Set to lock this drop element. |
|
|
124 |
* @type Boolean |
|
|
125 |
*/ |
|
|
126 |
lock: { |
|
|
127 |
value: false, |
|
|
128 |
setter: function(lock) { |
|
|
129 |
if (lock) { |
|
|
130 |
this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked'); |
|
|
131 |
} else { |
|
|
132 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked'); |
|
|
133 |
} |
|
|
134 |
return lock; |
|
|
135 |
} |
|
|
136 |
}, |
|
|
137 |
/** |
|
|
138 |
* @attribute bubbles |
|
|
139 |
* @description Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling. |
|
|
140 |
* @type Object |
|
|
141 |
*/ |
|
|
142 |
bubbles: { |
|
|
143 |
writeOnce: true, |
|
|
144 |
value: Y.DD.DDM |
|
|
145 |
} |
|
|
146 |
}; |
|
|
147 |
|
|
|
148 |
Y.extend(Drop, Y.Base, { |
|
|
149 |
/** |
|
|
150 |
* @private |
|
|
151 |
* @method _createEvents |
|
|
152 |
* @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling. |
|
|
153 |
*/ |
|
|
154 |
_createEvents: function() { |
|
|
155 |
|
|
|
156 |
var ev = [ |
|
|
157 |
EV_DROP_OVER, |
|
|
158 |
EV_DROP_ENTER, |
|
|
159 |
EV_DROP_EXIT, |
|
|
160 |
'drop:hit' |
|
|
161 |
]; |
|
|
162 |
|
|
|
163 |
Y.each(ev, function(v, k) { |
|
|
164 |
this.publish(v, { |
|
|
165 |
type: v, |
|
|
166 |
emitFacade: true, |
|
|
167 |
preventable: false, |
|
|
168 |
bubbles: true, |
|
|
169 |
queuable: false, |
|
|
170 |
prefix: 'drop' |
|
|
171 |
}); |
|
|
172 |
}, this); |
|
|
173 |
|
|
|
174 |
if (this.get('bubbles')) { |
|
|
175 |
this.addTarget(this.get('bubbles')); |
|
|
176 |
} |
|
|
177 |
|
|
|
178 |
}, |
|
|
179 |
/** |
|
|
180 |
* @private |
|
|
181 |
* @property _valid |
|
|
182 |
* @description Flag for determining if the target is valid in this operation. |
|
|
183 |
* @type Boolean |
|
|
184 |
*/ |
|
|
185 |
_valid: null, |
|
|
186 |
/** |
|
|
187 |
* @private |
|
|
188 |
* @property _groups |
|
|
189 |
* @description The groups this target belongs to. |
|
|
190 |
* @type Array |
|
|
191 |
*/ |
|
|
192 |
_groups: null, |
|
|
193 |
/** |
|
|
194 |
* @property shim |
|
|
195 |
* @description Node reference to the targets shim |
|
|
196 |
* @type {Object} |
|
|
197 |
*/ |
|
|
198 |
shim: null, |
|
|
199 |
/** |
|
|
200 |
* @property region |
|
|
201 |
* @description A region object associated with this target, used for checking regions while dragging. |
|
|
202 |
* @type Object |
|
|
203 |
*/ |
|
|
204 |
region: null, |
|
|
205 |
/** |
|
|
206 |
* @property overTarget |
|
|
207 |
* @description This flag is tripped when a drag element is over this target. |
|
|
208 |
* @type Boolean |
|
|
209 |
*/ |
|
|
210 |
overTarget: null, |
|
|
211 |
/** |
|
|
212 |
* @method inGroup |
|
|
213 |
* @description Check if this target is in one of the supplied groups. |
|
|
214 |
* @param {Array} groups The groups to check against |
|
|
215 |
* @return Boolean |
|
|
216 |
*/ |
|
|
217 |
inGroup: function(groups) { |
|
|
218 |
this._valid = false; |
|
|
219 |
var ret = false; |
|
|
220 |
Y.each(groups, function(v, k) { |
|
|
221 |
if (this._groups[v]) { |
|
|
222 |
ret = true; |
|
|
223 |
this._valid = true; |
|
|
224 |
} |
|
|
225 |
}, this); |
|
|
226 |
return ret; |
|
|
227 |
}, |
|
|
228 |
/** |
|
|
229 |
* @private |
|
|
230 |
* @method initializer |
|
|
231 |
* @description Private lifecycle method |
|
|
232 |
*/ |
|
|
233 |
initializer: function() { |
|
|
234 |
//this._createEvents(); |
|
|
235 |
Y.later(100, this, this._createEvents); |
|
|
236 |
|
|
|
237 |
var node = this.get(NODE), id; |
|
|
238 |
if (!node.get('id')) { |
|
|
239 |
id = Y.stamp(node); |
|
|
240 |
node.set('id', id); |
|
|
241 |
} |
|
|
242 |
node.addClass(DDM.CSS_PREFIX + '-drop'); |
|
|
243 |
//Shouldn't have to do this.. |
|
|
244 |
this.set('groups', this.get('groups')); |
|
|
245 |
}, |
|
|
246 |
/** |
|
|
247 |
* @private |
|
|
248 |
* @method destructor |
|
|
249 |
* @description Lifecycle destructor, unreg the drag from the DDM and remove listeners |
|
|
250 |
*/ |
|
|
251 |
destructor: function() { |
|
|
252 |
DDM._unregTarget(this); |
|
|
253 |
if (this.shim) { |
|
|
254 |
this.shim.detachAll(); |
|
|
255 |
this.shim.get('parentNode').removeChild(this.shim); |
|
|
256 |
this.shim = null; |
|
|
257 |
} |
|
|
258 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop'); |
|
|
259 |
this.detachAll(); |
|
|
260 |
}, |
|
|
261 |
/** |
|
|
262 |
* @private |
|
|
263 |
* @method _deactivateShim |
|
|
264 |
* @description Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999] |
|
|
265 |
*/ |
|
|
266 |
_deactivateShim: function() { |
|
|
267 |
if (!this.shim) { |
|
|
268 |
return false; |
|
|
269 |
} |
|
|
270 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid'); |
|
|
271 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid'); |
|
|
272 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over'); |
|
|
273 |
this.shim.setStyles({ |
|
|
274 |
top: '-999px', |
|
|
275 |
left: '-999px', |
|
|
276 |
zIndex: '2' |
|
|
277 |
}); |
|
|
278 |
this.overTarget = false; |
|
|
279 |
}, |
|
|
280 |
/** |
|
|
281 |
* @private |
|
|
282 |
* @method _activateShim |
|
|
283 |
* @description Activates the shim and adds some interaction CSS classes |
|
|
284 |
*/ |
|
|
285 |
_activateShim: function() { |
|
|
286 |
if (!DDM.activeDrag) { |
|
|
287 |
return false; //Nothing is dragging, no reason to activate. |
|
|
288 |
} |
|
|
289 |
if (this.get(NODE) === DDM.activeDrag.get(NODE)) { |
|
|
290 |
return false; |
|
|
291 |
} |
|
|
292 |
if (this.get('lock')) { |
|
|
293 |
return false; |
|
|
294 |
} |
|
|
295 |
var node = this.get(NODE); |
|
|
296 |
//TODO Visibility Check.. |
|
|
297 |
//if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) { |
|
|
298 |
if (this.inGroup(DDM.activeDrag.get('groups'))) { |
|
|
299 |
node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid'); |
|
|
300 |
node.addClass(DDM.CSS_PREFIX + '-drop-active-valid'); |
|
|
301 |
DDM._addValid(this); |
|
|
302 |
this.overTarget = false; |
|
|
303 |
this.sizeShim(); |
|
|
304 |
} else { |
|
|
305 |
DDM._removeValid(this); |
|
|
306 |
node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid'); |
|
|
307 |
node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid'); |
|
|
308 |
} |
|
|
309 |
}, |
|
|
310 |
/** |
|
|
311 |
* @method sizeShim |
|
|
312 |
* @description Positions and sizes the shim with the raw data from the node, this can be used to programatically adjust the Targets shim for Animation.. |
|
|
313 |
*/ |
|
|
314 |
sizeShim: function() { |
|
|
315 |
if (!DDM.activeDrag) { |
|
|
316 |
return false; //Nothing is dragging, no reason to activate. |
|
|
317 |
} |
|
|
318 |
if (this.get(NODE) === DDM.activeDrag.get(NODE)) { |
|
|
319 |
return false; |
|
|
320 |
} |
|
|
321 |
if (this.get('lock')) { |
|
|
322 |
return false; |
|
|
323 |
} |
|
|
324 |
if (!this.shim) { |
|
|
325 |
Y.later(100, this, this.sizeShim); |
|
|
326 |
return false; |
|
|
327 |
} |
|
|
328 |
var node = this.get(NODE), |
|
|
329 |
nh = node.get(OFFSET_HEIGHT), |
|
|
330 |
nw = node.get(OFFSET_WIDTH), |
|
|
331 |
xy = node.getXY(), |
|
|
332 |
p = this.get('padding'), |
|
|
333 |
dd, dH, dW; |
|
|
334 |
|
|
|
335 |
|
|
|
336 |
//Apply padding |
|
|
337 |
nw = nw + p.left + p.right; |
|
|
338 |
nh = nh + p.top + p.bottom; |
|
|
339 |
xy[0] = xy[0] - p.left; |
|
|
340 |
xy[1] = xy[1] - p.top; |
|
|
341 |
|
|
|
342 |
|
|
|
343 |
if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) { |
|
|
344 |
//Intersect Mode, make the shim bigger |
|
|
345 |
dd = DDM.activeDrag; |
|
|
346 |
dH = dd.get(NODE).get(OFFSET_HEIGHT); |
|
|
347 |
dW = dd.get(NODE).get(OFFSET_WIDTH); |
|
|
348 |
|
|
|
349 |
nh = (nh + dH); |
|
|
350 |
nw = (nw + dW); |
|
|
351 |
xy[0] = xy[0] - (dW - dd.deltaXY[0]); |
|
|
352 |
xy[1] = xy[1] - (dH - dd.deltaXY[1]); |
|
|
353 |
|
|
|
354 |
} |
|
|
355 |
|
|
|
356 |
//Set the style on the shim |
|
|
357 |
this.shim.setStyles({ |
|
|
358 |
height: nh + 'px', |
|
|
359 |
width: nw + 'px', |
|
|
360 |
top: xy[1] + 'px', |
|
|
361 |
left: xy[0] + 'px' |
|
|
362 |
}); |
|
|
363 |
|
|
|
364 |
//Create the region to be used by intersect when a drag node is over us. |
|
|
365 |
this.region = { |
|
|
366 |
'0': xy[0], |
|
|
367 |
'1': xy[1], |
|
|
368 |
area: 0, |
|
|
369 |
top: xy[1], |
|
|
370 |
right: xy[0] + nw, |
|
|
371 |
bottom: xy[1] + nh, |
|
|
372 |
left: xy[0] |
|
|
373 |
}; |
|
|
374 |
}, |
|
|
375 |
/** |
|
|
376 |
* @private |
|
|
377 |
* @method _createShim |
|
|
378 |
* @description Creates the Target shim and adds it to the DDM's playground.. |
|
|
379 |
*/ |
|
|
380 |
_createShim: function() { |
|
|
381 |
//No playground, defer |
|
|
382 |
if (!DDM._pg) { |
|
|
383 |
Y.later(10, this, this._createShim); |
|
|
384 |
return; |
|
|
385 |
} |
|
|
386 |
//Shim already here, cancel |
|
|
387 |
if (this.shim) { |
|
|
388 |
return; |
|
|
389 |
} |
|
|
390 |
var s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>'); |
|
|
391 |
|
|
|
392 |
s.setStyles({ |
|
|
393 |
height: this.get(NODE).get(OFFSET_HEIGHT) + 'px', |
|
|
394 |
width: this.get(NODE).get(OFFSET_WIDTH) + 'px', |
|
|
395 |
backgroundColor: 'yellow', |
|
|
396 |
opacity: '.5', |
|
|
397 |
zIndex: '1', |
|
|
398 |
overflow: 'hidden', |
|
|
399 |
top: '-900px', |
|
|
400 |
left: '-900px', |
|
|
401 |
position: 'absolute' |
|
|
402 |
}); |
|
|
403 |
DDM._pg.appendChild(s); |
|
|
404 |
this.shim = s; |
|
|
405 |
|
|
|
406 |
s.on('mouseover', Y.bind(this._handleOverEvent, this)); |
|
|
407 |
s.on('mouseout', Y.bind(this._handleOutEvent, this)); |
|
|
408 |
}, |
|
|
409 |
/** |
|
|
410 |
* @private |
|
|
411 |
* @method _handleOverTarget |
|
|
412 |
* @description This handles the over target call made from this object or from the DDM |
|
|
413 |
*/ |
|
|
414 |
_handleTargetOver: function() { |
|
|
415 |
if (DDM.isOverTarget(this)) { |
|
|
416 |
this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over'); |
|
|
417 |
DDM.activeDrop = this; |
|
|
418 |
DDM.otherDrops[this] = this; |
|
|
419 |
if (this.overTarget) { |
|
|
420 |
DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag }); |
|
|
421 |
this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag }); |
|
|
422 |
} else { |
|
|
423 |
this.overTarget = true; |
|
|
424 |
this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag }); |
|
|
425 |
DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag }); |
|
|
426 |
DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over'); |
|
|
427 |
//TODO - Is this needed?? |
|
|
428 |
//DDM._handleTargetOver(); |
|
|
429 |
} |
|
|
430 |
} else { |
|
|
431 |
this._handleOut(); |
|
|
432 |
} |
|
|
433 |
}, |
|
|
434 |
/** |
|
|
435 |
* @private |
|
|
436 |
* @method _handleOverEvent |
|
|
437 |
* @description Handles the mouseover DOM event on the Target Shim |
|
|
438 |
*/ |
|
|
439 |
_handleOverEvent: function() { |
|
|
440 |
this.shim.setStyle('zIndex', '999'); |
|
|
441 |
DDM._addActiveShim(this); |
|
|
442 |
}, |
|
|
443 |
/** |
|
|
444 |
* @private |
|
|
445 |
* @method _handleOutEvent |
|
|
446 |
* @description Handles the mouseout DOM event on the Target Shim |
|
|
447 |
*/ |
|
|
448 |
_handleOutEvent: function() { |
|
|
449 |
this.shim.setStyle('zIndex', '1'); |
|
|
450 |
DDM._removeActiveShim(this); |
|
|
451 |
}, |
|
|
452 |
/** |
|
|
453 |
* @private |
|
|
454 |
* @method _handleOut |
|
|
455 |
* @description Handles out of target calls/checks |
|
|
456 |
*/ |
|
|
457 |
_handleOut: function(force) { |
|
|
458 |
if (!DDM.isOverTarget(this) || force) { |
|
|
459 |
if (this.overTarget) { |
|
|
460 |
this.overTarget = false; |
|
|
461 |
if (!force) { |
|
|
462 |
DDM._removeActiveShim(this); |
|
|
463 |
} |
|
|
464 |
if (DDM.activeDrag) { |
|
|
465 |
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over'); |
|
|
466 |
DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over'); |
|
|
467 |
this.fire(EV_DROP_EXIT); |
|
|
468 |
DDM.activeDrag.fire('drag:exit', { drop: this }); |
|
|
469 |
delete DDM.otherDrops[this]; |
|
|
470 |
//if (DDM.activeDrop === this) { |
|
|
471 |
// DDM.activeDrop = null; |
|
|
472 |
//} |
|
|
473 |
} |
|
|
474 |
} |
|
|
475 |
} |
|
|
476 |
} |
|
|
477 |
}); |
|
|
478 |
|
|
|
479 |
Y.DD.Drop = Drop; |
|
|
480 |
|
|
|
481 |
|
|
|
482 |
|
|
|
483 |
|
|
|
484 |
|
|
|
485 |
}, '3.0.0b1' ,{requires:['dd-ddm-drop', 'dd-drag'], skinnable:false}); |