Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pure css slider handles #2132

Closed
wants to merge 3 commits into from
Closed

Pure css slider handles #2132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2093655
moved to pure css slider handles
mmcc May 8, 2015
67957fb
removed slider handle classes
mmcc May 18, 2015
c134e30
Got rid of left-over handle styles
mmcc May 18, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/css/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,17 @@

.video-js .vjs-play-progress {
background-color: $primary-text;
@extend .vjs-icon-circle;

// Progress handle
&:before {
position: absolute;
top: -0.35em;
right: -0.5em;

}
}

.video-js .vjs-load-progress {
background: rgb(100, 100, 100) /* IE8- Fallback */;
background: rgba(255, 255, 255, 0.2);
Expand All @@ -39,12 +49,6 @@ specific time ranges that have been buffered */
background: rgba($secondary-bg, 0.1);
}

.video-js .vjs-slider-handle.vjs-seek-handle {
width: 0.95em;
height: 0.95em;
}


.video-js.vjs-no-flex .vjs-progress-control {
width: auto;
}
25 changes: 0 additions & 25 deletions src/css/components/_slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,3 @@

@include box-shadow(0 0 1em $primary-text);
}

.video-js .vjs-slider-handle {
position: absolute;
@extend .vjs-icon-circle;
}

.video-js .vjs-slider-horizontal .vjs-slider-handle {
left: 0;
top: -0.34em;
}

.video-js .vjs-slider-vertical .vjs-slider-handle {
left: -0.3em;
bottom: 0;
}

.video-js .vjs-slider-handle:before {
font-size: 1em;
line-height: 1;
text-align: center;

position: absolute;
top: 0;
left: 0;
}
38 changes: 24 additions & 14 deletions src/css/components/_volume.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,27 +41,37 @@
left: 0;

background-color: $primary-text;

@extend .vjs-icon-circle;

// Volume handle
&:before {
position: absolute;
}
}

.video-js .vjs-slider-vertical .vjs-volume-level { width: 0.3em; }
.video-js .vjs-slider-horizontal .vjs-volume-level { height: 0.3em; }
.video-js .vjs-slider-vertical .vjs-volume-level {
width: 0.3em;

// Volume handle
&:before {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be helpful to add some comments around these to make it clear that it's the handle being affected here. It's not obvious at first glance.

top: -0.5em;
left: -0.35em;
}
}
.video-js .vjs-slider-horizontal .vjs-volume-level {
height: 0.3em;

.video-js .vjs-volume-bar .vjs-volume-handle {
width: 0.8em;
height: 0.8em;
// Volume handle
&:before {
top: -0.35em;
right: -0.5em;
}
}

/* Assumes volume starts at 1.0. If you change the size of the
handle relative to the volume bar, you'll need to update this value
too. */
/* Assumes volume starts at 1.0. */
.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { height: 100%; }
.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-handle { bottom: 4.3em; }
.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; }
.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-handle { left: 4.3em; }

.video-js .vjs-volume-handle:before {
font-size: 0.9em;
}

/* The volume menu button is like menu buttons (captions/subtitles) but works
a little differently. It needs to be possible to tab to the volume slider
Expand Down
7 changes: 2 additions & 5 deletions src/js/control-bar/progress-control/seek-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Slider from '../../slider/slider.js';
import LoadProgressBar from './load-progress-bar.js';
import PlayProgressBar from './play-progress-bar.js';
import SeekHandle from './seek-handle.js';
import * as Fn from '../../utils/fn.js';
import formatTime from '../../utils/format-time.js';
import roundFloat from '../../utils/round-float.js';
Expand Down Expand Up @@ -81,11 +80,9 @@ class SeekBar extends Slider {
SeekBar.prototype.options_ = {
children: {
'loadProgressBar': {},
'playProgressBar': {},
'seekHandle': {}
'playProgressBar': {}
},
'barName': 'playProgressBar',
'handleName': 'seekHandle'
'barName': 'playProgressBar'
};

SeekBar.prototype.playerEvent = 'timeupdate';
Expand Down
43 changes: 0 additions & 43 deletions src/js/control-bar/progress-control/seek-handle.js
View file
Open in desktop

This file was deleted.

7 changes: 2 additions & 5 deletions src/js/control-bar/volume-control/volume-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import * as Fn from '../../utils/fn.js';
import roundFloat from '../../utils/round-float.js';

// Required children
import VolumeHandle from './volume-handle.js';
import VolumeLevel from './volume-level.js';

/**
Expand Down Expand Up @@ -62,11 +61,9 @@ class VolumeBar extends Slider {

VolumeBar.prototype.options_ = {
children: {
'volumeLevel': {},
'volumeHandle': {}
'volumeLevel': {}
},
'barName': 'volumeLevel',
'handleName': 'volumeHandle'
'barName': 'volumeLevel'
};

VolumeBar.prototype.playerEvent = 'volumechange';
Expand Down
24 changes: 0 additions & 24 deletions src/js/control-bar/volume-control/volume-handle.js
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions src/js/slider/slider-handle.js
View file
Open in desktop

This file was deleted.

50 changes: 1 addition & 49 deletions src/js/slider/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,8 @@ class Slider extends Component {
progress = 0;
}

// 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.
let barProgress = this.updateHandlePosition(progress);

// Convert to a percentage for setting
let percentage = roundFloat(barProgress * 100, 2) + '%';
let percentage = roundFloat(progress * 100, 2) + '%';

// Set the new bar width or height
if (this.vertical()) {
Expand All @@ -114,50 +110,6 @@ class Slider extends Component {
}
}

/**
* Update the handle position.
*/
updateHandlePosition(progress) {
let handle = this.handle;
if (!handle) return;

let vertical = this.vertical();
let box = this.el_;

let boxSize, handleSize;
if (vertical) {
boxSize = box.offsetHeight;
handleSize = handle.el().offsetHeight;
} else {
boxSize = box.offsetWidth;
handleSize = handle.el().offsetWidth;
}

// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
let 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.
let boxAdjustedPercent = 1 - handlePercent;

// Adjust the progress that we'll use to set widths to the new adjusted box width
let adjustedProgress = progress * boxAdjustedPercent;

// The bar does reach the left side, so we need to account for this in the bar's width
let barProgress = adjustedProgress + (handlePercent / 2);

let percentage = roundFloat(adjustedProgress * 100, 2) + '%';

if (vertical) {
handle.el().style.bottom = percentage;
} else {
handle.el().style.left = percentage;
}

return barProgress;
}

calculateDistance(event){
let el = this.el_;
let box = Dom.findPosition(el);
Expand Down
2 changes: 0 additions & 2 deletions test/api/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,10 @@ test('should export useful components to the public', function () {
ok(videojs.getComponent('SeekBar'), 'SeekBar should be public');
ok(videojs.getComponent('LoadProgressBar'), 'LoadProgressBar should be public');
ok(videojs.getComponent('PlayProgressBar'), 'PlayProgressBar should be public');
ok(videojs.getComponent('SeekHandle'), 'SeekHandle should be public');
ok(videojs.getComponent('VolumeControl'), 'VolumeControl should be public');
ok(videojs.getComponent('VolumeBar'), 'VolumeBar should be public');
ok(videojs.getComponent('VolumeLevel'), 'VolumeLevel should be public');
ok(videojs.getComponent('VolumeMenuButton'), 'VolumeMenuButton should be public');
ok(videojs.getComponent('VolumeHandle'), 'VolumeHandle should be public');
ok(videojs.getComponent('MuteToggle'), 'MuteToggle should be public');
ok(videojs.getComponent('PosterImage'), 'PosterImage should be public');
ok(videojs.getComponent('Menu'), 'Menu should be public');
Expand Down