ddm-base.js revision 7ff273fc586a72254d17af146b2a6a32cc39e76b
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * Provides the base Drag Drop Manger required for making a Node draggable.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @module dd
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @submodule dd-ddm-base
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * Provides the base Drag Drop Manger required for making a Node draggable.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @class DDM
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @extends Base
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @constructor
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @namespace DD
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng var DDMBase = function() {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng DDMBase.superclass.constructor.apply(this, arguments);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng };
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng DDMBase.NAME = 'ddm';
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng DDMBase.ATTRS = {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
0591ddd0694c4d7ab3ad339419da215a732587f8Prakash Jalan * @attribute dragCursor
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description The cursor to apply when dragging, if shimmed the shim will get the cursor.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type String
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng dragCursor: {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng value: 'move'
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @attribute clickPixelThresh
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description The number of pixels to move to start a drag operation, default is 3.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type Number
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng clickPixelThresh: {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng value: 3
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @attribute clickTimeThresh
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type Number
0dc2366f7b9f9f36e10909b1e95edbf2a261c2acVenugopal Iyer */
61af1958c03f88647637805ecf6bdb99b9eef36bGarrett D'Amore clickTimeThresh: {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng value: 1000
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @attribute dragMode
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of all future Drag instances.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type String
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng dragMode: {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng value: 'point',
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng setter: function(mode) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._setDragMode(mode);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return mode;
0dc2366f7b9f9f36e10909b1e95edbf2a261c2acVenugopal Iyer }
0dc2366f7b9f9f36e10909b1e95edbf2a261c2acVenugopal Iyer }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng };
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng Y.extend(DDMBase, Y.Base, {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _setDragMode
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Handler for dragMode attribute setter.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param String/Number The Number value or the String for the DragMode to default all future drag instances to.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @return Number The Mode to be set
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai _setDragMode: function(mode) {
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai if (mode === null) {
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai mode = Y.DD.DDM.get('dragMode');
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai }
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai switch (mode) {
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai case 1:
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai case 'intersect':
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai return 1;
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai case 2:
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai case 'strict':
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return 2;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng case 0:
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng case 'point':
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return 0;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return 0;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @property CSS_PREFIX
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description The PREFIX to attach to all DD CSS class names
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type {String}
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng CSS_PREFIX: 'yui-dd',
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _activateTargets: function() {},
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @property _drags
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Holder for all registered drag elements.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type {Array}
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _drags: [],
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @property activeDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description A reference to the currently active draggable object.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @type {Drag}
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng activeDrag: false,
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _regDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Adds a reference to the drag object to the DDM._drags array, called in the constructor of Drag.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Drag} d The Drag object
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _regDrag: function(d) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._drags[this._drags.length] = d;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _unregDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Remove this drag object from the DDM._drags array.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Drag} d The drag object.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _unregDrag: function(d) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng var tmp = [];
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng Y.each(this._drags, function(n, i) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (n !== d) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng tmp[tmp.length] = n;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng });
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._drags = tmp;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _init
ee94b1c37a34b758315666dcd0bc7c46d1aea15cSebastien Roy * @description DDM's init method
ee94b1c37a34b758315666dcd0bc7c46d1aea15cSebastien Roy */
ee94b1c37a34b758315666dcd0bc7c46d1aea15cSebastien Roy initializer: function() {
ee94b1c37a34b758315666dcd0bc7c46d1aea15cSebastien Roy var doc = Y.Node.get('document');
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng doc.on('mousemove', Y.bind(this._move, this));
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng doc.on('mouseup', Y.bind(this._end, this));
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _start
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Internal method used by Drag to signal the start of a drag operation
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} x The x position of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} y The y position of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} w The width of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} h The height of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _start: function(x, y, w, h) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this.fire('ddm:start');
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._startDrag.apply(this, arguments);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _startDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Factory method to be overwritten by other DDM's
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} x The x position of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} y The y position of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} w The width of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Number} h The height of the drag element
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _startDrag: function() {},
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _endDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Factory method to be overwritten by other DDM's
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _endDrag: function() {},
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _dropMove: function() {},
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method _end
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Internal method used by Drag to signal the end of a drag operation
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _end: function() {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng //@TODO - Here we can get a (click - drag - click - release) interaction instead of a (mousedown - drag - mouseup - release) interaction
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng //Add as a config option??
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (this.activeDrag) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._endDrag();
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this.fire('ddm:end');
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this.activeDrag.end.call(this.activeDrag);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this.activeDrag = null;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method stopDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @return {Self}
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @chainable
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng stopDrag: function() {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (this.activeDrag) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._end();
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai }
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai return this;
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai },
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai /**
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai * @private
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai * @method _move
4eaa471005973e11a6110b69fe990530b3b95a38Rishi Srivatsavai * @description Internal listener for the mousemove DOM event to pass to the Drag's move method.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {Event.Facade} ev The Dom mousemove Event
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng _move: function(ev) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (this.activeDrag) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this.activeDrag._move.apply(this.activeDrag, arguments);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng this._dropMove();
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * //TODO Private, rename??...
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @private
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method cssSizestoObject
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Helper method to use to set the gutter from the attribute setter.
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {String} gutter CSS style string for gutter: '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)
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark * @return {Object} The gutter Object Literal.
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark */
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark cssSizestoObject: function(gutter) {
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark var x = gutter.split(' ');
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng switch (x.length) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng case 1: x[1] = x[2] = x[3] = x[0]; break;
1eee170a5f6cf875d905524fea524c7c5c870aa0Erik Nordmark case 2: x[2] = x[0]; x[3] = x[1]; break;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng case 3: x[3] = x[1]; break;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng top : parseInt(x[0],10),
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng right : parseInt(x[1],10),
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng bottom: parseInt(x[2],10),
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng left : parseInt(x[3],10)
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng };
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng },
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng /**
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @method getDrag
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @description Get a valid Drag instance back from a Node or a selector string, false otherwise
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @param {String/Object} node The Node instance or Selector string to check for a valid Drag Object
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng * @return {Object}
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng */
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng getDrag: function(node) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng var drag = false,
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng n = Y.Node.get(node);
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (n instanceof Y.Node) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng Y.each(this._drags, function(v, k) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng if (n.compareTo(v.get('node'))) {
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng drag = v;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng });
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng return drag;
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng }
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng });
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng Y.namespace('DD');
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng Y.DD.DDM = new DDMBase();
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng
da14cebe459d3275048785f25bd869cb09b5307fEric Cheng