lib/yui/3.5.1/build/dd-ddm-base/dd-ddm-base.js

   1 /*
   2 YUI 3.5.1 (build 22)
   3 Copyright 2012 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7 YUI.add('dd-ddm-base', function(Y) {
   8
   9
  10     /**
  11      * Provides the base Drag Drop Manger required for making a Node draggable.
  12      * @module dd
  13      * @submodule dd-ddm-base
  14      */
  15      /**
  16      * Provides the base Drag Drop Manger required for making a Node draggable.
  17      * @class DDM
  18      * @extends Base
  19      * @constructor
  20      * @namespace DD
  21      */
  22
  23     var DDMBase = function() {
  24         DDMBase.superclass.constructor.apply(this, arguments);
  25     };
  26
  27     DDMBase.NAME = 'ddm';
  28
  29     DDMBase.ATTRS = {
  30         /**
  31         * @attribute dragCursor
  32         * @description The cursor to apply when dragging, if shimmed the shim will get the cursor.
  33         * @type String
  34         */
  35         dragCursor: {
  36             value: 'move'
  37         },
  38         /**
  39         * @attribute clickPixelThresh
  40         * @description The number of pixels to move to start a drag operation, default is 3.
  41         * @type Number
  42         */
  43         clickPixelThresh: {
  44             value: 3
  45         },
  46         /**
  47         * @attribute clickTimeThresh
  48         * @description The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
  49         * @type Number
  50         */
  51         clickTimeThresh: {
  52             value: 1000
  53         },
  54         /**
  55         * @attribute throttleTime
  56         * @description The number of milliseconds to throttle the mousemove event. Default: 150
  57         * @type Number
  58         */
  59         throttleTime: {
  60             //value: 150
  61             value: -1
  62         },
  63         /**
  64         * @attribute dragMode
  65         * @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.
  66         * @type String
  67         */
  68         dragMode: {
  69             value: 'point',
  70             setter: function(mode) {
  71                 this._setDragMode(mode);
  72                 return mode;
  73             }
  74         }
  75
  76     };
  77
  78     Y.extend(DDMBase, Y.Base, {
  79         _createPG: function() {},
  80         /**
  81         * @property _active
  82         * @description flag set when we activate our first drag, so DDM can start listening for events.
  83         * @type {Boolean}
  84         */
  85         _active: null,
  86         /**
  87         * @private
  88         * @method _setDragMode
  89         * @description Handler for dragMode attribute setter.
  90         * @param String/Number The Number value or the String for the DragMode to default all future drag instances to.
  91         * @return Number The Mode to be set
  92         */
  93         _setDragMode: function(mode) {
  94             if (mode === null) {
  95                 mode = Y.DD.DDM.get('dragMode');
  96             }
  97             switch (mode) {
  98                 case 1:
  99                 case 'intersect':
 100                     return 1;
 101                 case 2:
 102                 case 'strict':
 103                     return 2;
 104                 case 0:
 105                 case 'point':
 106                     return 0;
 107             }
 108             return 0;
 109         },
 110         /**
 111         * @property CSS_PREFIX
 112         * @description The PREFIX to attach to all DD CSS class names
 113         * @type {String}
 114         */
 115         CSS_PREFIX: Y.ClassNameManager.getClassName('dd'),
 116         _activateTargets: function() {},
 117         /**
 118         * @private
 119         * @property _drags
 120         * @description Holder for all registered drag elements.
 121         * @type {Array}
 122         */
 123         _drags: [],
 124         /**
 125         * @property activeDrag
 126         * @description A reference to the currently active draggable object.
 127         * @type {Drag}
 128         */
 129         activeDrag: false,
 130         /**
 131         * @private
 132         * @method _regDrag
 133         * @description Adds a reference to the drag object to the DDM._drags array, called in the constructor of Drag.
 134         * @param {Drag} d The Drag object
 135         */
 136         _regDrag: function(d) {
 137             if (this.getDrag(d.get('node'))) {
 138                 return false;
 139             }
 140
 141             if (!this._active) {
 142                 this._setupListeners();
 143             }
 144             this._drags.push(d);
 145             return true;
 146         },
 147         /**
 148         * @private
 149         * @method _unregDrag
 150         * @description Remove this drag object from the DDM._drags array.
 151         * @param {Drag} d The drag object.
 152         */
 153         _unregDrag: function(d) {
 154             var tmp = [];
 155             Y.each(this._drags, function(n, i) {
 156                 if (n !== d) {
 157                     tmp[tmp.length] = n;
 158                 }
 159             });
 160             this._drags = tmp;
 161         },
 162         /**
 163         * @private
 164         * @method _setupListeners
 165         * @description Add the document listeners.
 166         */
 167         _setupListeners: function() {
 168             this._createPG();
 169             this._active = true;
 170
 171             var doc = Y.one(Y.config.doc);
 172             doc.on('mousemove', Y.throttle(Y.bind(this._move, this), this.get('throttleTime')));
 173             doc.on('mouseup', Y.bind(this._end, this));
 174         },
 175         /**
 176         * @private
 177         * @method _start
 178         * @description Internal method used by Drag to signal the start of a drag operation
 179         */
 180         _start: function() {
 181             this.fire('ddm:start');
 182             this._startDrag();
 183         },
 184         /**
 185         * @private
 186         * @method _startDrag
 187         * @description Factory method to be overwritten by other DDM's
 188         * @param {Number} x The x position of the drag element
 189         * @param {Number} y The y position of the drag element
 190         * @param {Number} w The width of the drag element
 191         * @param {Number} h The height of the drag element
 192         */
 193         _startDrag: function() {},
 194         /**
 195         * @private
 196         * @method _endDrag
 197         * @description Factory method to be overwritten by other DDM's
 198         */
 199         _endDrag: function() {},
 200         _dropMove: function() {},
 201         /**
 202         * @private
 203         * @method _end
 204         * @description Internal method used by Drag to signal the end of a drag operation
 205         */
 206         _end: function() {
 207             if (this.activeDrag) {
 208                 this._endDrag();
 209                 this.fire('ddm:end');
 210                 this.activeDrag.end.call(this.activeDrag);
 211                 this.activeDrag = null;
 212             }
 213         },
 214         /**
 215         * @method stopDrag
 216         * @description Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
 217         * @return {Self}
 218         * @chainable
 219         */
 220         stopDrag: function() {
 221             if (this.activeDrag) {
 222                 this._end();
 223             }
 224             return this;
 225         },
 226         /**
 227         * @private
 228         * @method _move
 229         * @description Internal listener for the mousemove DOM event to pass to the Drag's move method.
 230         * @param {Event.Facade} ev The Dom mousemove Event
 231         */
 232         _move: function(ev) {
 233             if (this.activeDrag) {
 234                 this.activeDrag._move.call(this.activeDrag, ev);
 235                 this._dropMove();
 236             }
 237         },
 238         /**
 239         * //TODO Private, rename??...
 240         * @private
 241         * @method cssSizestoObject
 242         * @description Helper method to use to set the gutter from the attribute setter.
 243         * @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)
 244         * @return {Object} The gutter Object Literal.
 245         */
 246         cssSizestoObject: function(gutter) {
 247             var x = gutter.split(' ');
 248
 249             switch (x.length) {
 250                 case 1: x[1] = x[2] = x[3] = x[0]; break;
 251                 case 2: x[2] = x[0]; x[3] = x[1]; break;
 252                 case 3: x[3] = x[1]; break;
 253             }
 254
 255             return {
 256                 top   : parseInt(x[0],10),
 257                 right : parseInt(x[1],10),
 258                 bottom: parseInt(x[2],10),
 259                 left  : parseInt(x[3],10)
 260             };
 261         },
 262         /**
 263         * @method getDrag
 264         * @description Get a valid Drag instance back from a Node or a selector string, false otherwise
 265         * @param {String/Object} node The Node instance or Selector string to check for a valid Drag Object
 266         * @return {Object}
 267         */
 268         getDrag: function(node) {
 269             var drag = false,
 270                 n = Y.one(node);
 271             if (n instanceof Y.Node) {
 272                 Y.each(this._drags, function(v, k) {
 273                     if (n.compareTo(v.get('node'))) {
 274                         drag = v;
 275                     }
 276                 });
 277             }
 278             return drag;
 279         },
 280         /**
 281         * @method swapPosition
 282         * @description Swap the position of 2 nodes based on their CSS positioning.
 283         * @param {Node} n1 The first node to swap
 284         * @param {Node} n2 The first node to swap
 285         * @return {Node}
 286         */
 287         swapPosition: function(n1, n2) {
 288             n1 = Y.DD.DDM.getNode(n1);
 289             n2 = Y.DD.DDM.getNode(n2);
 290             var xy1 = n1.getXY(),
 291                 xy2 = n2.getXY();
 292
 293             n1.setXY(xy2);
 294             n2.setXY(xy1);
 295             return n1;
 296         },
 297         /**
 298         * @method getNode
 299         * @description Return a node instance from the given node, selector string or Y.Base extended object.
 300         * @param {Node/Object/String} n The node to resolve.
 301         * @return {Node}
 302         */
 303         getNode: function(n) {
 304             if (n instanceof Y.Node) {
 305                 return n;
 306             }
 307             if (n && n.get) {
 308                 if (Y.Widget && (n instanceof Y.Widget)) {
 309                     n = n.get('boundingBox');
 310                 } else {
 311                     n = n.get('node');
 312                 }
 313             } else {
 314                 n = Y.one(n);
 315             }
 316             return n;
 317         },
 318         /**
 319         * @method swapNode
 320         * @description Swap the position of 2 nodes based on their DOM location.
 321         * @param {Node} n1 The first node to swap
 322         * @param {Node} n2 The first node to swap
 323         * @return {Node}
 324         */
 325         swapNode: function(n1, n2) {
 326             n1 = Y.DD.DDM.getNode(n1);
 327             n2 = Y.DD.DDM.getNode(n2);
 328             var p = n2.get('parentNode'),
 329                 s = n2.get('nextSibling');
 330
 331             if (s == n1) {
 332                 p.insertBefore(n1, n2);
 333             } else if (n2 == n1.get('nextSibling')) {
 334                 p.insertBefore(n2, n1);
 335             } else {
 336                 n1.get('parentNode').replaceChild(n2, n1);
 337                 p.insertBefore(n1, s);
 338             }
 339             return n1;
 340         }
 341     });
 342
 343     Y.namespace('DD');
 344     Y.DD.DDM = new DDMBase();
 345
 346     /**
 347     * @event ddm:start
 348     * @description Fires from the DDM before all drag events fire.
 349     * @type {CustomEvent}
 350     */
 351     /**
 352     * @event ddm:end
 353     * @description Fires from the DDM after the DDM finishes, before the drag end events.
 354     * @type {CustomEvent}
 355     */
 356
 357
 358
 359
 360 }, '3.5.1' ,{skinnable:false, requires:['node', 'base', 'yui-throttle', 'classnamemanager']});