Tab focus tweaks
This commit is contained in:
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Reference in New Issue
Block a user