Tab focus tweaks

This commit is contained in:
Sam Potts
2016-01-14 00:59:18 +11:00
parent ca8fd08e81
commit 7d487553b2
4 changed files with 55 additions and 41 deletions

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -89,7 +89,8 @@
enabled: 'plyr--fullscreen-enabled', enabled: 'plyr--fullscreen-enabled',
active: 'plyr--fullscreen-active', active: 'plyr--fullscreen-active',
hideControls: 'plyr--fullscreen--hide-controls' hideControls: 'plyr--fullscreen--hide-controls'
} },
tabFocus: 'tab-focus'
}, },
captions: { captions: {
defaultActive: false defaultActive: false
@ -487,14 +488,16 @@
// Toggle class on an element // Toggle class on an element
function _toggleClass(element, className, state) { function _toggleClass(element, className, state) {
if (element) { if (element) {
if (element.classList) {
element.classList[state ? 'add' : 'remove'](className); element.classList[state ? 'add' : 'remove'](className);
} }
else {
var current = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
element.className = current + (state ? ' ' + className : '');
} }
// Has class name
function _hasClass(element, className) {
if (element) {
return element.classList.contains(className);
} }
return false;
} }
// Toggle event // Toggle event
@ -878,6 +881,7 @@
plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
// Inputs // Inputs
plyr.buttons.volume = _getElement(config.selectors.buttons.volume);
plyr.buttons.mute = _getElement(config.selectors.buttons.mute); plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
plyr.buttons.captions = _getElement(config.selectors.buttons.captions); plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
plyr.checkboxes = _getElements('[type="checkbox"]'); plyr.checkboxes = _getElements('[type="checkbox"]');
@ -2075,23 +2079,34 @@
// IE doesn't support input event, so we fallback to change // IE doesn't support input event, so we fallback to change
var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input'); var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input');
// Click play/pause helpers // Click play/pause helper
function _onPlay() { function _togglePlay(play) {
// Toggle playback
if (play) {
_play(); _play();
setTimeout(function() {
if(plyr.buttons.pause) {
plyr.buttons.pause.focus();
} }
}, 100); else {
}
function _onPause() {
_pause(); _pause();
}
// Determine which buttons
var trigger = plyr.buttons[play ? "play" : "pause"],
target = plyr.buttons[play ? "pause" : "play"];
// Setup focus and tab focus
if(target) {
var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
setTimeout(function() { setTimeout(function() {
if(plyr.buttons.play) { target.focus();
plyr.buttons.play.focus();
if(hadTabFocus) {
_toggleClass(trigger, config.classes.tabFocus, false);
_toggleClass(target, config.classes.tabFocus, true);
} }
}, 100); }, 100);
} }
}
// Detect tab focus // Detect tab focus
function checkFocus() { function checkFocus() {
@ -2105,7 +2120,7 @@
for (var button in plyr.buttons) { for (var button in plyr.buttons) {
var element = plyr.buttons[button]; var element = plyr.buttons[button];
_toggleClass(element, 'tab-focus', (element === focused)); _toggleClass(element, config.classes.tabFocus, (element === focused));
} }
} }
_on(window, 'keyup', function(event) { _on(window, 'keyup', function(event) {
@ -2115,19 +2130,13 @@
checkFocus(); checkFocus();
} }
}); });
for (var button in plyr.buttons) { _on(document.body, 'click', checkFocus);
var element = plyr.buttons[button];
_on(element, 'blur', function() {
_toggleClass(element, 'tab-focus', false);
});
}
// Play // Play
_on(plyr.buttons.play, 'click', _onPlay); _on(plyr.buttons.play, 'click', function() { _togglePlay(true); });
// Pause // Pause
_on(plyr.buttons.pause, 'click', _onPause); _on(plyr.buttons.pause, 'click', function() { _togglePlay(); });
// Restart // Restart
_on(plyr.buttons.restart, 'click', _seek); _on(plyr.buttons.restart, 'click', _seek);
@ -2196,14 +2205,14 @@
if (plyr.type === 'video' && config.click) { if (plyr.type === 'video' && config.click) {
_on(plyr.videoContainer, 'click', function() { _on(plyr.videoContainer, 'click', function() {
if (plyr.media.paused) { if (plyr.media.paused) {
_onPlay(); _play();
} }
else if (plyr.media.ended) { else if (plyr.media.ended) {
_seek(); _seek();
_onPlay(); _play();
} }
else { else {
_onPause(); _pause();
} }
}); });
} }

View File

@ -100,8 +100,8 @@
} }
// Tab focus styles // Tab focus styles
.tab-focus() { .tab-focus() {
outline: thin dotted #000; outline: 1px dotted fade(@gray-dark, 80%);
outline-offset: 0; outline-offset: 3px;
} }
// <input type="range"> styling // <input type="range"> styling
@ -387,6 +387,11 @@
z-index: 3; z-index: 3;
} }
// Common range styles
input[type='range'].tab-focus {
.tab-focus();
}
// Playback progress // Playback progress
// <progress> element // <progress> element
&__progress { &__progress {