3 Copyright 2012 Yahoo! Inc. All rights reserved.
4 Licensed under the BSD License.
5 http://yuilibrary.com/license/
7 YUI.add('dd-drop', function(Y) {
11 * Provides the ability to create a Drop Target.
16 * Provides the ability to create a Drop Target.
25 OFFSET_HEIGHT = 'offsetHeight',
26 OFFSET_WIDTH = 'offsetWidth',
29 * @description Fires when a drag element is over this target.
30 * @param {EventFacade} event An Event Facade object with the following specific property added:
32 * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
33 * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
38 EV_DROP_OVER = 'drop:over',
41 * @description Fires when a drag element enters this target.
42 * @param {EventFacade} event An Event Facade object with the following specific property added:
44 * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
45 * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
50 EV_DROP_ENTER = 'drop:enter',
53 * @description Fires when a drag element exits this target.
54 * @param {EventFacade} event An Event Facade object
58 EV_DROP_EXIT = 'drop:exit',
62 * @description Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
63 * @param {EventFacade} event An Event Facade object with the following specific property added:
65 * <dt>drop</dt><dd>The best guess on what was dropped on.</dd>
66 * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
67 * <dt>others</dt><dd>An array of all the other drop targets that was dropped on.</dd>
75 this._lazyAddAttrs = false;
76 Drop.superclass.constructor.apply(this, arguments);
80 Y.on('domready', Y.bind(function() {
81 Y.later(100, this, this._createShim);
86 if (Dom.getStyle(this.el, 'position') == 'fixed') {
87 Event.on(window, 'scroll', function() {
99 * @description Y.Node instanace to use as the element to make a Drop Target
103 setter: function(node) {
106 Y.error('DD.Drop: Invalid Node Given: ' + node);
113 * @description Array of groups to add this drop into.
123 Y.each(this._groups, function(v, k) {
128 setter: function(g) {
130 Y.each(g, function(v, k) {
131 this._groups[v] = true;
138 * @description CSS style padding to make the Drop Target bigger than the node.
143 setter: function(p) {
144 return DDM.cssSizestoObject(p);
149 * @description Set to lock this drop element.
154 setter: function(lock) {
156 this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked');
158 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked');
166 * @description Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling. Use bubbleTargets in config.
170 setter: function(t) {
178 * @description Use the Drop shim. Default: true
183 setter: function(v) {
184 Y.DD.DDM._noShim = !v;
190 Y.extend(Drop, Y.Base, {
193 * @property _bubbleTargets
194 * @description The default bubbleTarget for this object. Default: Y.DD.DDM
196 _bubbleTargets: Y.DD.DDM,
199 * @description Add this Drop instance to a group, this should be used for on-the-fly group additions.
200 * @param {String} g The group to add this Drop Instance to.
204 addToGroup: function(g) {
205 this._groups[g] = true;
209 * @method removeFromGroup
210 * @description Remove this Drop instance from a group, this should be used for on-the-fly group removals.
211 * @param {String} g The group to remove this Drop Instance from.
215 removeFromGroup: function(g) {
216 delete this._groups[g];
221 * @method _createEvents
222 * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
224 _createEvents: function() {
233 Y.each(ev, function(v, k) {
247 * @description Flag for determining if the target is valid in this operation.
254 * @description The groups this target belongs to.
260 * @description Node reference to the targets shim
266 * @description A region object associated with this target, used for checking regions while dragging.
271 * @property overTarget
272 * @description This flag is tripped when a drag element is over this target.
278 * @description Check if this target is in one of the supplied groups.
279 * @param {Array} groups The groups to check against
282 inGroup: function(groups) {
285 Y.each(groups, function(v, k) {
286 if (this._groups[v]) {
295 * @method initializer
296 * @description Private lifecycle method
298 initializer: function(cfg) {
299 Y.later(100, this, this._createEvents);
301 var node = this.get(NODE), id;
302 if (!node.get('id')) {
306 node.addClass(DDM.CSS_PREFIX + '-drop');
307 //Shouldn't have to do this..
308 this.set('groups', this.get('groups'));
313 * @description Lifecycle destructor, unreg the drag from the DDM and remove listeners
315 destructor: function() {
316 DDM._unregTarget(this);
317 if (this.shim && (this.shim !== this.get(NODE))) {
318 this.shim.detachAll();
322 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
327 * @method _deactivateShim
328 * @description Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
330 _deactivateShim: function() {
334 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
335 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
336 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
338 if (this.get('useShim')) {
339 this.shim.setStyles({
345 this.overTarget = false;
349 * @method _activateShim
350 * @description Activates the shim and adds some interaction CSS classes
352 _activateShim: function() {
353 if (!DDM.activeDrag) {
354 return false; //Nothing is dragging, no reason to activate.
356 if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
359 if (this.get('lock')) {
362 var node = this.get(NODE);
363 //TODO Visibility Check..
364 //if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {
365 if (this.inGroup(DDM.activeDrag.get('groups'))) {
366 node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
367 node.addClass(DDM.CSS_PREFIX + '-drop-active-valid');
369 this.overTarget = false;
370 if (!this.get('useShim')) {
371 this.shim = this.get(NODE);
375 DDM._removeValid(this);
376 node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
377 node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');
382 * @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..
384 sizeShim: function() {
385 if (!DDM.activeDrag) {
386 return false; //Nothing is dragging, no reason to activate.
388 if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
391 //if (this.get('lock') || !this.get('useShim')) {
392 if (this.get('lock')) {
396 Y.later(100, this, this.sizeShim);
399 var node = this.get(NODE),
400 nh = node.get(OFFSET_HEIGHT),
401 nw = node.get(OFFSET_WIDTH),
403 p = this.get('padding'),
408 nw = nw + p.left + p.right;
409 nh = nh + p.top + p.bottom;
410 xy[0] = xy[0] - p.left;
411 xy[1] = xy[1] - p.top;
414 if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) {
415 //Intersect Mode, make the shim bigger
417 dH = dd.get(NODE).get(OFFSET_HEIGHT);
418 dW = dd.get(NODE).get(OFFSET_WIDTH);
422 xy[0] = xy[0] - (dW - dd.deltaXY[0]);
423 xy[1] = xy[1] - (dH - dd.deltaXY[1]);
427 if (this.get('useShim')) {
428 //Set the style on the shim
429 this.shim.setStyles({
437 //Create the region to be used by intersect when a drag node is over us.
450 * @method _createShim
451 * @description Creates the Target shim and adds it to the DDM's playground..
453 _createShim: function() {
454 //No playground, defer
456 Y.later(10, this, this._createShim);
459 //Shim already here, cancel
463 var s = this.get('node');
465 if (this.get('useShim')) {
466 s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>');
468 height: this.get(NODE).get(OFFSET_HEIGHT) + 'px',
469 width: this.get(NODE).get(OFFSET_WIDTH) + 'px',
470 backgroundColor: 'yellow',
479 DDM._pg.appendChild(s);
481 s.on('mouseover', Y.bind(this._handleOverEvent, this));
482 s.on('mouseout', Y.bind(this._handleOutEvent, this));
490 * @method _handleOverTarget
491 * @description This handles the over target call made from this object or from the DDM
493 _handleTargetOver: function() {
494 if (DDM.isOverTarget(this)) {
495 this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over');
496 DDM.activeDrop = this;
497 DDM.otherDrops[this] = this;
498 if (this.overTarget) {
499 DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag });
500 this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag });
502 //Prevent an enter before a start..
503 if (DDM.activeDrag.get('dragging')) {
504 this.overTarget = true;
505 this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag });
506 DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag });
507 DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over');
508 //TODO - Is this needed??
509 //DDM._handleTargetOver();
518 * @method _handleOverEvent
519 * @description Handles the mouseover DOM event on the Target Shim
521 _handleOverEvent: function() {
522 this.shim.setStyle('zIndex', '999');
523 DDM._addActiveShim(this);
527 * @method _handleOutEvent
528 * @description Handles the mouseout DOM event on the Target Shim
530 _handleOutEvent: function() {
531 this.shim.setStyle('zIndex', '1');
532 DDM._removeActiveShim(this);
537 * @description Handles out of target calls/checks
539 _handleOut: function(force) {
540 if (!DDM.isOverTarget(this) || force) {
541 if (this.overTarget) {
542 this.overTarget = false;
544 DDM._removeActiveShim(this);
546 if (DDM.activeDrag) {
547 this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
548 DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over');
549 this.fire(EV_DROP_EXIT, { drop: this, drag: DDM.activeDrag });
550 DDM.activeDrag.fire('drag:exit', { drop: this, drag: DDM.activeDrag });
551 delete DDM.otherDrops[this];
563 }, '3.5.0' ,{skinnable:false, requires:['dd-ddm-drop', 'dd-drag']});