web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-31 03:11:11 +02:00
Code Releases Activity

@mmcc updated the slider to allow for vertical orientation. closes #1816

Browse Source
This commit is contained in:
Matthew McClure 2015-03-12 11:16:09 -07:00 committed by heff
parent 0020ba15b9
commit cd48d03945
2 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -2,7 +2,7 @@ CHANGELOG
=========
## HEAD (Unreleased)
_(none)_
* @mmcc updated the slider to allow for vertical orientation ([view](https://github.com/videojs/video.js/pull/1816))
--------------------

101
src/js/slider.js
View File

@ -16,6 +16,9 @@ vjs.Slider = vjs.Component.extend({
this.bar = this.getChild(this.options_['barName']);
this.handle = this.getChild(this.options_['handleName']);
// Set a horizontal or vertical class on the slider depending on the slider type
this.vertical(!!this.options()['vertical']);
this.on('mousedown', this.onMouseDown);
this.on('touchstart', this.onMouseDown);
this.on('focus', this.onFocus);
@ -78,11 +81,11 @@ vjs.Slider.prototype.update = function(){
// If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
// On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
// var progress = (this.player_.scrubbing) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();
var progress = this.getPercent();
var bar = this.bar;
var barProgress,
progress = this.getPercent(),
handle = this.handle,
bar = this.bar;
// If there's no bar...
if (!bar) return;
// Protect against no duration and other division issues
if (typeof progress !== 'number' ||
@ -92,39 +95,63 @@ vjs.Slider.prototype.update = function(){
progress = 0;
}
barProgress = progress;
// If there is a handle, we need to account for the handle in our calculation for progress bar
// so that it doesn't fall short of or extend past the handle.
if (handle) {
var barProgress = this.updateHandlePosition(progress);
var box = this.el_,
boxWidth = box.offsetWidth,
// Convert to a percentage for setting
var percentage = vjs.round(barProgress * 100, 2) + '%';
handleWidth = handle.el().offsetWidth,
// Set the new bar width or height
if (this.vertical()) {
bar.el().style.height = percentage;
} else {
bar.el().style.width = percentage;
}
};
// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
/**
* Update the handle position.
*/
vjs.Slider.prototype.updateHandlePosition = function(progress) {
var handle = this.handle;
if (!handle) return;
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
// There is a margin of half the handle's width on both sides.
boxAdjustedPercent = 1 - handlePercent,
var vertical = this.vertical();
var box = this.el_;
// Adjust the progress that we'll use to set widths to the new adjusted box width
adjustedProgress = progress * boxAdjustedPercent;
// The bar does reach the left side, so we need to account for this in the bar's width
barProgress = adjustedProgress + (handlePercent / 2);
// Move the handle from the left based on the adjected progress
handle.el().style.left = vjs.round(adjustedProgress * 100, 2) + '%';
var boxSize, handleSize;
if (vertical) {
boxSize = box.offsetHeight;
handleSize = handle.el().offsetHeight;
} else {
boxSize = box.offsetWidth;
handleSize = handle.el().offsetWidth;
}
// Set the new bar width
if (bar) {
bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
var handlePercent = (handleSize) ? handleSize / boxSize : 0,
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
// There is a margin of half the handle's width on both sides.
boxAdjustedPercent = 1 - handlePercent,
// Adjust the progress that we'll use to set widths to the new adjusted box width
adjustedProgress = progress * boxAdjustedPercent;
// The bar does reach the left side, so we need to account for this in the bar's width
var barProgress = adjustedProgress + (handlePercent / 2);
var percentage = vjs.round(adjustedProgress * 100, 2) + '%';
if (vertical) {
handle.el().style.bottom = percentage;
} else {
handle.el().style.left = percentage;
}
return barProgress;
};
vjs.Slider.prototype.calculateDistance = function(event){
@ -132,7 +159,8 @@ vjs.Slider.prototype.calculateDistance = function(event){
el = this.el_;
box = vjs.findPosition(el);
boxW = boxH = el.offsetWidth;
boxW = el.offsetWidth;
boxH = el.offsetHeight;
handle = this.handle;
if (this.options()['vertical']) {
@ -204,6 +232,23 @@ vjs.Slider.prototype.onClick = function(event){
event.preventDefault();
};
vjs.Slider.prototype.vertical_ = false;
vjs.Slider.prototype.vertical = function(bool) {
if (bool === undefined) {
return this.vertical_;
}
this.vertical_ = !!bool;
if (this.vertical_) {
this.addClass('vjs-slider-vertical');
} else {
this.addClass('vjs-slider-horizontal');
}
return this;
};
/**
* SeekBar Behavior includes play progress bar, and seek handle
* Needed so it can determine seek position based on handle position/size