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

Merge branch 'review-rpless-feature/accessible-volume-menu'

Browse Source
This commit is contained in:
Steve Heffernan 2014-09-30 16:26:57 -07:00
commit 9bfe3fe5ae
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/css/video-js.less
View File

@ -323,10 +323,6 @@ fonts to show/hide properly.
margin: 1.1em auto 0;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
height: 2.9em;
}
.vjs-default-skin .vjs-volume-level {
position: absolute;
top: 0;
@ -357,9 +353,32 @@ fonts to show/hide properly.
height: 1em;
}
/* 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
without hitting space bar on the menu button. To do this we're not using
display:none to hide the slider menu by default, and instead setting the
width and height to zero. */
.vjs-default-skin .vjs-volume-menu-button .vjs-menu {
display: block;
width: 0;
height: 0;
border-top-color: transparent;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
width: 6em;
left: -4em;
height: 0;
width: 0;
}
.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
}
.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
height: 2.9em;
width: 10em;
}
/* Progress
@ -748,7 +767,8 @@ easily in the skin designer. http://designer.videojs.com/
.box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
}
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,
.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
display: block;
}
.vjs-default-skin .vjs-menu-button ul li {

6
src/js/control-bar/volume-menu-button.js
View File

@ -30,6 +30,12 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){
contentElType: 'div'
});
var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({'vertical': true}, this.options_.volumeBar));
vc.on('focus', function() {
menu.lockShowing();
});
vc.on('blur', function() {
menu.unlockShowing();
});
menu.addChild(vc);
return menu;
};

1
src/js/menu.js
View File

@ -213,4 +213,3 @@ vjs.MenuButton.prototype.unpressButton = function(){
this.menu.unlockShowing();
this.el_.setAttribute('aria-pressed', false);
};