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('clickable-rail', function (Y, NAME) {

     9 

    10 /**

    11  * Adds support for mouse interaction with the Slider rail triggering thumb

    12  * movement.

    13  *

    14  * @module slider

    15  * @submodule clickable-rail

    16  */

    17 

    18 /**

    19  * Slider extension that allows clicking on the Slider's rail element,

    20  * triggering the thumb to align with the location of the click.

    21  *

    22  * @class ClickableRail

    23  */

    24 function ClickableRail() {

    25     this._initClickableRail();

    26 }

    27 

    28 Y.ClickableRail = Y.mix(ClickableRail, {

    29 

    30     // Prototype methods added to host class

    31     prototype: {

    32 

    33         /**

    34          * Initializes the internal state and sets up events.

    35          *

    36          * @method _initClickableRail

    37          * @protected

    38          */

    39         _initClickableRail: function () {

    40             this._evtGuid = this._evtGuid || (Y.guid() + '|');

    41 

    42             /**

    43              * Broadcasts when the rail has received a mousedown event and

    44              * triggers the thumb positioning.  Use

    45              * <code>e.preventDefault()</code> or

    46              * <code>set(&quot;clickableRail&quot;, false)</code> to prevent

    47              * the thumb positioning.

    48              *

    49              * @event railMouseDown

    50              * @preventable _defRailMouseDownFn

    51              */

    52             this.publish('railMouseDown', {

    53                 defaultFn: this._defRailMouseDownFn

    54             });

    55 

    56             this.after('render', this._bindClickableRail);

    57             this.on('destroy', this._unbindClickableRail);

    58         },

    59 

    60         /** 

    61          * Attaches DOM event subscribers to support rail interaction.

    62          *

    63          * @method _bindClickableRail

    64          * @protected

    65          */

    66         _bindClickableRail: function () {

    67             this._dd.addHandle(this.rail);

    68 

    69             this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,

    70                 Y.bind(this._onRailMouseDown, this));

    71         },

    72 

    73         /**

    74          * Detaches DOM event subscribers for cleanup/destruction cycle.

    75          *

    76          * @method _unbindClickableRail

    77          * @protected

    78          */

    79         _unbindClickableRail: function () {

    80             if (this.get('rendered')) {

    81                 var contentBox = this.get('contentBox'),

    82                     rail = contentBox.one('.' + this.getClassName('rail'));

    83 

    84                 rail.detach(this.evtGuid + '*');

    85             }

    86         },

    87 

    88         /**

    89          * Dispatches the railMouseDown event.

    90          *

    91          * @method _onRailMouseDown

    92          * @param e {DOMEvent} the mousedown event object

    93          * @protected

    94          */

    95         _onRailMouseDown: function (e) {

    96             if (this.get('clickableRail') && !this.get('disabled')) {

    97                 this.fire('railMouseDown', { ev: e });

    98                 this.thumb.focus();

    99             }

   100         },

   101 

   102         /**

   103          * Default behavior for the railMouseDown event.  Centers the thumb at

   104          * the click location and passes control to the DDM to behave as though

   105          * the thumb itself were clicked in preparation for a drag operation.

   106          *

   107          * @method _defRailMouseDownFn

   108          * @param e {Event} the EventFacade for the railMouseDown custom event

   109          * @protected

   110          */

   111         _defRailMouseDownFn: function (e) {

   112             e = e.ev;

   113 

   114             // Logic that determines which thumb should be used is abstracted

   115             // to someday support multi-thumb sliders

   116             var dd     = this._resolveThumb(e),

   117                 i      = this._key.xyIndex,

   118                 length = parseFloat(this.get('length'), 10),

   119                 thumb,

   120                 thumbSize,

   121                 xy;

   122                 

   123             if (dd) {

   124                 thumb = dd.get('dragNode');

   125                 thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);

   126 

   127                 // Step 1. Allow for aligning to thumb center or edge, etc

   128                 xy = this._getThumbDestination(e, thumb);

   129 

   130                 // Step 2. Remove page offsets to give just top/left style val

   131                 xy = xy[ i ] - this.rail.getXY()[i];

   132 

   133                 // Step 3. Constrain within the rail in case of attempt to

   134                 // center the thumb when clicking on the end of the rail

   135                 xy = Math.min(

   136                         Math.max(xy, 0),

   137                         (length - thumbSize));

   138 

   139                 this._uiMoveThumb(xy, { source: 'rail' });

   140 

   141                 // Set e.target for DD's IE9 patch which calls

   142                 // e.target._node.setCapture() to allow imgs to be dragged.

   143                 // Without this, setCapture is called from the rail and rail

   144                 // clicks on other Sliders may have their thumb movements

   145                 // overridden by a different Slider (the thumb on the wrong

   146                 // Slider moves).

   147                 e.target = this.thumb.one('img') || this.thumb;

   148 

   149                 // Delegate to DD's natural behavior

   150                 dd._handleMouseDownEvent(e);

   151 

   152                 // TODO: this won't trigger a slideEnd if the rail is clicked

   153                 // check if dd._move(e); dd._dragThreshMet = true; dd.start();

   154                 // will do the trick.  Is that even a good idea?

   155             }

   156         },

   157 

   158         /**

   159          * Resolves which thumb to actuate if any.  Override this if you want to

   160          * support multiple thumbs.  By default, returns the Drag instance for

   161          * the thumb stored by the Slider.

   162          *

   163          * @method _resolveThumb

   164          * @param e {DOMEvent} the mousedown event object

   165          * @return {DD.Drag} the Drag instance that should be moved

   166          * @protected

   167          */

   168         _resolveThumb: function (e) {

   169             /* Temporary workaround

   170             var primaryOnly = this._dd.get('primaryButtonOnly'),

   171                 validClick  = !primaryOnly || e.button <= 1;

   172 

   173             return (validClick) ? this._dd : null;

   174              */

   175             return this._dd;

   176         },

   177 

   178         /**

   179          * Calculates the top left position the thumb should be moved to to

   180          * align the click XY with the center of the specified node.

   181          *

   182          * @method _getThumbDestination

   183          * @param e {DOMEvent} The mousedown event object

   184          * @param node {Node} The node to position

   185          * @return {Array} the [top, left] pixel position of the destination

   186          * @protected

   187          */

   188         _getThumbDestination: function (e, node) {

   189             var offsetWidth  = node.get('offsetWidth'),

   190                 offsetHeight = node.get('offsetHeight');

   191 

   192             // center

   193             return [

   194                 (e.pageX - Math.round((offsetWidth  / 2))),

   195                 (e.pageY - Math.round((offsetHeight / 2)))

   196             ];

   197         }

   198 

   199     },

   200 

   201     // Static properties added onto host class

   202     ATTRS: {

   203         /**

   204          * Enable or disable clickable rail support.

   205          *

   206          * @attribute clickableRail

   207          * @type {Boolean}

   208          * @default true

   209          */

   210         clickableRail: {

   211             value: true,

   212             validator: Y.Lang.isBoolean

   213         }

   214     }

   215 

   216 }, true);

   217 

   218 

   219 }, '3.10.3', {"requires": ["slider-base"]});