yaffs.net Git - yaffs-website/blob - node_modules/video.js/es5/slider/slider.js

   1 'use strict';
   2
   3 exports.__esModule = true;
   4
   5 var _component = require('../component.js');
   6
   7 var _component2 = _interopRequireDefault(_component);
   8
   9 var _dom = require('../utils/dom.js');
  10
  11 var Dom = _interopRequireWildcard(_dom);
  12
  13 var _obj = require('../utils/obj');
  14
  15 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  16
  17 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  18
  19 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  20
  21 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  22
  23 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
  24                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * @file slider.js
  25                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
  26
  27
  28 /**
  29  * The base functionality for a slider. Can be vertical or horizontal.
  30  * For instance the volume bar or the seek bar on a video is a slider.
  31  *
  32  * @extends Component
  33  */
  34 var Slider = function (_Component) {
  35   _inherits(Slider, _Component);
  36
  37   /**
  38    * Create an instance of this class
  39    *
  40    * @param {Player} player
  41    *        The `Player` that this class should be attached to.
  42    *
  43    * @param {Object} [options]
  44    *        The key/value store of player options.
  45    */
  46   function Slider(player, options) {
  47     _classCallCheck(this, Slider);
  48
  49     // Set property names to bar to match with the child Slider class is looking for
  50     var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
  51
  52     _this.bar = _this.getChild(_this.options_.barName);
  53
  54     // Set a horizontal or vertical class on the slider depending on the slider type
  55     _this.vertical(!!_this.options_.vertical);
  56
  57     _this.on('mousedown', _this.handleMouseDown);
  58     _this.on('touchstart', _this.handleMouseDown);
  59     _this.on('focus', _this.handleFocus);
  60     _this.on('blur', _this.handleBlur);
  61     _this.on('click', _this.handleClick);
  62
  63     _this.on(player, 'controlsvisible', _this.update);
  64     _this.on(player, _this.playerEvent, _this.update);
  65     return _this;
  66   }
  67
  68   /**
  69    * Create the `Button`s DOM element.
  70    *
  71    * @param {string} type
  72    *        Type of element to create.
  73    *
  74    * @param {Object} [props={}]
  75    *        List of properties in Object form.
  76    *
  77    * @param {Object} [attributes={}]
  78    *        list of attributes in Object form.
  79    *
  80    * @return {Element}
  81    *         The element that gets created.
  82    */
  83
  84
  85   Slider.prototype.createEl = function createEl(type) {
  86     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  87     var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  88
  89     // Add the slider element class to all sub classes
  90     props.className = props.className + ' vjs-slider';
  91     props = (0, _obj.assign)({
  92       tabIndex: 0
  93     }, props);
  94
  95     attributes = (0, _obj.assign)({
  96       'role': 'slider',
  97       'aria-valuenow': 0,
  98       'aria-valuemin': 0,
  99       'aria-valuemax': 100,
 100       'tabIndex': 0
 101     }, attributes);
 102
 103     return _Component.prototype.createEl.call(this, type, props, attributes);
 104   };
 105
 106   /**
 107    * Handle `mousedown` or `touchstart` events on the `Slider`.
 108    *
 109    * @param {EventTarget~Event} event
 110    *        `mousedown` or `touchstart` event that triggered this function
 111    *
 112    * @listens mousedown
 113    * @listens touchstart
 114    * @fires Slider#slideractive
 115    */
 116
 117
 118   Slider.prototype.handleMouseDown = function handleMouseDown(event) {
 119     var doc = this.bar.el_.ownerDocument;
 120
 121     event.preventDefault();
 122     Dom.blockTextSelection();
 123
 124     this.addClass('vjs-sliding');
 125     /**
 126      * Triggered when the slider is in an active state
 127      *
 128      * @event Slider#slideractive
 129      * @type {EventTarget~Event}
 130      */
 131     this.trigger('slideractive');
 132
 133     this.on(doc, 'mousemove', this.handleMouseMove);
 134     this.on(doc, 'mouseup', this.handleMouseUp);
 135     this.on(doc, 'touchmove', this.handleMouseMove);
 136     this.on(doc, 'touchend', this.handleMouseUp);
 137
 138     this.handleMouseMove(event);
 139   };
 140
 141   /**
 142    * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
 143    * The `mousemove` and `touchmove` events will only only trigger this function during
 144    * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
 145    * {@link Slider#handleMouseUp}.
 146    *
 147    * @param {EventTarget~Event} event
 148    *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
 149    *        this function
 150    *
 151    * @listens mousemove
 152    * @listens touchmove
 153    */
 154
 155
 156   Slider.prototype.handleMouseMove = function handleMouseMove(event) {};
 157
 158   /**
 159    * Handle `mouseup` or `touchend` events on the `Slider`.
 160    *
 161    * @param {EventTarget~Event} event
 162    *        `mouseup` or `touchend` event that triggered this function.
 163    *
 164    * @listens touchend
 165    * @listens mouseup
 166    * @fires Slider#sliderinactive
 167    */
 168
 169
 170   Slider.prototype.handleMouseUp = function handleMouseUp() {
 171     var doc = this.bar.el_.ownerDocument;
 172
 173     Dom.unblockTextSelection();
 174
 175     this.removeClass('vjs-sliding');
 176     /**
 177      * Triggered when the slider is no longer in an active state.
 178      *
 179      * @event Slider#sliderinactive
 180      * @type {EventTarget~Event}
 181      */
 182     this.trigger('sliderinactive');
 183
 184     this.off(doc, 'mousemove', this.handleMouseMove);
 185     this.off(doc, 'mouseup', this.handleMouseUp);
 186     this.off(doc, 'touchmove', this.handleMouseMove);
 187     this.off(doc, 'touchend', this.handleMouseUp);
 188
 189     this.update();
 190   };
 191
 192   /**
 193    * Update the progress bar of the `Slider`.
 194    */
 195
 196
 197   Slider.prototype.update = function update() {
 198     // In VolumeBar init we have a setTimeout for update that pops and update to the end of the
 199     // execution stack. The player is destroyed before then update will cause an error
 200     if (!this.el_) {
 201       return;
 202     }
 203
 204     // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
 205     // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
 206     // var progress =  (this.player_.scrubbing()) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();
 207     var progress = this.getPercent();
 208     var bar = this.bar;
 209
 210     // If there's no bar...
 211     if (!bar) {
 212       return;
 213     }
 214
 215     // Protect against no duration and other division issues
 216     if (typeof progress !== 'number' || progress !== progress || progress < 0 || progress === Infinity) {
 217       progress = 0;
 218     }
 219
 220     // Convert to a percentage for setting
 221     var percentage = (progress * 100).toFixed(2) + '%';
 222
 223     // Set the new bar width or height
 224     if (this.vertical()) {
 225       bar.el().style.height = percentage;
 226     } else {
 227       bar.el().style.width = percentage;
 228     }
 229   };
 230
 231   /**
 232    * Calculate distance for slider
 233    *
 234    * @param {EventTarget~Event} event
 235    *        The event that caused this function to run.
 236    *
 237    * @return {number}
 238    *         The current position of the Slider.
 239    *         - postition.x for vertical `Slider`s
 240    *         - postition.y for horizontal `Slider`s
 241    */
 242
 243
 244   Slider.prototype.calculateDistance = function calculateDistance(event) {
 245     var position = Dom.getPointerPosition(this.el_, event);
 246
 247     if (this.vertical()) {
 248       return position.y;
 249     }
 250     return position.x;
 251   };
 252
 253   /**
 254    * Handle a `focus` event on this `Slider`.
 255    *
 256    * @param {EventTarget~Event} event
 257    *        The `focus` event that caused this function to run.
 258    *
 259    * @listens focus
 260    */
 261
 262
 263   Slider.prototype.handleFocus = function handleFocus() {
 264     this.on(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress);
 265   };
 266
 267   /**
 268    * Handle a `keydown` event on the `Slider`. Watches for left, rigth, up, and down
 269    * arrow keys. This function will only be called when the slider has focus. See
 270    * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
 271    *
 272    * @param {EventTarget~Event} event
 273    *        the `keydown` event that caused this function to run.
 274    *
 275    * @listens keydown
 276    */
 277
 278
 279   Slider.prototype.handleKeyPress = function handleKeyPress(event) {
 280     // Left and Down Arrows
 281     if (event.which === 37 || event.which === 40) {
 282       event.preventDefault();
 283       this.stepBack();
 284
 285       // Up and Right Arrows
 286     } else if (event.which === 38 || event.which === 39) {
 287       event.preventDefault();
 288       this.stepForward();
 289     }
 290   };
 291
 292   /**
 293    * Handle a `blur` event on this `Slider`.
 294    *
 295    * @param {EventTarget~Event} event
 296    *        The `blur` event that caused this function to run.
 297    *
 298    * @listens blur
 299    */
 300
 301   Slider.prototype.handleBlur = function handleBlur() {
 302     this.off(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress);
 303   };
 304
 305   /**
 306    * Listener for click events on slider, used to prevent clicks
 307    *   from bubbling up to parent elements like button menus.
 308    *
 309    * @param {Object} event
 310    *        Event that caused this object to run
 311    */
 312
 313
 314   Slider.prototype.handleClick = function handleClick(event) {
 315     event.stopImmediatePropagation();
 316     event.preventDefault();
 317   };
 318
 319   /**
 320    * Get/set if slider is horizontal for vertical
 321    *
 322    * @param {boolean} [bool]
 323    *        - true if slider is vertical,
 324    *        - false is horizontal
 325    *
 326    * @return {boolean|Slider}
 327    *         - true if slider is vertical, and getting
 328    *         - false is horizontal, and getting
 329    *         - a reference to this object when setting
 330    */
 331
 332
 333   Slider.prototype.vertical = function vertical(bool) {
 334     if (bool === undefined) {
 335       return this.vertical_ || false;
 336     }
 337
 338     this.vertical_ = !!bool;
 339
 340     if (this.vertical_) {
 341       this.addClass('vjs-slider-vertical');
 342     } else {
 343       this.addClass('vjs-slider-horizontal');
 344     }
 345
 346     return this;
 347   };
 348
 349   return Slider;
 350 }(_component2['default']);
 351
 352 _component2['default'].registerComponent('Slider', Slider);
 353 exports['default'] = Slider;