[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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.17.2', {"requires": ["slider-base"]});