1101 lines
36 KiB
JavaScript
1101 lines
36 KiB
JavaScript
/*
|
|
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
|
|
Code licensed under the BSD License:
|
|
http://developer.yahoo.net/yui/license.txt
|
|
version: 3.0.0
|
|
build: 1549
|
|
*/
|
|
YUI.add('dd-drag', function(Y) {
|
|
|
|
|
|
/**
|
|
* 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.
|
|
* @module dd
|
|
* @submodule dd-drag
|
|
*/
|
|
/**
|
|
* This class provides the ability to drag a Node.
|
|
* @class Drag
|
|
* @extends Base
|
|
* @constructor
|
|
* @namespace DD
|
|
*/
|
|
|
|
var DDM = Y.DD.DDM,
|
|
NODE = 'node',
|
|
DRAGGING = 'dragging',
|
|
DRAG_NODE = 'dragNode',
|
|
OFFSET_HEIGHT = 'offsetHeight',
|
|
OFFSET_WIDTH = 'offsetWidth',
|
|
MOUSE_UP = 'mouseup',
|
|
MOUSE_DOWN = 'mousedown',
|
|
DRAG_START = 'dragstart',
|
|
/**
|
|
* @event drag:mouseDown
|
|
* @description Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
|
|
* @preventable _defMouseDownFn
|
|
* @param {Event.Facade} ev The mousedown event.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_MOUSE_DOWN = 'drag:mouseDown',
|
|
/**
|
|
* @event drag:afterMouseDown
|
|
* @description Fires after the mousedown event has been cleared.
|
|
* @param {Event.Facade} ev The mousedown event.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_AFTER_MOUSE_DOWN = 'drag:afterMouseDown',
|
|
/**
|
|
* @event drag:removeHandle
|
|
* @description Fires after a handle is removed.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_REMOVE_HANDLE = 'drag:removeHandle',
|
|
/**
|
|
* @event drag:addHandle
|
|
* @description Fires after a handle is added.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_ADD_HANDLE = 'drag:addHandle',
|
|
/**
|
|
* @event drag:removeInvalid
|
|
* @description Fires after an invalid selector is removed.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_REMOVE_INVALID = 'drag:removeInvalid',
|
|
/**
|
|
* @event drag:addInvalid
|
|
* @description Fires after an invalid selector is added.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_ADD_INVALID = 'drag:addInvalid',
|
|
/**
|
|
* @event drag:start
|
|
* @description Fires at the start of a drag operation.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_START = 'drag:start',
|
|
/**
|
|
* @event drag:end
|
|
* @description Fires at the end of a drag operation.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_END = 'drag:end',
|
|
/**
|
|
* @event drag:drag
|
|
* @description Fires every mousemove during a drag operation.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_DRAG = 'drag:drag',
|
|
/**
|
|
* @event drag:align
|
|
* @preventable _defAlignFn
|
|
* @description Fires when this node is aligned.
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
EV_ALIGN = 'drag:align',
|
|
/**
|
|
* @event drag:over
|
|
* @description Fires when this node is over a Drop Target. (Fired from dd-drop)
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
/**
|
|
* @event drag:enter
|
|
* @description Fires when this node enters a Drop Target. (Fired from dd-drop)
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
/**
|
|
* @event drag:exit
|
|
* @description Fires when this node exits a Drop Target. (Fired from dd-drop)
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
/**
|
|
* @event drag:drophit
|
|
* @description Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
/**
|
|
* @event drag:dropmiss
|
|
* @description Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)
|
|
* @bubbles DDM
|
|
* @type {Event.Custom}
|
|
*/
|
|
|
|
Drag = function(o) {
|
|
this._lazyAddAttrs = false;
|
|
Drag.superclass.constructor.apply(this, arguments);
|
|
|
|
var valid = DDM._regDrag(this);
|
|
if (!valid) {
|
|
Y.error('Failed to register node, already in use: ' + o.node);
|
|
}
|
|
};
|
|
|
|
Drag.NAME = 'drag';
|
|
|
|
Drag.ATTRS = {
|
|
/**
|
|
* @attribute node
|
|
* @description Y.Node instanace to use as the element to initiate a drag operation
|
|
* @type Node
|
|
*/
|
|
node: {
|
|
setter: function(node) {
|
|
var n = Y.get(node);
|
|
if (!n) {
|
|
Y.error('DD.Drag: Invalid Node Given: ' + node);
|
|
} else {
|
|
n = n.item(0);
|
|
}
|
|
return n;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute dragNode
|
|
* @description Y.Node instanace to use as the draggable element, defaults to node
|
|
* @type Node
|
|
*/
|
|
dragNode: {
|
|
setter: function(node) {
|
|
var n = Y.Node.get(node);
|
|
if (!n) {
|
|
Y.error('DD.Drag: Invalid dragNode Given: ' + node);
|
|
}
|
|
return n;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute offsetNode
|
|
* @description Offset the drag element by the difference in cursor position: default true
|
|
* @type Boolean
|
|
*/
|
|
offsetNode: {
|
|
value: true
|
|
},
|
|
/**
|
|
* @attribute clickPixelThresh
|
|
* @description The number of pixels to move to start a drag operation, default is 3.
|
|
* @type Number
|
|
*/
|
|
clickPixelThresh: {
|
|
value: DDM.get('clickPixelThresh')
|
|
},
|
|
/**
|
|
* @attribute clickTimeThresh
|
|
* @description The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
|
|
* @type Number
|
|
*/
|
|
clickTimeThresh: {
|
|
value: DDM.get('clickTimeThresh')
|
|
},
|
|
/**
|
|
* @attribute lock
|
|
* @description Set to lock this drag element so that it can't be dragged: default false.
|
|
* @type Boolean
|
|
*/
|
|
lock: {
|
|
value: false,
|
|
setter: function(lock) {
|
|
if (lock) {
|
|
this.get(NODE).addClass(DDM.CSS_PREFIX + '-locked');
|
|
} else {
|
|
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-locked');
|
|
}
|
|
return lock;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute data
|
|
* @description A payload holder to store arbitrary data about this drag object, can be used to store any value.
|
|
* @type Mixed
|
|
*/
|
|
data: {
|
|
value: false
|
|
},
|
|
/**
|
|
* @attribute move
|
|
* @description If this is false, the drag element will not move with the cursor: default true. Can be used to "resize" the element.
|
|
* @type Boolean
|
|
*/
|
|
move: {
|
|
value: true
|
|
},
|
|
/**
|
|
* @attribute useShim
|
|
* @description Use the protective shim on all drag operations: default true. Only works with dd-ddm, not dd-ddm-base.
|
|
* @type Boolean
|
|
*/
|
|
useShim: {
|
|
value: true
|
|
},
|
|
/**
|
|
* @attribute activeHandle
|
|
* @description This config option is set by Drag to inform you of which handle fired the drag event (in the case that there are several handles): default false.
|
|
* @type Node
|
|
*/
|
|
activeHandle: {
|
|
value: false
|
|
},
|
|
/**
|
|
* @attribute primaryButtonOnly
|
|
* @description By default a drag operation will only begin if the mousedown occurred with the primary mouse button. Setting this to false will allow for all mousedown events to trigger a drag.
|
|
* @type Boolean
|
|
*/
|
|
primaryButtonOnly: {
|
|
value: true
|
|
},
|
|
/**
|
|
* @attribute dragging
|
|
* @description This attribute is not meant to be used by the implementor, it is meant to be used as an Event tracker so you can listen for it to change.
|
|
* @type Boolean
|
|
*/
|
|
dragging: {
|
|
value: false
|
|
},
|
|
parent: {
|
|
value: false
|
|
},
|
|
/**
|
|
* @attribute target
|
|
* @description This attribute only works if the dd-drop module has been loaded. It will make this node a drop target as well as draggable.
|
|
* @type Boolean
|
|
*/
|
|
target: {
|
|
value: false,
|
|
setter: function(config) {
|
|
this._handleTarget(config);
|
|
return config;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute dragMode
|
|
* @description This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of this Drag instance.
|
|
* @type String
|
|
*/
|
|
dragMode: {
|
|
value: null,
|
|
setter: function(mode) {
|
|
return DDM._setDragMode(mode);
|
|
}
|
|
},
|
|
/**
|
|
* @attribute groups
|
|
* @description Array of groups to add this drag into.
|
|
* @type Array
|
|
*/
|
|
groups: {
|
|
value: ['default'],
|
|
getter: function() {
|
|
if (!this._groups) {
|
|
this._groups = {};
|
|
}
|
|
var ret = [];
|
|
Y.each(this._groups, function(v, k) {
|
|
ret[ret.length] = k;
|
|
});
|
|
return ret;
|
|
},
|
|
setter: function(g) {
|
|
this._groups = {};
|
|
Y.each(g, function(v, k) {
|
|
this._groups[v] = true;
|
|
}, this);
|
|
return g;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute handles
|
|
* @description Array of valid handles to add. Adding something here will set all handles, even if previously added with addHandle
|
|
* @type Array
|
|
*/
|
|
handles: {
|
|
value: null,
|
|
setter: function(g) {
|
|
if (g) {
|
|
this._handles = {};
|
|
Y.each(g, function(v, k) {
|
|
this._handles[v] = true;
|
|
}, this);
|
|
} else {
|
|
this._handles = null;
|
|
}
|
|
return g;
|
|
}
|
|
},
|
|
/**
|
|
* @attribute bubbles
|
|
* @description Controls the default bubble parent for this Drag instance. Default: Y.DD.DDM. Set to false to disable bubbling.
|
|
* @type Object
|
|
*/
|
|
bubbles: {
|
|
writeOnce: true,
|
|
value: Y.DD.DDM
|
|
}
|
|
};
|
|
|
|
Y.extend(Drag, Y.Base, {
|
|
/**
|
|
* @method addToGroup
|
|
* @description Add this Drag instance to a group, this should be used for on-the-fly group additions.
|
|
* @param {String} g The group to add this Drag Instance to.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
addToGroup: function(g) {
|
|
this._groups[g] = true;
|
|
DDM._activateTargets();
|
|
return this;
|
|
},
|
|
/**
|
|
* @method removeFromGroup
|
|
* @description Remove this Drag instance from a group, this should be used for on-the-fly group removals.
|
|
* @param {String} g The group to remove this Drag Instance from.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
removeFromGroup: function(g) {
|
|
delete this._groups[g];
|
|
DDM._activateTargets();
|
|
return this;
|
|
},
|
|
/**
|
|
* @property target
|
|
* @description This will be a reference to the Drop instance associated with this drag if the target: true config attribute is set..
|
|
* @type {Object}
|
|
*/
|
|
target: null,
|
|
/**
|
|
* @private
|
|
* @method _handleTarget
|
|
* @description Attribute handler for the target config attribute.
|
|
* @param {Boolean/Object}
|
|
* @return {Boolean/Object}
|
|
*/
|
|
_handleTarget: function(config) {
|
|
if (Y.DD.Drop) {
|
|
if (config === false) {
|
|
if (this.target) {
|
|
DDM._unregTarget(this.target);
|
|
this.target = null;
|
|
}
|
|
return false;
|
|
} else {
|
|
if (!Y.Lang.isObject(config)) {
|
|
config = {};
|
|
}
|
|
config.bubbles = ('bubbles' in config) ? config.bubbles : this.get('bubbles');
|
|
config.node = this.get(NODE);
|
|
config.groups = config.groups || this.get('groups');
|
|
this.target = new Y.DD.Drop(config);
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @property _groups
|
|
* @description Storage Array for the groups this drag belongs to.
|
|
* @type {Array}
|
|
*/
|
|
_groups: null,
|
|
/**
|
|
* @private
|
|
* @method _createEvents
|
|
* @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
|
|
*/
|
|
_createEvents: function() {
|
|
|
|
this.publish(EV_MOUSE_DOWN, {
|
|
defaultFn: this._defMouseDownFn,
|
|
queuable: false,
|
|
emitFacade: true,
|
|
bubbles: true,
|
|
prefix: 'drag'
|
|
});
|
|
|
|
this.publish(EV_ALIGN, {
|
|
defaultFn: this._defAlignFn,
|
|
queuable: false,
|
|
emitFacade: true,
|
|
bubbles: true,
|
|
prefix: 'drag'
|
|
});
|
|
|
|
this.publish(EV_DRAG, {
|
|
defaultFn: this._defDragFn,
|
|
queuable: false,
|
|
emitFacade: true,
|
|
bubbles: true,
|
|
prefix: 'drag'
|
|
});
|
|
|
|
this.publish(EV_END, {
|
|
preventedFn: this._prevEndFn,
|
|
queuable: false,
|
|
emitFacade: true,
|
|
bubbles: true,
|
|
prefix: 'drag'
|
|
});
|
|
|
|
var ev = [
|
|
EV_AFTER_MOUSE_DOWN,
|
|
EV_REMOVE_HANDLE,
|
|
EV_ADD_HANDLE,
|
|
EV_REMOVE_INVALID,
|
|
EV_ADD_INVALID,
|
|
EV_START,
|
|
'drag:drophit',
|
|
'drag:dropmiss',
|
|
'drag:over',
|
|
'drag:enter',
|
|
'drag:exit'
|
|
];
|
|
|
|
Y.each(ev, function(v, k) {
|
|
this.publish(v, {
|
|
type: v,
|
|
emitFacade: true,
|
|
bubbles: true,
|
|
preventable: false,
|
|
queuable: false,
|
|
prefix: 'drag'
|
|
});
|
|
}, this);
|
|
|
|
if (this.get('bubbles')) {
|
|
this.addTarget(this.get('bubbles'));
|
|
}
|
|
|
|
|
|
},
|
|
/**
|
|
* @private
|
|
* @property _ev_md
|
|
* @description A private reference to the mousedown DOM event
|
|
* @type {Event.Facade}
|
|
*/
|
|
_ev_md: null,
|
|
/**
|
|
* @private
|
|
* @property _startTime
|
|
* @description The getTime of the mousedown event. Not used, just here in case someone wants/needs to use it.
|
|
* @type Date
|
|
*/
|
|
_startTime: null,
|
|
/**
|
|
* @private
|
|
* @property _endTime
|
|
* @description The getTime of the mouseup event. Not used, just here in case someone wants/needs to use it.
|
|
* @type Date
|
|
*/
|
|
_endTime: null,
|
|
/**
|
|
* @private
|
|
* @property _handles
|
|
* @description A private hash of the valid drag handles
|
|
* @type {Object}
|
|
*/
|
|
_handles: null,
|
|
/**
|
|
* @private
|
|
* @property _invalids
|
|
* @description A private hash of the invalid selector strings
|
|
* @type {Object}
|
|
*/
|
|
_invalids: null,
|
|
/**
|
|
* @private
|
|
* @property _invalidsDefault
|
|
* @description A private hash of the default invalid selector strings: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true}
|
|
* @type {Object}
|
|
*/
|
|
_invalidsDefault: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true },
|
|
/**
|
|
* @private
|
|
* @property _dragThreshMet
|
|
* @description Private flag to see if the drag threshhold was met
|
|
* @type {Boolean}
|
|
*/
|
|
_dragThreshMet: null,
|
|
/**
|
|
* @private
|
|
* @property _fromTimeout
|
|
* @description Flag to determine if the drag operation came from a timeout
|
|
* @type {Boolean}
|
|
*/
|
|
_fromTimeout: null,
|
|
/**
|
|
* @private
|
|
* @property _clickTimeout
|
|
* @description Holder for the setTimeout call
|
|
* @type {Boolean}
|
|
*/
|
|
_clickTimeout: null,
|
|
/**
|
|
* @property deltaXY
|
|
* @description The offset of the mouse position to the element's position
|
|
* @type {Array}
|
|
*/
|
|
deltaXY: null,
|
|
/**
|
|
* @property startXY
|
|
* @description The initial mouse position
|
|
* @type {Array}
|
|
*/
|
|
startXY: null,
|
|
/**
|
|
* @property nodeXY
|
|
* @description The initial element position
|
|
* @type {Array}
|
|
*/
|
|
nodeXY: null,
|
|
/**
|
|
* @property lastXY
|
|
* @description The position of the element as it's moving (for offset calculations)
|
|
* @type {Array}
|
|
*/
|
|
lastXY: null,
|
|
/**
|
|
* @property actXY
|
|
* @description The xy that the node will be set to. Changing this will alter the position as it's dragged.
|
|
* @type {Array}
|
|
*/
|
|
actXY: null,
|
|
/**
|
|
* @property realXY
|
|
* @description The real xy position of the node.
|
|
* @type {Array}
|
|
*/
|
|
realXY: null,
|
|
/**
|
|
* @property mouseXY
|
|
* @description The XY coords of the mousemove
|
|
* @type {Array}
|
|
*/
|
|
mouseXY: null,
|
|
/**
|
|
* @property region
|
|
* @description A region object associated with this drag, used for checking regions while dragging.
|
|
* @type Object
|
|
*/
|
|
region: null,
|
|
/**
|
|
* @private
|
|
* @method _handleMouseUp
|
|
* @description Handler for the mouseup DOM event
|
|
* @param {Event.Facade}
|
|
*/
|
|
_handleMouseUp: function(ev) {
|
|
this._fixIEMouseUp();
|
|
if (DDM.activeDrag) {
|
|
DDM._end();
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _fixDragStart
|
|
* @description The function we use as the ondragstart handler when we start a drag in Internet Explorer. This keeps IE from blowing up on images as drag handles.
|
|
*/
|
|
_fixDragStart: function(e) {
|
|
e.preventDefault();
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _ieSelectFix
|
|
* @description The function we use as the onselectstart handler when we start a drag in Internet Explorer
|
|
*/
|
|
_ieSelectFix: function() {
|
|
return false;
|
|
},
|
|
/**
|
|
* @private
|
|
* @property _ieSelectBack
|
|
* @description We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
|
|
*/
|
|
_ieSelectBack: null,
|
|
/**
|
|
* @private
|
|
* @method _fixIEMouseDown
|
|
* @description This method copies the onselectstart listner on the document to the _ieSelectFix property
|
|
*/
|
|
_fixIEMouseDown: function() {
|
|
if (Y.UA.ie) {
|
|
this._ieSelectBack = Y.config.doc.body.onselectstart;
|
|
Y.config.doc.body.onselectstart = this._ieSelectFix;
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _fixIEMouseUp
|
|
* @description This method copies the _ieSelectFix property back to the onselectstart listner on the document.
|
|
*/
|
|
_fixIEMouseUp: function() {
|
|
if (Y.UA.ie) {
|
|
Y.config.doc.body.onselectstart = this._ieSelectBack;
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _handleMouseDownEvent
|
|
* @description Handler for the mousedown DOM event
|
|
* @param {Event.Facade}
|
|
*/
|
|
_handleMouseDownEvent: function(ev) {
|
|
this.fire(EV_MOUSE_DOWN, { ev: ev });
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _defMouseDownFn
|
|
* @description Handler for the mousedown DOM event
|
|
* @param {Event.Facade}
|
|
*/
|
|
_defMouseDownFn: function(e) {
|
|
var ev = e.ev;
|
|
this._dragThreshMet = false;
|
|
this._ev_md = ev;
|
|
|
|
if (this.get('primaryButtonOnly') && ev.button > 1) {
|
|
return false;
|
|
}
|
|
if (this.validClick(ev)) {
|
|
this._fixIEMouseDown();
|
|
ev.halt();
|
|
this._setStartPosition([ev.pageX, ev.pageY]);
|
|
|
|
DDM.activeDrag = this;
|
|
|
|
this._clickTimeout = Y.later(this.get('clickTimeThresh'), this, this._timeoutCheck);
|
|
}
|
|
this.fire(EV_AFTER_MOUSE_DOWN, { ev: ev });
|
|
},
|
|
/**
|
|
* @method validClick
|
|
* @description Method first checks to see if we have handles, if so it validates the click against the handle. Then if it finds a valid handle, it checks it against the invalid handles list. Returns true if a good handle was used, false otherwise.
|
|
* @param {Event.Facade}
|
|
* @return {Boolean}
|
|
*/
|
|
validClick: function(ev) {
|
|
var r = false, n = false,
|
|
tar = ev.target,
|
|
hTest = null,
|
|
els = null,
|
|
set = false;
|
|
if (this._handles) {
|
|
Y.each(this._handles, function(i, n) {
|
|
if (Y.Lang.isString(n)) {
|
|
//Am I this or am I inside this
|
|
if (tar.test(n + ', ' + n + ' *') && !hTest) {
|
|
hTest = n;
|
|
r = true;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
n = this.get(NODE)
|
|
if (n.contains(tar) || n.compareTo(tar)) {
|
|
r = true;
|
|
}
|
|
}
|
|
if (r) {
|
|
if (this._invalids) {
|
|
Y.each(this._invalids, function(i, n) {
|
|
if (Y.Lang.isString(n)) {
|
|
//Am I this or am I inside this
|
|
if (tar.test(n + ', ' + n + ' *')) {
|
|
r = false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
if (r) {
|
|
if (hTest) {
|
|
els = ev.currentTarget.queryAll(hTest);
|
|
set = false;
|
|
els.each(function(n, i) {
|
|
if ((n.contains(tar) || n.compareTo(tar)) && !set) {
|
|
set = true;
|
|
this.set('activeHandle', n);
|
|
}
|
|
}, this);
|
|
} else {
|
|
this.set('activeHandle', this.get(NODE));
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _setStartPosition
|
|
* @description Sets the current position of the Element and calculates the offset
|
|
* @param {Array} xy The XY coords to set the position to.
|
|
*/
|
|
_setStartPosition: function(xy) {
|
|
this.startXY = xy;
|
|
|
|
this.nodeXY = this.lastXY = this.realXY = this.get(NODE).getXY();
|
|
|
|
if (this.get('offsetNode')) {
|
|
this.deltaXY = [(this.startXY[0] - this.nodeXY[0]), (this.startXY[1] - this.nodeXY[1])];
|
|
} else {
|
|
this.deltaXY = [0, 0];
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _timeoutCheck
|
|
* @description The method passed to setTimeout to determine if the clickTimeThreshold was met.
|
|
*/
|
|
_timeoutCheck: function() {
|
|
if (!this.get('lock') && !this._dragThreshMet) {
|
|
this._fromTimeout = this._dragThreshMet = true;
|
|
this.start();
|
|
this._alignNode([this._ev_md.pageX, this._ev_md.pageY], true);
|
|
}
|
|
},
|
|
/**
|
|
* @method removeHandle
|
|
* @description Remove a Selector added by addHandle
|
|
* @param {String} str The selector for the handle to be removed.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
removeHandle: function(str) {
|
|
if (this._handles[str]) {
|
|
delete this._handles[str];
|
|
this.fire(EV_REMOVE_HANDLE, { handle: str });
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @method addHandle
|
|
* @description Add a handle to a drag element. Drag only initiates when a mousedown happens on this element.
|
|
* @param {String} str The selector to test for a valid handle. Must be a child of the element.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
addHandle: function(str) {
|
|
if (!this._handles) {
|
|
this._handles = {};
|
|
}
|
|
if (Y.Lang.isString(str)) {
|
|
this._handles[str] = true;
|
|
this.fire(EV_ADD_HANDLE, { handle: str });
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @method removeInvalid
|
|
* @description Remove an invalid handle added by addInvalid
|
|
* @param {String} str The invalid handle to remove from the internal list.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
removeInvalid: function(str) {
|
|
if (this._invalids[str]) {
|
|
this._invalids[str] = null;
|
|
delete this._invalids[str];
|
|
this.fire(EV_REMOVE_INVALID, { handle: str });
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @method addInvalid
|
|
* @description Add a selector string to test the handle against. If the test passes the drag operation will not continue.
|
|
* @param {String} str The selector to test against to determine if this is an invalid drag handle.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
addInvalid: function(str) {
|
|
if (Y.Lang.isString(str)) {
|
|
this._invalids[str] = true;
|
|
this.fire(EV_ADD_INVALID, { handle: str });
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @private
|
|
* @method initializer
|
|
* @description Internal init handler
|
|
*/
|
|
initializer: function() {
|
|
this.get(NODE).dd = this;
|
|
|
|
if (!this.get(NODE).get('id')) {
|
|
var id = Y.stamp(this.get(NODE));
|
|
this.get(NODE).set('id', id);
|
|
}
|
|
|
|
this.actXY = [];
|
|
|
|
this._invalids = Y.clone(this._invalidsDefault, true);
|
|
|
|
this._createEvents();
|
|
|
|
if (!this.get(DRAG_NODE)) {
|
|
this.set(DRAG_NODE, this.get(NODE));
|
|
}
|
|
|
|
//Fix for #2528096
|
|
//Don't prep the DD instance until all plugins are loaded.
|
|
this.on('initializedChange', Y.bind(this._prep, this));
|
|
|
|
//Shouldn't have to do this..
|
|
this.set('groups', this.get('groups'));
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _prep
|
|
* @description Attach event listners and add classname
|
|
*/
|
|
_prep: function() {
|
|
this._dragThreshMet = false;
|
|
var node = this.get(NODE);
|
|
node.addClass(DDM.CSS_PREFIX + '-draggable');
|
|
node.on(MOUSE_DOWN, Y.bind(this._handleMouseDownEvent, this));
|
|
node.on(MOUSE_UP, Y.bind(this._handleMouseUp, this));
|
|
node.on(DRAG_START, Y.bind(this._fixDragStart, this));
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _unprep
|
|
* @description Detach event listeners and remove classname
|
|
*/
|
|
_unprep: function() {
|
|
var node = this.get(NODE);
|
|
node.removeClass(DDM.CSS_PREFIX + '-draggable');
|
|
node.detachAll();
|
|
},
|
|
/**
|
|
* @method start
|
|
* @description Starts the drag operation
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
start: function() {
|
|
if (!this.get('lock') && !this.get(DRAGGING)) {
|
|
var node = this.get(NODE), ow = node.get(OFFSET_WIDTH), oh = node.get(OFFSET_HEIGHT);
|
|
this._startTime = (new Date()).getTime();
|
|
|
|
DDM._start();
|
|
node.addClass(DDM.CSS_PREFIX + '-dragging');
|
|
this.fire(EV_START, {
|
|
pageX: this.nodeXY[0],
|
|
pageY: this.nodeXY[1],
|
|
startTime: this._startTime
|
|
});
|
|
var xy = this.nodeXY;
|
|
|
|
|
|
this.region = {
|
|
'0': xy[0],
|
|
'1': xy[1],
|
|
area: 0,
|
|
top: xy[1],
|
|
right: xy[0] + ow,
|
|
bottom: xy[1] + oh,
|
|
left: xy[0]
|
|
};
|
|
this.set(DRAGGING, true);
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @method end
|
|
* @description Ends the drag operation
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
end: function() {
|
|
this._endTime = (new Date()).getTime();
|
|
if (this._clickTimeout) {
|
|
this._clickTimeout.cancel();
|
|
}
|
|
this._dragThreshMet = false;
|
|
this._fromTimeout = false;
|
|
if (!this.get('lock') && this.get(DRAGGING)) {
|
|
this.fire(EV_END, {
|
|
pageX: this.lastXY[0],
|
|
pageY: this.lastXY[1],
|
|
startTime: this._startTime,
|
|
endTime: this._endTime
|
|
});
|
|
}
|
|
this.get(NODE).removeClass(DDM.CSS_PREFIX + '-dragging');
|
|
this.set(DRAGGING, false);
|
|
this.deltaXY = [0, 0];
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _prevEndFn
|
|
* @description Handler for preventing the drag:end event. It will reset the node back to it's start position
|
|
*/
|
|
_prevEndFn: function(e) {
|
|
//Bug #1852577
|
|
this.get(DRAG_NODE).setXY(this.nodeXY);
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _align
|
|
* @description Calculates the offsets and set's the XY that the element will move to.
|
|
* @param {Array} xy The xy coords to align with.
|
|
*/
|
|
_align: function(xy) {
|
|
this.fire(EV_ALIGN, {pageX: xy[0], pageY: xy[1] });
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _defAlignFn
|
|
* @description Calculates the offsets and set's the XY that the element will move to.
|
|
* @param {Event.Facade} e The drag:align event.
|
|
*/
|
|
_defAlignFn: function(e) {
|
|
this.actXY = [e.pageX - this.deltaXY[0], e.pageY - this.deltaXY[1]];
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _alignNode
|
|
* @description This method performs the alignment before the element move.
|
|
* @param {Array} eXY The XY to move the element to, usually comes from the mousemove DOM event.
|
|
*/
|
|
_alignNode: function(eXY) {
|
|
this._align(eXY);
|
|
this._moveNode();
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _moveNode
|
|
* @description This method performs the actual element move.
|
|
*/
|
|
_moveNode: function(scroll) {
|
|
//if (!this.get(DRAGGING)) {
|
|
// return;
|
|
//}
|
|
var diffXY = [], diffXY2 = [], startXY = this.nodeXY, xy = this.actXY;
|
|
|
|
diffXY[0] = (xy[0] - this.lastXY[0]);
|
|
diffXY[1] = (xy[1] - this.lastXY[1]);
|
|
|
|
diffXY2[0] = (xy[0] - this.nodeXY[0]);
|
|
diffXY2[1] = (xy[1] - this.nodeXY[1]);
|
|
|
|
|
|
this.region = {
|
|
'0': xy[0],
|
|
'1': xy[1],
|
|
area: 0,
|
|
top: xy[1],
|
|
right: xy[0] + this.get(DRAG_NODE).get(OFFSET_WIDTH),
|
|
bottom: xy[1] + this.get(DRAG_NODE).get(OFFSET_HEIGHT),
|
|
left: xy[0]
|
|
};
|
|
|
|
this.fire(EV_DRAG, {
|
|
pageX: xy[0],
|
|
pageY: xy[1],
|
|
scroll: scroll,
|
|
info: {
|
|
start: startXY,
|
|
xy: xy,
|
|
delta: diffXY,
|
|
offset: diffXY2
|
|
}
|
|
});
|
|
|
|
this.lastXY = xy;
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _defDragFn
|
|
* @description Default function for drag:drag. Fired from _moveNode.
|
|
* @param {Event.Facade} ev The drag:drag event
|
|
*/
|
|
_defDragFn: function(e) {
|
|
if (this.get('move')) {
|
|
if (e.scroll) {
|
|
e.scroll.node.set('scrollTop', e.scroll.top);
|
|
e.scroll.node.set('scrollLeft', e.scroll.left);
|
|
}
|
|
this.get(DRAG_NODE).setXY([e.pageX, e.pageY]);
|
|
this.realXY = [e.pageX, e.pageY];
|
|
}
|
|
},
|
|
/**
|
|
* @private
|
|
* @method _move
|
|
* @description Fired from DragDropMgr (DDM) on mousemove.
|
|
* @param {Event.Facade} ev The mousemove DOM event
|
|
*/
|
|
_move: function(ev) {
|
|
if (this.get('lock')) {
|
|
return false;
|
|
} else {
|
|
this.mouseXY = [ev.pageX, ev.pageY];
|
|
if (!this._dragThreshMet) {
|
|
var diffX = Math.abs(this.startXY[0] - ev.pageX),
|
|
diffY = Math.abs(this.startXY[1] - ev.pageY);
|
|
if (diffX > this.get('clickPixelThresh') || diffY > this.get('clickPixelThresh')) {
|
|
this._dragThreshMet = true;
|
|
this.start();
|
|
this._alignNode([ev.pageX, ev.pageY]);
|
|
}
|
|
} else {
|
|
if (this._clickTimeout) {
|
|
this._clickTimeout.cancel();
|
|
}
|
|
this._alignNode([ev.pageX, ev.pageY]);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* @method stopDrag
|
|
* @description Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
|
|
* @return {Self}
|
|
* @chainable
|
|
*/
|
|
stopDrag: function() {
|
|
if (this.get(DRAGGING)) {
|
|
DDM._end();
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* @private
|
|
* @method destructor
|
|
* @description Lifecycle destructor, unreg the drag from the DDM and remove listeners
|
|
*/
|
|
destructor: function() {
|
|
this._unprep();
|
|
this.detachAll();
|
|
if (this.target) {
|
|
this.target.destroy();
|
|
}
|
|
DDM._unregDrag(this);
|
|
}
|
|
});
|
|
Y.namespace('DD');
|
|
Y.DD.Drag = Drag;
|
|
|
|
|
|
|
|
|
|
|
|
}, '3.0.0' ,{requires:['dd-ddm-base'], skinnable:false});
|