ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Toggle menu

Browse Source
This commit is contained in:
Sam Potts 2017-04-17 21:05:35 +10:00
parent 9b2396f5ff
commit 01d1ac9ab9
5 changed files with 78 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.jsbeautifyrc
View File

@ -6,7 +6,7 @@
"allowed_file_extensions": []
},
"js": {
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"allowed_file_extensions": ["js", "json", "jsbeautifyrc"],
"brace_style": "collapse",
"break_chained_methods": false,
"e4x": false,

4
.jshintrc
View File

@ -12,8 +12,8 @@
"jquery" : false,
// Development.
"debug" : true, // Allow debugger statements e.g. browser breakpoints.
"devel" : true, // Allow developments statements e.g. `console.log();`.
"debug" : false, // Allow debugger statements e.g. browser breakpoints.
"devel" : false, // Allow developments statements e.g. `console.log();`.
// ECMAScript 5.
"strict" : false, // Require `use strict` pragma in every file.

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
notes.md
View File

@ -11,6 +11,8 @@
- Finish and test PiP (need Sierra VM)
- Finish and test AirPlay (need Sierra VM)
- Click outside of menu closes it
# Notes
- No quality HTML5 support (yet)
- No Vimeo quality support

126
src/js/plyr.js
View File

@ -2419,7 +2419,7 @@
toggleClass(player.elements.container, config.classes.pip.enabled, support.pip && player.type === 'video');
// Check for airplay support
toggleClass(player.elements.container, config.classes.airplay.enabled, support.airplay && player.type === 'video');
toggleClass(player.elements.container, config.classes.airplay.enabled, support.airplay && inArray(config.types.html5, player.type));
// If there's no autoplay attribute, assume the video is stopped and add state class
toggleClass(player.elements.container, config.classes.stopped, config.autoplay);
@ -3264,6 +3264,66 @@
}
}
// Toggle Menu
function toggleMenu(event) {
var menu = player.elements.settings.menu.parentNode;
var toggle = event.target;
var target = document.getElementById(toggle.getAttribute('aria-controls'));
var show = (toggle.getAttribute('aria-expanded') === 'false');
// Nothing to show, bail
if (!is.htmlElement(target)) {
return;
}
// Are we targetting a tab?
var isTab = target.getAttribute('role') === 'tabpanel';
var targetWidth;
var targetHeight;
var container;
// Hide all other tabs
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);
}
target.setAttribute('aria-hidden', !show);
toggle.setAttribute('aria-expanded', show);
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);
}
}
// Mute
function toggleMute(muted) {
// If the method is called without parameter, toggle based on current value
@ -4196,64 +4256,19 @@
});
// Settings menu
on(player.elements.settings.menu, 'click', function(event) {
// Settings menu
var menu = this;
var toggle = event.target;
var target = document.getElementById(toggle.getAttribute('aria-controls'));
var show = (toggle.getAttribute('aria-expanded') === 'false');
on(player.elements.settings.menu, 'click', toggleMenu);
// Nothing to show, bail
if (!is.htmlElement(target)) {
// Click anywhere closes menu
on(document.body, 'click', function(event) {
var menu = player.elements.settings.menu;
var form = menu.querySelector('form');
if (form.getAttribute('aria-hidden') === 'true' || menu.contains(event.target)) {
return;
}
// Are we targetting a tab?
var isTab = target.getAttribute('role') === 'tabpanel';
var targetWidth;
var targetHeight;
var container;
// Hide all other tabs
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);
}
target.setAttribute('aria-hidden', !show);
toggle.setAttribute('aria-expanded', show);
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);
}
// TODO: This should call some sort of menuToggle function?
form.setAttribute('aria-hidden', true);
});
// Settings menu items - use event delegation as items are added/removed
@ -4263,6 +4278,7 @@
handlerProxy.call(this, event, config.listeners.speed, function() {
//var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
//setSpeed(Number(speedValue));
console.warn("Set speed");
});
}