1 YUI.add('clickable-rail', function (Y, NAME) {

     2 

     3 /**

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

     5  * movement.

     6  *

     7  * @module slider

     8  * @submodule clickable-rail

     9  */

    10 

    11 /**

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

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

    14  *

    15  * @class ClickableRail

    16  */

    17 function ClickableRail() {

    18     this._initClickableRail();

    19 }

    20 

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

    22 

    23     // Prototype methods added to host class

    24     prototype: {

    25 

    26         /**

    27          * Initializes the internal state and sets up events.

    28          *

    29          * @method _initClickableRail

    30          * @protected

    31          */

    32         _initClickableRail: function () {

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

    34 

    35             /**

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

    37              * triggers the thumb positioning.  Use

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

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

    40              * the thumb positioning.

    41              *

    42              * @event railMouseDown

    43              * @preventable _defRailMouseDownFn

    44              */

    45             this.publish('railMouseDown', {

    46                 defaultFn: this._defRailMouseDownFn

    47             });

    48 

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

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

    51         },

    52 

    53         /**

    54          * Attaches DOM event subscribers to support rail interaction.

    55          *

    56          * @method _bindClickableRail

    57          * @protected

    58          */

    59         _bindClickableRail: function () {

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

    61 

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

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

    64         },

    65 

    66         /**

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

    68          *

    69          * @method _unbindClickableRail

    70          * @protected

    71          */

    72         _unbindClickableRail: function () {

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

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

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

    76 

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

    78             }

    79         },

    80 

    81         /**

    82          * Dispatches the railMouseDown event.

    83          *

    84          * @method _onRailMouseDown

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

    86          * @protected

    87          */

    88         _onRailMouseDown: function (e) {

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

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

    91                 this.thumb.focus();

    92             }

    93         },

    94 

    95         /**

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

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

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

    99          *

   100          * @method _defRailMouseDownFn

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

   102          * @protected

   103          */

   104         _defRailMouseDownFn: function (e) {

   105             e = e.ev;

   106 

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

   108             // to someday support multi-thumb sliders

   109             var dd     = this._resolveThumb(e),

   110                 i      = this._key.xyIndex,

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

   112                 thumb,

   113                 thumbSize,

   114                 xy;

   115 

   116             if (dd) {

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

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

   119 

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

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

   122 

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

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

   125 

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

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

   128                 xy = Math.min(

   129                         Math.max(xy, 0),

   130                         (length - thumbSize));

   131 

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

   133 

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

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

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

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

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

   139                 // Slider moves).

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

   141 

   142                 // Delegate to DD's natural behavior

   143                 dd._handleMouseDownEvent(e);

   144 

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

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

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

   148             }

   149         },

   150 

   151         /**

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

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

   154          * the thumb stored by the Slider.

   155          *

   156          * @method _resolveThumb

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

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

   159          * @protected

   160          */

   161         _resolveThumb: function (e) {

   162             /* Temporary workaround

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

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

   165 

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

   167              */

   168             return this._dd;

   169         },

   170 

   171         /**

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

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

   174          *

   175          * @method _getThumbDestination

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

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

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

   179          * @protected

   180          */

   181         _getThumbDestination: function (e, node) {

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

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

   184 

   185             // center

   186             return [

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

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

   189             ];

   190         }

   191 

   192     },

   193 

   194     // Static properties added onto host class

   195     ATTRS: {

   196         /**

   197          * Enable or disable clickable rail support.

   198          *

   199          * @attribute clickableRail

   200          * @type {Boolean}

   201          * @default true

   202          */

   203         clickableRail: {

   204             value: true,

   205             validator: Y.Lang.isBoolean

   206         }

   207     }

   208 

   209 }, true);

   210 

   211 

   212 }, '@VERSION@', {"requires": ["slider-base"]});