diff options
author | Sam Potts <me@sampotts.me> | 2017-04-17 21:05:35 +1000 |
---|---|---|
committer | Sam Potts <me@sampotts.me> | 2017-04-17 21:05:35 +1000 |
commit | 01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82 (patch) | |
tree | 855bafb5cd4c53f870e0b6f8d62ef35a3fa7d760 /src/js | |
parent | 9b2396f5ff266284bb6c526413d14b075e131d3d (diff) | |
download | plyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.tar.lz plyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.tar.xz plyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.zip |
Toggle menu
Diffstat (limited to 'src/js')
-rw-r--r-- | src/js/plyr.js | 126 |
1 files changed, 71 insertions, 55 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 42124ea4..6f235c52 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -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'); - - // Nothing to show, bail - if (!is.htmlElement(target)) { - return; - } + on(player.elements.settings.menu, 'click', toggleMenu); - // Are we targetting a tab? - var isTab = target.getAttribute('role') === 'tabpanel'; - var targetWidth; - var targetHeight; - var container; + // Click anywhere closes menu + on(document.body, 'click', function(event) { + var menu = player.elements.settings.menu; + var form = menu.querySelector('form'); - // 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); + if (form.getAttribute('aria-hidden') === 'true' || menu.contains(event.target)) { + return; } - 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"); }); } |