Menu animation
This commit is contained in:
Sam
parent
ca37b4c9ac
commit
1ad103c29f
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
200
src/js/plyr.js
200
src/js/plyr.js
@ -888,81 +888,83 @@
|
|||||||
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
|
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
|
||||||
'</button>',
|
'</button>',
|
||||||
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
|
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
|
||||||
'<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
'<div>',
|
||||||
'<ul>',
|
'<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
||||||
'<li role="tab">',
|
'<ul>',
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
|
'<li role="tab">',
|
||||||
config.i18n.captions + ' <span class="plyr__menu__btn__value">{lang}</span>',
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
|
||||||
'</button>',
|
config.i18n.captions + ' <span class="plyr__menu__btn__value">{lang}</span>',
|
||||||
'</li>',
|
'</button>',
|
||||||
'<li role="tab">',
|
'</li>',
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
'<li role="tab">',
|
||||||
config.i18n.speed + ' <span class="plyr__menu__btn__value">{speed}</span>',
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
||||||
'</button>',
|
config.i18n.speed + ' <span class="plyr__menu__btn__value">{speed}</span>',
|
||||||
'</li>',
|
'</button>',
|
||||||
'<li role="tab">',
|
'</li>',
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
|
'<li role="tab">',
|
||||||
config.i18n.quality + ' <span class="plyr__menu__btn__value">Auto</span>',
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
|
||||||
'</button>',
|
config.i18n.quality + ' <span class="plyr__menu__btn__value">Auto</span>',
|
||||||
'</li>',
|
'</button>',
|
||||||
'</ul>',
|
'</li>',
|
||||||
'</div>',
|
|
||||||
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
|
|
||||||
'<ul>',
|
|
||||||
'<li role="tab">',
|
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
|
||||||
config.i18n.captions,
|
|
||||||
'</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">English</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">Off</button>',
|
|
||||||
'</li>',
|
|
||||||
'</ul>',
|
|
||||||
'</div>',
|
|
||||||
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
|
|
||||||
'<ul>',
|
|
||||||
'<li role="tab">',
|
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
|
||||||
config.i18n.speed,
|
|
||||||
'</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">2×</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">1.5×</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">1×</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">0.5×</button>',
|
|
||||||
'</li>',
|
|
||||||
'</ul>',
|
|
||||||
'</div>',
|
|
||||||
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
|
|
||||||
'<ul>',
|
|
||||||
'<li role="tab">',
|
|
||||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
|
||||||
config.i18n.quality,
|
|
||||||
'</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">1080P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">720P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">480P</button>',
|
|
||||||
'</li>',
|
|
||||||
'<li>',
|
|
||||||
'<button type="button">320P</button>',
|
|
||||||
'</li>',
|
|
||||||
'</ul>',
|
'</ul>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
|
||||||
|
'<ul>',
|
||||||
|
'<li role="tab">',
|
||||||
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||||
|
config.i18n.captions,
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">English</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">Off</button>',
|
||||||
|
'</li>',
|
||||||
|
'</ul>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
|
||||||
|
'<ul>',
|
||||||
|
'<li role="tab">',
|
||||||
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||||
|
config.i18n.speed,
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">2×</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">1.5×</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">1×</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">0.5×</button>',
|
||||||
|
'</li>',
|
||||||
|
'</ul>',
|
||||||
|
'</div>',
|
||||||
|
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
|
||||||
|
'<ul>',
|
||||||
|
'<li role="tab">',
|
||||||
|
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||||
|
config.i18n.quality,
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">1080P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">720P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">480P</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button">320P</button>',
|
||||||
|
'</li>',
|
||||||
|
'</ul>',
|
||||||
|
'</div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'</div>'
|
'</div>'
|
||||||
@ -3159,7 +3161,6 @@
|
|||||||
var menu = this,
|
var menu = this,
|
||||||
toggle = event.target,
|
toggle = event.target,
|
||||||
target = document.getElementById(toggle.getAttribute('aria-controls')),
|
target = document.getElementById(toggle.getAttribute('aria-controls')),
|
||||||
tabs = menu.querySelectorAll('[role="tabpanel"]'),
|
|
||||||
show = (toggle.getAttribute('aria-expanded') === 'false');
|
show = (toggle.getAttribute('aria-expanded') === 'false');
|
||||||
|
|
||||||
// Nothing to show, bail
|
// Nothing to show, bail
|
||||||
@ -3167,21 +3168,52 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide all other tabs
|
// Are we targetting a tab?
|
||||||
if (target.getAttribute('role') === 'tabpanel') {
|
var isTab = target.getAttribute('role') === 'tabpanel',
|
||||||
[].forEach.call(tabs, function(tab) {
|
targetWidth,
|
||||||
tab.setAttribute('aria-hidden', true);
|
targetHeight,
|
||||||
tab.setAttribute('tabindex', -1);
|
container;
|
||||||
|
|
||||||
[].forEach.call(menu.querySelectorAll('[aria-controls="' + tab.getAttribute('id') + '"]'), function(toggle) {
|
// Hide all other tabs
|
||||||
toggle.setAttribute('aria-expanded', false);
|
if (isTab) {
|
||||||
});
|
// Get other tabs
|
||||||
|
var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
|
||||||
|
container = current.parentNode;
|
||||||
|
|
||||||
|
[].forEach.call(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]'), function(toggle) {
|
||||||
|
toggle.setAttribute('aria-expanded', false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
container.style.width = current.scrollWidth + 'px';
|
||||||
|
container.style.height = current.scrollHeight + 'px';
|
||||||
|
|
||||||
|
current.setAttribute('aria-hidden', true);
|
||||||
|
current.setAttribute('tabindex', -1);
|
||||||
|
|
||||||
|
// Get the natural element size
|
||||||
|
var clone = target.cloneNode(true);
|
||||||
|
clone.style.position = "absolute";
|
||||||
|
clone.style.opacity = 0;
|
||||||
|
clone.setAttribute('aria-hidden', false);
|
||||||
|
container.appendChild(clone);
|
||||||
|
targetWidth = clone.scrollWidth;
|
||||||
|
targetHeight = clone.scrollHeight;
|
||||||
|
_remove(clone);
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle.setAttribute('aria-expanded', show);
|
|
||||||
target.setAttribute('aria-hidden', !show);
|
target.setAttribute('aria-hidden', !show);
|
||||||
|
toggle.setAttribute('aria-expanded', show);
|
||||||
target.setAttribute('tabindex', 0);
|
target.setAttribute('tabindex', 0);
|
||||||
|
|
||||||
|
if (isTab) {
|
||||||
|
container.style.width = targetWidth + 'px';
|
||||||
|
container.style.height = targetHeight + 'px';
|
||||||
|
|
||||||
|
window.setTimeout(function() {
|
||||||
|
container.style.width = '';
|
||||||
|
container.style.height = '';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Seek tooltip
|
// Seek tooltip
|
||||||
|
|||||||
@ -492,14 +492,21 @@
|
|||||||
right: -5px;
|
right: -5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
animation: plyr-popup .2s ease;
|
animation: plyr-popup .2s ease;
|
||||||
|
|
||||||
background: @plyr-menu-bg;
|
background: @plyr-menu-bg;
|
||||||
box-shadow: 0 1px 0 fade(#000, 20%);
|
box-shadow: 0 1px 0 fade(#000, 20%);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: @plyr-menu-color;
|
color: @plyr-menu-color;
|
||||||
font-size: @plyr-font-size-small;
|
font-size: @plyr-font-size-small;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
|
||||||
|
}
|
||||||
|
|
||||||
// Arrow
|
// Arrow
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -516,6 +523,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -575,6 +583,7 @@
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-left: ceil(@plyr-control-padding * 3.5);
|
padding-left: ceil(@plyr-control-padding * 3.5);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Option value
|
// Option value
|
||||||
@ -591,6 +600,16 @@
|
|||||||
color: @plyr-menu-bg;
|
color: @plyr-menu-bg;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// When animating between menus
|
||||||
|
&.is-resizing {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
|
||||||
|
|
||||||
|
ul {
|
||||||
|
//opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user