3 exports.__esModule = true;
5 var _component = require('../component.js');
7 var _component2 = _interopRequireDefault(_component);
9 var _dom = require('../utils/dom.js');
11 var Dom = _interopRequireWildcard(_dom);
13 var _obj = require('../utils/obj');
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; } }
17 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
19 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
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; } /**
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.
34 var Slider = function (_Component) {
35 _inherits(Slider, _Component);
38 * Create an instance of this class
40 * @param {Player} player
41 * The `Player` that this class should be attached to.
43 * @param {Object} [options]
44 * The key/value store of player options.
46 function Slider(player, options) {
47 _classCallCheck(this, Slider);
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));
52 _this.bar = _this.getChild(_this.options_.barName);
54 // Set a horizontal or vertical class on the slider depending on the slider type
55 _this.vertical(!!_this.options_.vertical);
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);
63 _this.on(player, 'controlsvisible', _this.update);
64 _this.on(player, _this.playerEvent, _this.update);
69 * Create the `Button`s DOM element.
71 * @param {string} type
72 * Type of element to create.
74 * @param {Object} [props={}]
75 * List of properties in Object form.
77 * @param {Object} [attributes={}]
78 * list of attributes in Object form.
81 * The element that gets created.
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] : {};
89 // Add the slider element class to all sub classes
90 props.className = props.className + ' vjs-slider';
91 props = (0, _obj.assign)({
95 attributes = (0, _obj.assign)({
103 return _Component.prototype.createEl.call(this, type, props, attributes);
107 * Handle `mousedown` or `touchstart` events on the `Slider`.
109 * @param {EventTarget~Event} event
110 * `mousedown` or `touchstart` event that triggered this function
113 * @listens touchstart
114 * @fires Slider#slideractive
118 Slider.prototype.handleMouseDown = function handleMouseDown(event) {
119 var doc = this.bar.el_.ownerDocument;
121 event.preventDefault();
122 Dom.blockTextSelection();
124 this.addClass('vjs-sliding');
126 * Triggered when the slider is in an active state
128 * @event Slider#slideractive
129 * @type {EventTarget~Event}
131 this.trigger('slideractive');
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);
138 this.handleMouseMove(event);
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}.
147 * @param {EventTarget~Event} event
148 * `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
156 Slider.prototype.handleMouseMove = function handleMouseMove(event) {};
159 * Handle `mouseup` or `touchend` events on the `Slider`.
161 * @param {EventTarget~Event} event
162 * `mouseup` or `touchend` event that triggered this function.
166 * @fires Slider#sliderinactive
170 Slider.prototype.handleMouseUp = function handleMouseUp() {
171 var doc = this.bar.el_.ownerDocument;
173 Dom.unblockTextSelection();
175 this.removeClass('vjs-sliding');
177 * Triggered when the slider is no longer in an active state.
179 * @event Slider#sliderinactive
180 * @type {EventTarget~Event}
182 this.trigger('sliderinactive');
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);
193 * Update the progress bar of the `Slider`.
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
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();
210 // If there's no bar...
215 // Protect against no duration and other division issues
216 if (typeof progress !== 'number' || progress !== progress || progress < 0 || progress === Infinity) {
220 // Convert to a percentage for setting
221 var percentage = (progress * 100).toFixed(2) + '%';
223 // Set the new bar width or height
224 if (this.vertical()) {
225 bar.el().style.height = percentage;
227 bar.el().style.width = percentage;
232 * Calculate distance for slider
234 * @param {EventTarget~Event} event
235 * The event that caused this function to run.
238 * The current position of the Slider.
239 * - postition.x for vertical `Slider`s
240 * - postition.y for horizontal `Slider`s
244 Slider.prototype.calculateDistance = function calculateDistance(event) {
245 var position = Dom.getPointerPosition(this.el_, event);
247 if (this.vertical()) {
254 * Handle a `focus` event on this `Slider`.
256 * @param {EventTarget~Event} event
257 * The `focus` event that caused this function to run.
263 Slider.prototype.handleFocus = function handleFocus() {
264 this.on(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress);
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}.
272 * @param {EventTarget~Event} event
273 * the `keydown` event that caused this function to run.
279 Slider.prototype.handleKeyPress = function handleKeyPress(event) {
280 // Left and Down Arrows
281 if (event.which === 37 || event.which === 40) {
282 event.preventDefault();
285 // Up and Right Arrows
286 } else if (event.which === 38 || event.which === 39) {
287 event.preventDefault();
293 * Handle a `blur` event on this `Slider`.
295 * @param {EventTarget~Event} event
296 * The `blur` event that caused this function to run.
301 Slider.prototype.handleBlur = function handleBlur() {
302 this.off(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress);
306 * Listener for click events on slider, used to prevent clicks
307 * from bubbling up to parent elements like button menus.
309 * @param {Object} event
310 * Event that caused this object to run
314 Slider.prototype.handleClick = function handleClick(event) {
315 event.stopImmediatePropagation();
316 event.preventDefault();
320 * Get/set if slider is horizontal for vertical
322 * @param {boolean} [bool]
323 * - true if slider is vertical,
324 * - false is horizontal
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
333 Slider.prototype.vertical = function vertical(bool) {
334 if (bool === undefined) {
335 return this.vertical_ || false;
338 this.vertical_ = !!bool;
340 if (this.vertical_) {
341 this.addClass('vjs-slider-vertical');
343 this.addClass('vjs-slider-horizontal');
350 }(_component2['default']);
352 _component2['default'].registerComponent('Slider', Slider);
353 exports['default'] = Slider;