1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 Yahoo! Inc. All rights reserved.

     4 Licensed under the BSD License.

     5 http://yuilibrary.com/license/

     6 */

     7 

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

     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         * The cursor to apply when dragging, if shimmed the shim will get the cursor.

    33         * @attribute dragCursor

    34         * @type String

    35         */

    36         dragCursor: {

    37             value: 'move'

    38         },

    39         /**

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

    41         * @attribute clickPixelThresh

    42         * @type Number

    43         */

    44         clickPixelThresh: {

    45             value: 3

    46         },

    47         /**

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

    49         * @attribute clickTimeThresh

    50         * @type Number

    51         */

    52         clickTimeThresh: {

    53             value: 1000

    54         },

    55         /**

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

    57         * @attribute throttleTime

    58         * @type Number

    59         */

    60         throttleTime: {

    61             //value: 150

    62             value: -1

    63         },

    64         /**

    65         * 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         * @attribute dragMode

    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         * flag set when we activate our first drag, so DDM can start listening for events.

    83         * @property _active

    84         * @type {Boolean}

    85         */

    86         _active: null,

    87         /**

    88         * Handler for dragMode attribute setter.

    89         * @private

    90         * @method _setDragMode

    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         * The PREFIX to attach to all DD CSS class names

   113         * @property CSS_PREFIX

   114         * @type {String}

   115         */

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

   117         _activateTargets: function() {},

   118         /**

   119         * Holder for all registered drag elements.

   120         * @private

   121         * @property _drags

   122         * @type {Array}

   123         */

   124         _drags: [],

   125         /**

   126         * A reference to the currently active draggable object.

   127         * @property activeDrag

   128         * @type {Drag}

   129         */

   130         activeDrag: false,

   131         /**

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

   133         * @private

   134         * @method _regDrag

   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         * Remove this drag object from the DDM._drags array.

   150         * @private

   151         * @method _unregDrag

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

   153         */

   154         _unregDrag: function(d) {

   155             var tmp = [];

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

   157                 if (n !== d) {

   158                     tmp[tmp.length] = n;

   159                 }

   160             });

   161             this._drags = tmp;

   162         },

   163         /**

   164         * Add the document listeners.

   165         * @private

   166         * @method _setupListeners

   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._docMove, this), this.get('throttleTime')));

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

   175         },

   176         /**

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

   178         * @private

   179         * @method _start

   180         */

   181         _start: function() {

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

   183             this._startDrag();

   184         },

   185         /**

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

   187         * @private

   188         * @method _startDrag

   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         * Factory method to be overwritten by other DDM's

   197         * @private

   198         * @method _endDrag

   199         */

   200         _endDrag: function() {},

   201         _dropMove: function() {},

   202         /**

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

   204         * @private

   205         * @method _end

   206         */

   207         _end: function() {

   208             if (this.activeDrag) {

   209                 this._shimming = false;

   210                 this._endDrag();

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

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

   213                 this.activeDrag = null;

   214             }

   215         },

   216         /**

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

   218         * @method stopDrag

   219         * @return {Self}

   220         * @chainable

   221         */

   222         stopDrag: function() {

   223             if (this.activeDrag) {

   224                 this._end();

   225             }

   226             return this;

   227         },

   228         /**

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

   230         * @private

   231         * @property _shimming

   232         * @see _docMove

   233         * @type {Boolean}

   234         */

   235         _shimming: false,

   236         /**

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

   238         * @private

   239         * @method _docMove

   240         * @param {Event.Facade} ev The Dom mousemove Event

   241         */

   242         _docMove: function(ev) {

   243             if (!this._shimming) {

   244                 this._move(ev);

   245             }

   246         },

   247         /**

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

   249         * @private

   250         * @method _move

   251         * @param {Event.Facade} ev The Dom mousemove Event

   252         */

   253         _move: function(ev) {

   254             if (this.activeDrag) {

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

   256                 this._dropMove();

   257             }

   258         },

   259         /**

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

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

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

   263         * @private

   264         * @method cssSizestoObject

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

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

   267         */

   268         cssSizestoObject: function(gutter) {

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

   270 

   271             switch (x.length) {

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

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

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

   275             }

   276 

   277             return {

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

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

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

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

   282             };

   283         },

   284         /**

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

   286         * @method getDrag

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

   288         * @return {Object}

   289         */

   290         getDrag: function(node) {

   291             var drag = false,

   292                 n = Y.one(node);

   293             if (n instanceof Y.Node) {

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

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

   296                         drag = v;

   297                     }

   298                 });

   299             }

   300             return drag;

   301         },

   302         /**

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

   304         * @method swapPosition

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

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

   307         * @return {Node}

   308         */

   309         swapPosition: function(n1, n2) {

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

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

   312             var xy1 = n1.getXY(),

   313                 xy2 = n2.getXY();

   314 

   315             n1.setXY(xy2);

   316             n2.setXY(xy1);

   317             return n1;

   318         },

   319         /**

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

   321         * @method getNode

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

   323         * @return {Node}

   324         */

   325         getNode: function(n) {

   326             if (n instanceof Y.Node) {

   327                 return n;

   328             }

   329             if (n && n.get) {

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

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

   332                 } else {

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

   334                 }

   335             } else {

   336                 n = Y.one(n);

   337             }

   338             return n;

   339         },

   340         /**

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

   342         * @method swapNode

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

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

   345         * @return {Node}

   346         */

   347         swapNode: function(n1, n2) {

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

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

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

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

   352 

   353             if (s === n1) {

   354                 p.insertBefore(n1, n2);

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

   356                 p.insertBefore(n2, n1);

   357             } else {

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

   359                 p.insertBefore(n1, s);

   360             }

   361             return n1;

   362         }

   363     });

   364 

   365     Y.namespace('DD');

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

   367 

   368     /**

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

   370     * @event ddm:start

   371     * @type {CustomEvent}

   372     */

   373     /**

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

   375     * @event ddm:end

   376     * @type {CustomEvent}

   377     */

   378 

   379 

   380 

   381 

   382 }, '3.10.3', {"requires": ["node", "base", "yui-throttle", "classnamemanager"]});