Small tweaks to focus
This commit is contained in:
Sam Potts
parent
d6977473b1
commit
02cb093f7b
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -3969,18 +3969,11 @@
|
||||
var play = player.togglePlay();
|
||||
|
||||
// Determine which buttons
|
||||
var trigger = player.elements.buttons[play ? 'play' : 'pause'];
|
||||
var target = player.elements.buttons[play ? 'pause' : 'play'];
|
||||
|
||||
// Transfer focus
|
||||
if (target && trigger) {
|
||||
if (utils.hasClass(trigger, player.config.classNames.tabFocus)) {
|
||||
setTimeout(function() {
|
||||
target.focus();
|
||||
utils.toggleClass(trigger, player.config.classNames.tabFocus, false);
|
||||
utils.toggleClass(target, player.config.classNames.tabFocus, true);
|
||||
}, 0);
|
||||
}
|
||||
if (target) {
|
||||
target.focus();
|
||||
}
|
||||
}
|
||||
|
||||
@ -3989,19 +3982,6 @@
|
||||
return event.keyCode ? event.keyCode : event.which;
|
||||
}
|
||||
|
||||
// Detect tab focus
|
||||
function checkTabFocus(focused) {
|
||||
utils.toggleClass(
|
||||
getElements('.' + player.config.classNames.tabFocus),
|
||||
player.config.classNames.tabFocus,
|
||||
false
|
||||
);
|
||||
|
||||
if (player.elements.container.contains(focused)) {
|
||||
utils.toggleClass(focused, player.config.classNames.tabFocus, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
if (player.config.keyboard.focused) {
|
||||
var last = null;
|
||||
@ -4193,31 +4173,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Focus/tab management
|
||||
utils.on(window, 'keyup', function(event) {
|
||||
var code = getKeyCode(event);
|
||||
var focused = utils.getFocusElement();
|
||||
|
||||
if (code === 9) {
|
||||
checkTabFocus(focused);
|
||||
}
|
||||
});
|
||||
|
||||
utils.on(document.body, 'click', function() {
|
||||
utils.toggleClass(
|
||||
getElement('.' + player.config.classNames.tabFocus),
|
||||
player.config.classNames.tabFocus,
|
||||
false
|
||||
);
|
||||
});
|
||||
|
||||
for (var button in player.elements.buttons) {
|
||||
utils.on(player.elements.buttons[button], 'blur', onBlur);
|
||||
}
|
||||
|
||||
function onBlur(event) {
|
||||
// Detect tab focus
|
||||
// Remove class on blur/focusout
|
||||
utils.on(player.elements.container, 'focusout', function(event) {
|
||||
utils.toggleClass(event.target, player.config.classNames.tabFocus, false);
|
||||
}
|
||||
});
|
||||
|
||||
// Add classname to tabbed elements
|
||||
utils.on(player.elements.container, 'keydown', function(event) {
|
||||
if (event.keyCode !== 9) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
window.setTimeout(function () {
|
||||
utils.toggleClass(utils.getFocusElement(), player.config.classNames.tabFocus, true);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Trigger custom and default handlers
|
||||
var handlerProxy = function(event, customHandler, defaultHandler) {
|
||||
@ -4367,7 +4340,6 @@
|
||||
function(event) {
|
||||
player.toggleControls(event);
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
@keyframes plyr-popup {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
@ -35,7 +35,7 @@
|
||||
font-weight: @plyr-font-weight-normal;
|
||||
direction: ltr;
|
||||
|
||||
& when (@plyr-border-box = true) {
|
||||
& when(@plyr-border-box = true) {
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
&,
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& when (@plyr-touch-action = true) {
|
||||
& when(@plyr-touch-action = true) {
|
||||
// Fix 300ms delay
|
||||
a,
|
||||
button,
|
||||
@ -57,7 +57,7 @@
|
||||
}
|
||||
|
||||
// ARIA
|
||||
[aria-hidden='true'] {
|
||||
[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
|
||||
// Range inputs
|
||||
// Specificity is for bootstrap compatibility
|
||||
input[type='range'] {
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
|
||||
width: 100%;
|
||||
@ -137,7 +137,7 @@
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
&.tab-focus:focus {
|
||||
&.tab-focus {
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@ -157,12 +157,12 @@
|
||||
}
|
||||
|
||||
// Video range inputs
|
||||
.plyr--video input[type='range'].tab-focus:focus {
|
||||
.plyr--video input[type="range"].tab-focus {
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
}
|
||||
|
||||
// Audio range inputs
|
||||
.plyr--audio input[type='range'].tab-focus:focus {
|
||||
.plyr--audio input[type="range"].tab-focus {
|
||||
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
|
||||
}
|
||||
|
||||
@ -172,14 +172,14 @@
|
||||
overflow: hidden;
|
||||
|
||||
// !important is not always needed
|
||||
& when (@plyr-sr-only-important = true) {
|
||||
& when(@plyr-sr-only-important = true) {
|
||||
position: absolute !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
& when (@plyr-sr-only-important = false) {
|
||||
& when(@plyr-sr-only-important = false) {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@ -239,14 +239,14 @@
|
||||
width: 100%;
|
||||
padding: @plyr-control-spacing;
|
||||
transform: translateY(-(@plyr-control-spacing * 4));
|
||||
transition: transform .3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
color: @plyr-captions-color;
|
||||
font-size: @plyr-font-size-captions-small;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
border-radius: 2px;
|
||||
padding: .2em .5em;
|
||||
padding: 0.2em 0.5em;
|
||||
background: @plyr-captions-bg;
|
||||
box-decoration-break: clone;
|
||||
line-height: 170%;
|
||||
@ -345,7 +345,7 @@
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
@ -382,13 +382,13 @@
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: @plyr-video-control-color;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.plyr__control {
|
||||
// Hover and tab focus
|
||||
&.tab-focus:focus,
|
||||
&.tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
&[aria-expanded="true"] {
|
||||
background: @plyr-video-control-bg-hover;
|
||||
color: @plyr-video-control-color-hover;
|
||||
}
|
||||
@ -405,9 +405,9 @@
|
||||
|
||||
.plyr__control {
|
||||
// Hover and tab focus
|
||||
&.tab-focus:focus,
|
||||
&.tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
&[aria-expanded="true"] {
|
||||
background: @plyr-audio-control-bg-hover;
|
||||
color: @plyr-audio-control-color-hover;
|
||||
}
|
||||
@ -428,7 +428,7 @@
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px fade(#000, 15%);
|
||||
color: @plyr-video-control-color;
|
||||
transition: all .3s ease;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
@ -461,11 +461,11 @@
|
||||
}
|
||||
|
||||
// States
|
||||
.plyr__controls [data-plyr='pause'],
|
||||
.plyr--playing .plyr__controls [data-plyr='play'] {
|
||||
.plyr__controls [data-plyr="pause"],
|
||||
.plyr--playing .plyr__controls [data-plyr="play"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--playing .plyr__controls [data-plyr='pause'] {
|
||||
.plyr--playing .plyr__controls [data-plyr="pause"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -481,16 +481,16 @@
|
||||
}
|
||||
|
||||
// Some options are hidden by default
|
||||
.plyr [data-plyr='captions'],
|
||||
.plyr [data-plyr='fullscreen'],
|
||||
.plyr [data-plyr='pip'],
|
||||
.plyr [data-plyr='airplay'] {
|
||||
.plyr [data-plyr="captions"],
|
||||
.plyr [data-plyr="fullscreen"],
|
||||
.plyr [data-plyr="pip"],
|
||||
.plyr [data-plyr="airplay"] {
|
||||
display: none;
|
||||
}
|
||||
.plyr--captions-enabled [data-plyr='captions'],
|
||||
.plyr--fullscreen-enabled [data-plyr='fullscreen'],
|
||||
.plyr--pip-enabled [data-plyr='pip'],
|
||||
.plyr--airplay-enabled [data-plyr='airplay'] {
|
||||
.plyr--captions-enabled [data-plyr="captions"],
|
||||
.plyr--fullscreen-enabled [data-plyr="fullscreen"],
|
||||
.plyr--pip-enabled [data-plyr="pip"],
|
||||
.plyr--airplay-enabled [data-plyr="airplay"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -501,9 +501,9 @@
|
||||
|
||||
// Hide tooltip
|
||||
.plyr__control svg {
|
||||
transition: transform .3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.plyr__control[aria-expanded='true'] {
|
||||
.plyr__control[aria-expanded="true"] {
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@ -519,7 +519,7 @@
|
||||
bottom: 100%;
|
||||
right: -3px;
|
||||
margin-bottom: 10px;
|
||||
animation: plyr-popup .2s ease;
|
||||
animation: plyr-popup 0.2s ease;
|
||||
|
||||
background: @plyr-menu-bg;
|
||||
border-radius: 4px;
|
||||
@ -531,7 +531,7 @@
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
|
||||
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// Arrow
|
||||
@ -662,13 +662,13 @@
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
|
||||
&::before {
|
||||
// Arrows
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -684,7 +684,7 @@
|
||||
}
|
||||
}
|
||||
.plyr .plyr__control:hover .plyr__tooltip,
|
||||
.plyr .plyr__control.tab-focus:focus .plyr__tooltip,
|
||||
.plyr .plyr__control.tab-focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
@ -697,7 +697,7 @@
|
||||
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
|
||||
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
@ -708,7 +708,7 @@
|
||||
// Last tooltip
|
||||
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(.8);
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
@ -722,7 +722,7 @@
|
||||
.plyr__controls > .plyr__control:first-child + .plyr__control,
|
||||
.plyr__controls > .plyr__control:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.tab-focus:focus .plyr__tooltip,
|
||||
&.tab-focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
@ -826,13 +826,13 @@
|
||||
}
|
||||
.plyr__progress--buffer {
|
||||
&::-webkit-progress-value {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
&::-ms-fill {
|
||||
transition: width .2s ease;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
}
|
||||
.plyr--video .plyr__progress--buffer,
|
||||
@ -892,7 +892,7 @@
|
||||
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
content: "\2044";
|
||||
margin-right: @plyr-control-spacing;
|
||||
}
|
||||
}
|
||||
@ -926,7 +926,7 @@
|
||||
// It's not supported to change volume using JavaScript:
|
||||
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
|
||||
.plyr--is-ios .plyr__volume,
|
||||
.plyr--is-ios [data-plyr='mute'] {
|
||||
.plyr--is-ios [data-plyr="mute"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user