1 YUI.add('dd-ddm-base', function (Y, NAME) {

     2 

     3 

     4     /**

     5      * Provides the base Drag Drop Manager required for making a Node draggable.

     6      * @module dd

     7      * @submodule dd-ddm-base

     8      */

     9      /**

    10      * Provides the base Drag Drop Manager required for making a Node draggable.

    11      * @class DDM

    12      * @extends Base

    13      * @constructor

    14      * @namespace DD

    15      */

    16 

    17     var DDMBase = function() {

    18         DDMBase.superclass.constructor.apply(this, arguments);

    19     };

    20 

    21     DDMBase.NAME = 'ddm';

    22 

    23     DDMBase.ATTRS = {

    24         /**

    25         * The cursor to apply when dragging, if shimmed the shim will get the cursor.

    26         * @attribute dragCursor

    27         * @type String

    28         */

    29         dragCursor: {

    30             value: 'move'

    31         },

    32         /**

    33         * The number of pixels to move to start a drag operation, default is 3.

    34         * @attribute clickPixelThresh

    35         * @type Number

    36         */

    37         clickPixelThresh: {

    38             value: 3

    39         },

    40         /**

    41         * The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.

    42         * @attribute clickTimeThresh

    43         * @type Number

    44         */

    45         clickTimeThresh: {

    46             value: 1000

    47         },

    48         /**

    49         * The number of milliseconds to throttle the mousemove event. Default: 150

    50         * @attribute throttleTime

    51         * @type Number

    52         */

    53         throttleTime: {

    54             //value: 150

    55             value: -1

    56         },

    57         /**

    58         * This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of all future Drag instances.

    59         * @attribute dragMode

    60         * @type String

    61         */

    62         dragMode: {

    63             value: 'point',

    64             setter: function(mode) {

    65                 this._setDragMode(mode);

    66                 return mode;

    67             }

    68         }

    69 

    70     };

    71 

    72     Y.extend(DDMBase, Y.Base, {

    73         _createPG: function() {},

    74         /**

    75         * flag set when we activate our first drag, so DDM can start listening for events.

    76         * @property _active

    77         * @type {Boolean}

    78         */

    79         _active: null,

    80         /**

    81         * Handler for dragMode attribute setter.

    82         * @private

    83         * @method _setDragMode

    84         * @param {String|Number} mode The Number value or the String for the DragMode to default all future drag instances to.

    85         * @return Number The Mode to be set

    86         */

    87         _setDragMode: function(mode) {

    88             if (mode === null) {

    89                 mode = Y.DD.DDM.get('dragMode');

    90             }

    91             switch (mode) {

    92                 case 1:

    93                 case 'intersect':

    94                     return 1;

    95                 case 2:

    96                 case 'strict':

    97                     return 2;

    98                 case 0:

    99                 case 'point':

   100                     return 0;

   101             }

   102             return 0;

   103         },

   104         /**

   105         * The PREFIX to attach to all DD CSS class names

   106         * @property CSS_PREFIX

   107         * @type {String}

   108         */

   109         CSS_PREFIX: Y.ClassNameManager.getClassName('dd'),

   110         _activateTargets: function() {},

   111         /**

   112         * Holder for all registered drag elements.

   113         * @private

   114         * @property _drags

   115         * @type {Array}

   116         */

   117         _drags: [],

   118         /**

   119         * A reference to the currently active draggable object.

   120         * @property activeDrag

   121         * @type {Drag}

   122         */

   123         activeDrag: false,

   124         /**

   125         * Adds a reference to the drag object to the DDM._drags array, called in the constructor of Drag.

   126         * @private

   127         * @method _regDrag

   128         * @param {Drag} d The Drag object

   129         */

   130         _regDrag: function(d) {

   131             if (this.getDrag(d.get('node'))) {

   132                 return false;

   133             }

   134 

   135             if (!this._active) {

   136                 this._setupListeners();

   137             }

   138             this._drags.push(d);

   139             return true;

   140         },

   141         /**

   142         * Remove this drag object from the DDM._drags array.

   143         * @private

   144         * @method _unregDrag

   145         * @param {Drag} d The drag object.

   146         */

   147         _unregDrag: function(d) {

   148             var tmp = [];

   149             Y.Array.each(this._drags, function(n) {

   150                 if (n !== d) {

   151                     tmp[tmp.length] = n;

   152                 }

   153             });

   154             this._drags = tmp;

   155         },

   156         /**

   157         * Add the document listeners.

   158         * @private

   159         * @method _setupListeners

   160         */

   161         _setupListeners: function() {

   162             this._createPG();

   163             this._active = true;

   164 

   165             var doc = Y.one(Y.config.doc);

   166             doc.on('mousemove', Y.throttle(Y.bind(this._docMove, this), this.get('throttleTime')));

   167             doc.on('mouseup', Y.bind(this._end, this));

   168         },

   169         /**

   170         * Internal method used by Drag to signal the start of a drag operation

   171         * @private

   172         * @method _start

   173         */

   174         _start: function() {

   175             this.fire('ddm:start');

   176             this._startDrag();

   177         },

   178         /**

   179         * Factory method to be overwritten by other DDM's

   180         * @private

   181         * @method _startDrag

   182         * @param {Number} x The x position of the drag element

   183         * @param {Number} y The y position of the drag element

   184         * @param {Number} w The width of the drag element

   185         * @param {Number} h The height of the drag element

   186         */

   187         _startDrag: function() {},

   188         /**

   189         * Factory method to be overwritten by other DDM's

   190         * @private

   191         * @method _endDrag

   192         */

   193         _endDrag: function() {},

   194         _dropMove: function() {},

   195         /**

   196         * Internal method used by Drag to signal the end of a drag operation

   197         * @private

   198         * @method _end

   199         */

   200         _end: function() {

   201             if (this.activeDrag) {

   202                 this._shimming = false;

   203                 this._endDrag();

   204                 this.fire('ddm:end');

   205                 this.activeDrag.end.call(this.activeDrag);

   206                 this.activeDrag = null;

   207             }

   208         },

   209         /**

   210         * Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.

   211         * @method stopDrag

   212         * @chainable

   213         */

   214         stopDrag: function() {

   215             if (this.activeDrag) {

   216                 this._end();

   217             }

   218             return this;

   219         },

   220         /**

   221         * Set to true when drag starts and useShim is true. Used in pairing with _docMove

   222         * @private

   223         * @property _shimming

   224         * @see _docMove

   225         * @type {Boolean}

   226         */

   227         _shimming: false,

   228         /**

   229         * Internal listener for the mousemove on Document. Checks if the shim is in place to only call _move once per mouse move

   230         * @private

   231         * @method _docMove

   232         * @param {EventFacade} ev The Dom mousemove Event

   233         */

   234         _docMove: function(ev) {

   235             if (!this._shimming) {

   236                 this._move(ev);

   237             }

   238         },

   239         /**

   240         * Internal listener for the mousemove DOM event to pass to the Drag's move method.

   241         * @private

   242         * @method _move

   243         * @param {EventFacade} ev The Dom mousemove Event

   244         */

   245         _move: function(ev) {

   246             if (this.activeDrag) {

   247                 this.activeDrag._move.call(this.activeDrag, ev);

   248                 this._dropMove();

   249             }

   250         },

   251         /**

   252         * //TODO Private, rename??...

   253         * Helper method to use to set the gutter from the attribute setter.

   254         * 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)

   255         * @private

   256         * @method cssSizestoObject

   257         * @param {String} gutter CSS style string for gutter

   258         * @return {Object} The gutter Object Literal.

   259         */

   260         cssSizestoObject: function(gutter) {

   261             var x = gutter.split(' ');

   262 

   263             switch (x.length) {

   264                 case 1: x[1] = x[2] = x[3] = x[0]; break;

   265                 case 2: x[2] = x[0]; x[3] = x[1]; break;

   266                 case 3: x[3] = x[1]; break;

   267             }

   268 

   269             return {

   270                 top   : parseInt(x[0],10),

   271                 right : parseInt(x[1],10),

   272                 bottom: parseInt(x[2],10),

   273                 left  : parseInt(x[3],10)

   274             };

   275         },

   276         /**

   277         * Get a valid Drag instance back from a Node or a selector string, false otherwise

   278         * @method getDrag

   279         * @param {String/Object} node The Node instance or Selector string to check for a valid Drag Object

   280         * @return {Object}

   281         */

   282         getDrag: function(node) {

   283             var drag = false,

   284                 n = Y.one(node);

   285             if (n instanceof Y.Node) {

   286                 Y.Array.each(this._drags, function(v) {

   287                     if (n.compareTo(v.get('node'))) {

   288                         drag = v;

   289                     }

   290                 });

   291             }

   292             return drag;

   293         },

   294         /**

   295         * Swap the position of 2 nodes based on their CSS positioning.

   296         * @method swapPosition

   297         * @param {Node} n1 The first node to swap

   298         * @param {Node} n2 The first node to swap

   299         * @return {Node}

   300         */

   301         swapPosition: function(n1, n2) {

   302             n1 = Y.DD.DDM.getNode(n1);

   303             n2 = Y.DD.DDM.getNode(n2);

   304             var xy1 = n1.getXY(),

   305                 xy2 = n2.getXY();

   306 

   307             n1.setXY(xy2);

   308             n2.setXY(xy1);

   309             return n1;

   310         },

   311         /**

   312         * Return a node instance from the given node, selector string or Y.Base extended object.

   313         * @method getNode

   314         * @param {Node/Object/String} n The node to resolve.

   315         * @return {Node}

   316         */

   317         getNode: function(n) {

   318             if (n instanceof Y.Node) {

   319                 return n;

   320             }

   321             if (n && n.get) {

   322                 if (Y.Widget && (n instanceof Y.Widget)) {

   323                     n = n.get('boundingBox');

   324                 } else {

   325                     n = n.get('node');

   326                 }

   327             } else {

   328                 n = Y.one(n);

   329             }

   330             return n;

   331         },

   332         /**

   333         * Swap the position of 2 nodes based on their DOM location.

   334         * @method swapNode

   335         * @param {Node} n1 The first node to swap

   336         * @param {Node} n2 The first node to swap

   337         * @return {Node}

   338         */

   339         swapNode: function(n1, n2) {

   340             n1 = Y.DD.DDM.getNode(n1);

   341             n2 = Y.DD.DDM.getNode(n2);

   342             var p = n2.get('parentNode'),

   343                 s = n2.get('nextSibling');

   344 

   345             if (s === n1) {

   346                 p.insertBefore(n1, n2);

   347             } else if (n2 === n1.get('nextSibling')) {

   348                 p.insertBefore(n2, n1);

   349             } else {

   350                 n1.get('parentNode').replaceChild(n2, n1);

   351                 p.insertBefore(n1, s);

   352             }

   353             return n1;

   354         }

   355     });

   356 

   357     Y.namespace('DD');

   358     Y.DD.DDM = new DDMBase();

   359 

   360     /**

   361     * Fires from the DDM before all drag events fire.

   362     * @event ddm:start

   363     * @type {CustomEvent}

   364     */

   365     /**

   366     * Fires from the DDM after the DDM finishes, before the drag end events.

   367     * @event ddm:end

   368     * @type {CustomEvent}

   369     */

   370 

   371 

   372 

   373 

   374 }, '@VERSION@', {"requires": ["node", "base", "yui-throttle", "classnamemanager"]});