aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2017-04-17 21:05:35 +1000
committerSam Potts <me@sampotts.me>2017-04-17 21:05:35 +1000
commit01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82 (patch)
tree855bafb5cd4c53f870e0b6f8d62ef35a3fa7d760 /src/js
parent9b2396f5ff266284bb6c526413d14b075e131d3d (diff)
downloadplyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.tar.lz
plyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.tar.xz
plyr-01d1ac9ab9b02f3751e7ef8a174fdcc388a36c82.zip
Toggle menu
Diffstat (limited to 'src/js')
-rw-r--r--src/js/plyr.js126
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");
});
}