Version 3.18.1
Show:

File: dd/js/drop.js

            
                /**
                 * Provides the ability to create a Drop Target.
                 * @module dd
                 * @submodule dd-drop
                 */
                /**
                 * Provides the ability to create a Drop Target.
                 * @class Drop
                 * @extends Base
                 * @constructor
                 * @namespace DD
                 */
            
                var NODE = 'node',
                    DDM = Y.DD.DDM,
                    OFFSET_HEIGHT = 'offsetHeight',
                    OFFSET_WIDTH = 'offsetWidth',
                    /**
                    * Fires when a drag element is over this target.
                    * @event drop:over
                    * @param {EventFacade} event An Event Facade object with the following specific property added:
                    * <dl>
                    * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
                    * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
                    * </dl>
                    * @bubbles DDM
                    * @type {CustomEvent}
                    */
                    EV_DROP_OVER = 'drop:over',
                    /**
                    * Fires when a drag element enters this target.
                    * @event drop:enter
                    * @param {EventFacade} event An Event Facade object with the following specific property added:
                    * <dl>
                    * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
                    * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
                    * </dl>
                    * @bubbles DDM
                    * @type {CustomEvent}
                    */
                    EV_DROP_ENTER = 'drop:enter',
                    /**
                    * Fires when a drag element exits this target.
                    * @event drop:exit
                    * @param {EventFacade} event An Event Facade object
                    * @bubbles DDM
                    * @type {CustomEvent}
                    */
                    EV_DROP_EXIT = 'drop:exit',
            
                    /**
                    * Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
                    * @event drop:hit
                    * @param {EventFacade} event An Event Facade object with the following specific property added:
                    * <dl>
                    * <dt>drop</dt><dd>The best guess on what was dropped on.</dd>
                    * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
                    * <dt>others</dt><dd>An array of all the other drop targets that was dropped on.</dd>
                    * </dl>
                    * @bubbles DDM
                    * @type {CustomEvent}
                    */
            
            
                Drop = function() {
                    this._lazyAddAttrs = false;
                    Drop.superclass.constructor.apply(this, arguments);
            
            
                    //DD init speed up.
                    Y.on('domready', Y.bind(function() {
                        Y.later(100, this, this._createShim);
                    }, this));
                    DDM._regTarget(this);
            
                    /* TODO
                    if (Dom.getStyle(this.el, 'position') == 'fixed') {
                        Event.on(window, 'scroll', function() {
                            this.activateShim();
                        }, this, true);
                    }
                    */
                };
            
                Drop.NAME = 'drop';
            
                Drop.ATTRS = {
                    /**
                    * Y.Node instance to use as the element to make a Drop Target
                    * @attribute node
                    * @type Node
                    */
                    node: {
                        setter: function(node) {
                            var n = Y.one(node);
                            if (!n) {
                                Y.error('DD.Drop: Invalid Node Given: ' + node);
                            }
                            return n;
                        }
                    },
                    /**
                    * Array of groups to add this drop into.
                    * @attribute groups
                    * @type Array
                    */
                    groups: {
                        value: ['default'],
                        getter: function() {
                            if (!this._groups) {
                                this._groups = {};
                                return [];
                            }
            
                            return Y.Object.keys(this._groups);
                        },
                        setter: function(g) {
                            this._groups = Y.Array.hash(g);
                            return g;
                        }
                    },
                    /**
                    * CSS style padding to make the Drop Target bigger than the node.
                    * @attribute padding
                    * @type String
                    */
                    padding: {
                        value: '0',
                        setter: function(p) {
                            return DDM.cssSizestoObject(p);
                        }
                    },
                    /**
                    * Set to lock this drop element.
                    * @attribute lock
                    * @type Boolean
                    */
                    lock: {
                        value: false,
                        setter: function(lock) {
                            if (lock) {
                                this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked');
                            } else {
                                this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked');
                            }
                            return lock;
                        }
                    },
                    /**
                    * Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling.
                    * Use bubbleTargets in config.
                    * @deprecated
                    * @attribute bubbles
                    * @type Object
                    */
                    bubbles: {
                        setter: function(t) {
                            Y.log('bubbles is deprecated use bubbleTargets: HOST', 'warn', 'dd');
                            this.addTarget(t);
                            return t;
                        }
                    },
                    /**
                    * Use the Drop shim. Default: true
                    * @deprecated
                    * @attribute useShim
                    * @type Boolean
                    */
                    useShim: {
                        value: true,
                        setter: function(v) {
                            Y.DD.DDM._noShim = !v;
                            return v;
                        }
                    }
                };
            
                Y.extend(Drop, Y.Base, {
                    /**
                    * The default bubbleTarget for this object. Default: Y.DD.DDM
                    * @private
                    * @property _bubbleTargets
                    */
                    _bubbleTargets: Y.DD.DDM,
                    /**
                    * Add this Drop instance to a group, this should be used for on-the-fly group additions.
                    * @method addToGroup
                    * @param {String} g The group to add this Drop Instance to.
                    * @chainable
                    */
                    addToGroup: function(g) {
                        this._groups[g] = true;
                        return this;
                    },
                    /**
                    * Remove this Drop instance from a group, this should be used for on-the-fly group removals.
                    * @method removeFromGroup
                    * @param {String} g The group to remove this Drop Instance from.
                    * @chainable
                    */
                    removeFromGroup: function(g) {
                        delete this._groups[g];
                        return this;
                    },
                    /**
                    * This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
                    * @private
                    * @method _createEvents
                    */
                    _createEvents: function() {
            
                        var ev = [
                            EV_DROP_OVER,
                            EV_DROP_ENTER,
                            EV_DROP_EXIT,
                            'drop:hit'
                        ];
            
                        Y.Array.each(ev, function(v) {
                            this.publish(v, {
                                type: v,
                                emitFacade: true,
                                preventable: false,
                                bubbles: true,
                                queuable: false,
                                prefix: 'drop'
                            });
                        }, this);
                    },
                    /**
                    * Flag for determining if the target is valid in this operation.
                    * @private
                    * @property _valid
                    * @type Boolean
                    */
                    _valid: null,
                    /**
                    * The groups this target belongs to.
                    * @private
                    * @property _groups
                    * @type Array
                    */
                    _groups: null,
                    /**
                    * Node reference to the targets shim
                    * @property shim
                    * @type {Object}
                    */
                    shim: null,
                    /**
                    * A region object associated with this target, used for checking regions while dragging.
                    * @property region
                    * @type Object
                    */
                    region: null,
                    /**
                    * This flag is tripped when a drag element is over this target.
                    * @property overTarget
                    * @type Boolean
                    */
                    overTarget: null,
                    /**
                    * Check if this target is in one of the supplied groups.
                    * @method inGroup
                    * @param {Array} groups The groups to check against
                    * @return Boolean
                    */
                    inGroup: function(groups) {
                        this._valid = false;
                        var ret = false;
                        Y.Array.each(groups, function(v) {
                            if (this._groups[v]) {
                                ret = true;
                                this._valid = true;
                            }
                        }, this);
                        return ret;
                    },
                    /**
                    * Private lifecycle method
                    * @private
                    * @method initializer
                    */
                    initializer: function() {
                        Y.later(100, this, this._createEvents);
            
                        var node = this.get(NODE), id;
                        if (!node.get('id')) {
                            id = Y.stamp(node);
                            node.set('id', id);
                        }
                        node.addClass(DDM.CSS_PREFIX + '-drop');
                        //Shouldn't have to do this..
                        this.set('groups', this.get('groups'));
                    },
                    /**
                    * Lifecycle destructor, unreg the drag from the DDM and remove listeners
                    * @private
                    * @method destructor
                    */
                    destructor: function() {
                        DDM._unregTarget(this);
                        if (this.shim && (this.shim !== this.get(NODE))) {
                            this.shim.detachAll();
                            this.shim.remove();
                            this.shim = null;
                        }
                        this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
                        this.detachAll();
                    },
                    /**
                    * Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
                    * @private
                    * @method _deactivateShim
                    */
                    _deactivateShim: function() {
                        if (!this.shim) {
                            return false;
                        }
                        this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
                        this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
                        this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
            
                        if (this.get('useShim')) {
                            this.shim.setStyles({
                                top: '-999px',
                                left: '-999px',
                                zIndex: '1'
                            });
                        }
                        this.overTarget = false;
                    },
                    /**
                    * Activates the shim and adds some interaction CSS classes
                    * @private
                    * @method _activateShim
                    */
                    _activateShim: function() {
                        if (!DDM.activeDrag) {
                            return false; //Nothing is dragging, no reason to activate.
                        }
                        if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
                            return false;
                        }
                        if (this.get('lock')) {
                            return false;
                        }
                        var node = this.get(NODE);
                        //TODO Visibility Check..
                        //if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {
                        if (this.inGroup(DDM.activeDrag.get('groups'))) {
                            node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
                            node.addClass(DDM.CSS_PREFIX + '-drop-active-valid');
                            DDM._addValid(this);
                            this.overTarget = false;
                            if (!this.get('useShim')) {
                                this.shim = this.get(NODE);
                            }
                            this.sizeShim();
                        } else {
                            DDM._removeValid(this);
                            node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
                            node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');
                        }
                    },
                    /**
                    * Positions and sizes the shim with the raw data from the node,
                    * this can be used to programatically adjust the Targets shim for Animation..
                    * @method sizeShim
                    */
                    sizeShim: function() {
                        if (!DDM.activeDrag) {
                            return false; //Nothing is dragging, no reason to activate.
                        }
                        if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
                            return false;
                        }
                        //if (this.get('lock') || !this.get('useShim')) {
                        if (this.get('lock')) {
                            return false;
                        }
                        if (!this.shim) {
                            Y.later(100, this, this.sizeShim);
                            return false;
                        }
                        var node = this.get(NODE),
                            nh = node.get(OFFSET_HEIGHT),
                            nw = node.get(OFFSET_WIDTH),
                            xy = node.getXY(),
                            p = this.get('padding'),
                            dd, dH, dW;
            
            
                        //Apply padding
                        nw = nw + p.left + p.right;
                        nh = nh + p.top + p.bottom;
                        xy[0] = xy[0] - p.left;
                        xy[1] = xy[1] - p.top;
            
            
                        if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) {
                            //Intersect Mode, make the shim bigger
                            dd = DDM.activeDrag;
                            dH = dd.get(NODE).get(OFFSET_HEIGHT);
                            dW = dd.get(NODE).get(OFFSET_WIDTH);
            
                            nh = (nh + dH);
                            nw = (nw + dW);
                            xy[0] = xy[0] - (dW - dd.deltaXY[0]);
                            xy[1] = xy[1] - (dH - dd.deltaXY[1]);
            
                        }
            
                        if (this.get('useShim')) {
                            //Set the style on the shim
                            this.shim.setStyles({
                                height: nh + 'px',
                                width: nw + 'px',
                                top: xy[1] + 'px',
                                left: xy[0] + 'px'
                            });
                        }
            
                        //Create the region to be used by intersect when a drag node is over us.
                        this.region = {
                            '0': xy[0],
                            '1': xy[1],
                            area: 0,
                            top: xy[1],
                            right: xy[0] + nw,
                            bottom: xy[1] + nh,
                            left: xy[0]
                        };
                    },
                    /**
                    * Creates the Target shim and adds it to the DDM's playground..
                    * @private
                    * @method _createShim
                    */
                    _createShim: function() {
                        //No playground, defer
                        if (!DDM._pg) {
                            Y.later(10, this, this._createShim);
                            return;
                        }
                        //Shim already here, cancel
                        if (this.shim) {
                            return;
                        }
                        var s = this.get('node');
            
                        if (this.get('useShim')) {
                            s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>');
                            s.setStyles({
                                height: this.get(NODE).get(OFFSET_HEIGHT) + 'px',
                                width: this.get(NODE).get(OFFSET_WIDTH) + 'px',
                                backgroundColor: 'yellow',
                                opacity: '.5',
                                zIndex: '1',
                                overflow: 'hidden',
                                top: '-900px',
                                left: '-900px',
                                position:  'absolute'
                            });
            
                            DDM._pg.appendChild(s);
            
                            s.on('mouseover', Y.bind(this._handleOverEvent, this));
                            s.on('mouseout', Y.bind(this._handleOutEvent, this));
                        }
            
            
                        this.shim = s;
                    },
                    /**
                    * This handles the over target call made from this object or from the DDM
                    * @private
                    * @method _handleOverTarget
                    */
                    _handleTargetOver: function() {
                        if (DDM.isOverTarget(this)) {
                            this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over');
                            DDM.activeDrop = this;
                            DDM.otherDrops[this] = this;
                            if (this.overTarget) {
                                DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag });
                                this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag });
                            } else {
                                //Prevent an enter before a start..
                                if (DDM.activeDrag.get('dragging')) {
                                    this.overTarget = true;
                                    this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag });
                                    DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag });
                                    DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over');
                                    //TODO - Is this needed??
                                    //DDM._handleTargetOver();
                                }
                            }
                        } else {
                            this._handleOut();
                        }
                    },
                    /**
                    * Handles the mouseover DOM event on the Target Shim
                    * @private
                    * @method _handleOverEvent
                    */
                    _handleOverEvent: function() {
                        this.shim.setStyle('zIndex', '999');
                        DDM._addActiveShim(this);
                    },
                    /**
                    * Handles the mouseout DOM event on the Target Shim
                    * @private
                    * @method _handleOutEvent
                    */
                    _handleOutEvent: function() {
                        this.shim.setStyle('zIndex', '1');
                        DDM._removeActiveShim(this);
                    },
                    /**
                    * Handles out of target calls/checks
                    * @private
                    * @method _handleOut
                    */
                    _handleOut: function(force) {
                        if (!DDM.isOverTarget(this) || force) {
                            if (this.overTarget) {
                                this.overTarget = false;
                                if (!force) {
                                    DDM._removeActiveShim(this);
                                }
                                if (DDM.activeDrag) {
                                    this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
                                    DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over');
                                    this.fire(EV_DROP_EXIT, { drop: this, drag: DDM.activeDrag });
                                    DDM.activeDrag.fire('drag:exit', { drop: this, drag: DDM.activeDrag });
                                    delete DDM.otherDrops[this];
                                }
                            }
                        }
                    }
                });
            
                Y.DD.Drop = Drop;