Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Volume and speeds dialogs are fully extended.

Browse Source 
When the controls receive focus not via mouse click or mouse hover, their appropriate
slider and selection menu are fully extended and shown to the user.
This commit is contained in:
Valera Rozuvan
2013-08-07 15:28:30 +03:00
parent 740a343b76
commit f08394ac2c
4 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
common/lib/xmodule/xmodule/css/videoalpha/display.scss
View File

@@ -421,7 +421,6 @@ div.videoalpha {
a.hide-subtitles {
background: url('../images/cc.png') center no-repeat;
/* display: block; */
float: left;
font-weight: 800;
line-height: 46px; //height of play pause buttons

13
common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
View File

@@ -61,6 +61,11 @@ function () {
slide: state.videoVolumeControl.onChange
});
// Make sure that we can't focus the actual volume slider while Tabing.
state.videoVolumeControl.volumeSliderEl.find('a').each(function (index, value) {
$(value).attr('tabindex', '-1');
});
state.videoVolumeControl.el.toggleClass('muted', state.videoVolumeControl.currentVolume === 0);
}
@@ -74,9 +79,17 @@ function () {
$(this).addClass('open');
});
state.videoVolumeControl.buttonEl.on('focus', function() {
$(this).parent().addClass('open');
});
state.videoVolumeControl.el.on('mouseleave', function() {
$(this).removeClass('open');
});
state.videoVolumeControl.buttonEl.on('blur', function() {
$(this).parent().removeClass('open');
});
}
// ***************************************************************

16
common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
View File

@@ -46,9 +46,9 @@ function () {
$.each(state.videoSpeedControl.speeds, function(index, speed) {
//var link = $('<a href="#">' + speed + 'x</a>');
var link = '<a href="#">' + speed + 'x</a>';
var link = '<a tabindex="-1" href="#">' + speed + 'x</a>';
state.videoSpeedControl.videoSpeedsEl.prepend($('<li data-speed="' + speed + '">' + link + '</li>'));
state.videoSpeedControl.videoSpeedsEl.prepend($('<li tabindex="-1" data-speed="' + speed + '">' + link + '</li>'));
});
state.videoSpeedControl.setSpeed(state.speed);
@@ -77,6 +77,14 @@ function () {
event.preventDefault();
$(this).removeClass('open');
});
state.videoSpeedControl.el.children('a')
.on('focus', function () {
$(this).parent().addClass('open');
})
.on('blur', function () {
$(this).parent().removeClass('open');
});
}
}
@@ -120,9 +128,9 @@ function () {
var link, listItem;
//link = $('<a href="#">' + speed + 'x</a>');
link = '<a href="#">' + speed + 'x</a>';
link = '<a tabindex="-1" href="#">' + speed + 'x</a>';
listItem = $('<li data-speed="' + speed + '">' + link + '</li>');
listItem = $('<li tabindex="-1" data-speed="' + speed + '">' + link + '</li>');
if (speed === params.currentSpeed) {
listItem.addClass('active');

10
lms/templates/videoalpha.html
View File

@@ -49,15 +49,15 @@
<div class="secondary-controls">
<div class="speeds">
<a href="#" tabindex="0" title="Speeds">
<h3>${_('Speed')}</h3>
<p class="active"></p>
<h3 tabindex="-1">${_('Speed')}</h3>
<p tabindex="-1" class="active"></p>
</a>
<ol class="video_speeds"></ol>
<ol tabindex="-1" class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#" tabindex="0" title="Volume"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
<div tabindex="-1" class="volume-slider-container">
<div tabindex="-1" class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>