76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * 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.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @module dd
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @submodule dd-constrain
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Plugin for the dd-drag module to add the constraining methods to it. It supports constraining to a node or viewport. It supports tick based moves and XY axis constraints.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @class DDConstrained
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @extends Base
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @constructor
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @namespace Plugin
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @event drag:tickAlignX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires when this node is aligned with the tickX value.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {EventFacade} event An Event Facade object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type {CustomEvent}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @event drag:tickAlignY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires when this node is aligned with the tickY value.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {EventFacade} event An Event Facade object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type {CustomEvent}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass C = function(config) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property NS
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default con
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description The Constrained instance will be placed on the Drag instance under the con namespace.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type {String}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute stickX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Stick the drag movement to the X-Axis. Default: false
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute stickY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Stick the drag movement to the Y-Axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute tickX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description The X tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute tickY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description The Y tick offset the drag node should snap to on each drag move. False for no ticks. Default: false
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute tickXArray
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description An array of page coordinates to use as X ticks for drag movement.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Array
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute tickYArray
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description An array of page coordinates to use as Y ticks for drag movement.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Array
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute gutter
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description CSS style string for the gutter of a region (supports negative values): '5 0' (sets top and bottom to 5px, left and right to 0px), '1 2 3 4' (top 1px, right 2px, bottom 3px, left 4px)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type String
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute constrain
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Will attempt to constrain the drag node to the boundaries. Arguments:<br>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * 'view': Contrain to Viewport<br>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * '#selector_string': Constrain to this node<br>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * '{Region Object}': An Object Literal containing a valid region (top, right, bottom, left) of page positions
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @deprecated
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute constrain2region
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description An Object Literal containing a valid region (top, right, bottom, left) of page positions to constrain the drag node to.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass setter: function(r) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @deprecated
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute constrain2node
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Will attempt to constrain the drag node to the boundaries of this node.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass setter: function(n) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @deprecated
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute constrain2view
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Will attempt to constrain the drag node to the boundaries of the viewport region.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass setter: function(n) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute cacheRegion
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Should the region be cached for performace. Default: true
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass initializer: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.get(HOST).on('drag:end', Y.bind(this._handleEnd, this));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.get(HOST).on('drag:start', Y.bind(this._handleStart, this));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.get(HOST).after('drag:align', Y.bind(this.align, this));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.get(HOST).after('drag:drag', Y.bind(this.drag, this));
b19f7c87923d53715816c31f48cd234f688ce3d6Dav Glass destructor: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _createEvents
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _handleEnd
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires on drag:end
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _handleEnd: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _handleStart
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires on drag:start and clears the _regionCache
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _regionCache
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Store a cache of the region that we are constraining to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
b19f7c87923d53715816c31f48cd234f688ce3d6Dav Glass * Event handle for window resize event.
b19f7c87923d53715816c31f48cd234f688ce3d6Dav Glass * @property _cacheHandle
b19f7c87923d53715816c31f48cd234f688ce3d6Dav Glass * @type {Event}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _cacheRegion
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Get's the region and caches it, called from window.resize and when the cache is null
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this._regionCache = this.get('constrain').get('region');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method resetCache
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Reset the internal region cache.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resetCache: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _getConstraint
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Standardizes the 'constraint' attribute
b19f7c87923d53715816c31f48cd234f688ce3d6Dav Glass this._cacheHandle = Y.on('resize', Y.bind(this._cacheRegion, this), Y.config.win);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass region = this.get(HOST).get(DRAG_NODE).get('viewportRegion');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.each(g, function(i, n) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method getRegion
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Get the active region: viewport, node, custom region
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Boolean} inc Include the node's height and width
d60f68a8534f619bb0a3e59eea03a84a2f69021dDav Glass * @return {Object} The active region.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _checkRegion
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Check if xy is inside a given region, if not change to it be inside.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Array} _xy The XY to check if it's in the current region, if it isn't inside the region, it will reset the xy array to be inside the region.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Array} The new XY that is inside the region
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method inRegion
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Checks if the XY passed or the dragNode is inside the active region.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Array} xy Optional XY to check, if not supplied this.get('dragNode').getXY() is used.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Boolean} True if the XY is inside the region, false otherwise.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method align
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Modifies the Drag.actXY method from the after drag:align event. This is where the constraining happens.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass align: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass r = this.getRegion(true);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method drag
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires after drag:drag. Handle the tickX and tickX align events.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if ((Y.Lang.isNumber(xt) || this.get(TICK_X_ARRAY)) && (this._lastTickXFired !== _xy[0])) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if ((Y.Lang.isNumber(yt) || this.get(TICK_Y_ARRAY)) && (this._lastTickYFired !== _xy[1])) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _checkTicks
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description This method delegates the proper helper method for tick calculations
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Array} xy The XY coords for the Drag
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Object} r The optional region that we are bound to.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Array} The calced XY coords
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass xy[0] = DDM._calcTicks(xy[0], lx, xt, r[LEFT], r[RIGHT]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass xy[1] = DDM._calcTicks(xy[1], ly, yt, r[TOP], r[BOTTOM]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass xy[0] = DDM._calcTickArray(xy[0], this.get(TICK_X_ARRAY), r[LEFT], r[RIGHT]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass xy[1] = DDM._calcTickArray(xy[1], this.get(TICK_Y_ARRAY), r[TOP], r[BOTTOM]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _tickAlignX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires when the actXY[0] reach a new value respecting the tickX gap.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _tickAlignX: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _tickAlignY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Fires when the actXY[1] reach a new value respecting the tickY gap.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _tickAlignY: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @namespace DD
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _calcTicks
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description Helper method to calculate the tick offsets for a given position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} pos The current X or Y position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} start The start X or Y position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} tick The X or Y tick increment
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} off1 The min offset that we can't pass (region)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} off2 The max offset that we can't pass (region)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Number} The new position based on the tick calculation
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _calcTicks: function(pos, start, tick, off1, off2) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @namespace DD
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _calcTickArray
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @description This method is used with the tickXArray and tickYArray config options
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} pos The current X or Y position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} ticks The array containing our custom tick positions.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} off1 The min offset that we can't pass (region)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} off2 The max offset that we can't pass (region)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return The tick position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _calcTickArray: function(pos, ticks, off1, off2) {
d60f68a8534f619bb0a3e59eea03a84a2f69021dDav Glass}, '@VERSION@' ,{skinnable:false, requires:['dd-drag']});