jssource/src_files/include/javascript/yui3/build/dd/dd-ddm-base.js

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