drop.js revision fe9b360fbba5ff31e2640b73a2826010d9c7ca28
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * 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.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @module dd
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @submodule dd-drop
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * This class provides the ability to create a Drop Target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @class Drop
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @extends Base
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @constructor
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @namespace DD
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore var NODE = 'node',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore DDM = Y.DD.DDM,
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore OFFSET_HEIGHT = 'offsetHeight',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore OFFSET_WIDTH = 'offsetWidth',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:over
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element is over this target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
2c30fa4582c5d6c659e059e719c5f6163f7ef1e3Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore EV_DROP_OVER = 'drop:over',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:enter
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element enters this target.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore EV_DROP_ENTER = 'drop:enter',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:exit
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Fires when a drag element exits this target.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @bubbles DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type {Event.Custom}
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore EV_DROP_EXIT = 'drop:exit',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @event drop:hit
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @bubbles DDM
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type {Event.Custom}
028efd1c560953673904369fe3f2592de7103b8cGarrett D'Amore */
028efd1c560953673904369fe3f2592de7103b8cGarrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Drop = function() {
028efd1c560953673904369fe3f2592de7103b8cGarrett D'Amore Drop.superclass.constructor.apply(this, arguments);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
028efd1c560953673904369fe3f2592de7103b8cGarrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore //DD init speed up.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore Y.on('event:ready', Y.bind(function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Y.later(100, this, this._createShim);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }, this));
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore DDM._regTarget(this);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /* TODO
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (Dom.getStyle(this.el, 'position') == 'fixed') {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Event.on(window, 'scroll', function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.activateShim();
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }, this, true);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore };
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Drop.NAME = 'drop';
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Drop.ATTRS = {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @attribute node
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Y.Node instanace to use as the element to make a Drop Target
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Node
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore node: {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(node) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore var n = Y.Node.get(node);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (!n) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Y.error('DD.Drop: Invalid Node Given: ' + node);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return n;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore },
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute groups
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Array of groups to add this drop into.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Array
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore groups: {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore value: ['default'],
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(g) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this._groups = {};
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore Y.each(g, function(v, k) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this._groups[v] = true;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }, this);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore return g;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore },
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute padding
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description CSS style padding to make the Drop Target bigger than the node.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type String
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore padding: {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore value: '0',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(p) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return DDM.cssSizestoObject(p);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore },
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @attribute lock
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Set to lock this drop element.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Boolean
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore lock: {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore value: false,
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore setter: function(lock) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (lock) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked');
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore } else {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked');
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return lock;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore },
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @attribute bubbles
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Object
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore bubbles: {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore writeOnce: true,
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore value: Y.DD.DDM
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore };
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Y.extend(Drop, Y.Base, {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @private
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _createEvents
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore _createEvents: function() {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore var ev = [
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore EV_DROP_OVER,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore EV_DROP_ENTER,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore EV_DROP_EXIT,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore 'drop:hit'
2c30fa4582c5d6c659e059e719c5f6163f7ef1e3Garrett D'Amore ];
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore Y.each(ev, function(v, k) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.publish(v, {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore type: v,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore emitFacade: true,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore preventable: false,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore bubbles: true,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore queuable: false,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore prefix: 'drop'
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore });
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }, this);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (this.get('bubbles')) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.addTarget(this.get('bubbles'));
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore },
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @private
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property _valid
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Flag for determining if the target is valid in this operation.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Boolean
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore _valid: null,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @private
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property _groups
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description The groups this target belongs to.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Array
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore _groups: null,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property shim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Node reference to the targets shim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type {Object}
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore shim: null,
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @property region
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description A region object associated with this target, used for checking regions while dragging.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @type Object
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore region: null,
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @property overTarget
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description This flag is tripped when a drag element is over this target.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @type Boolean
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore overTarget: null,
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method inGroup
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Check if this target is in one of the supplied groups.
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @param {Array} groups The groups to check against
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @return Boolean
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore inGroup: function(groups) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore this._valid = false;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore var ret = false;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore Y.each(groups, function(v, k) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (this._groups[v]) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore ret = true;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this._valid = true;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }, this);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return ret;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore },
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @private
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method initializer
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Private lifecycle method
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore initializer: function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore //this._createEvents();
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore Y.later(100, this, this._createEvents);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore var node = this.get(NODE), id;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (!node.get('id')) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore id = Y.stamp(node);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore node.set('id', id);
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore node.addClass(DDM.CSS_PREFIX + '-drop');
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore },
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @private
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @method destructor
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Lifecycle destructor, unreg the drag from the DDM and remove listeners
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore destructor: function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore DDM._unregTarget(this);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (this.shim) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.shim.detachAll();
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.shim.get('parentNode').removeChild(this.shim);
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.shim = null;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.detachAll();
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore },
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @private
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _deactivateShim
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore * @description Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore */
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore _deactivateShim: function() {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore if (!this.shim) {
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore return false;
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore }
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.shim.setStyles({
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore top: '-999px',
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore left: '-999px',
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore zIndex: '2'
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore });
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore this.overTarget = false;
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore },
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore /**
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @private
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @method _activateShim
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore * @description Activates the shim and adds some interaction CSS classes
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore */
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore _activateShim: function() {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore if (!DDM.activeDrag) {
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore return false; //Nothing is dragging, no reason to activate.
68c47f65208790c466e5e484f2293d3baed71c6aGarrett D'Amore }
88447a05f537aabe9a1bc3d5313f22581ec992a7Garrett D'Amore 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;
this.sizeShim();
} else {
DDM._removeValid(this);
node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');
}
},
/**
* @method sizeShim
* @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..
*/
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')) {
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]);
}
//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]
};
},
/**
* @private
* @method _createShim
* @description Creates the Target shim and adds it to the DDM's playground..
*/
_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 = 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);
this.shim = s;
s.on('mouseover', Y.bind(this._handleOverEvent, this));
s.on('mouseout', Y.bind(this._handleOutEvent, this));
},
/**
* @private
* @method _handleOverTarget
* @description This handles the over target call made from this object or from the DDM
*/
_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 {
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();
}
},
/**
* @private
* @method _handleOverEvent
* @description Handles the mouseover DOM event on the Target Shim
*/
_handleOverEvent: function() {
this.shim.setStyle('zIndex', '999');
DDM._addActiveShim(this);
},
/**
* @private
* @method _handleOut
* @description Handles the mouseout DOM event on the Target Shim
*/
_handleOutEvent: function() {
this.shim.setStyle('zIndex', '1');
DDM._removeActiveShim(this);
},
/**
* @private
* @method _handleOut
* @description Handles out of target calls/checks
*/
_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);
DDM.activeDrag.fire('drag:exit', { drop: this });
delete DDM.otherDrops[this];
//if (DDM.activeDrop === this) {
// DDM.activeDrop = null;
//}
}
}
}
}
});
Y.DD.Drop = Drop;