Toggle menu

.jsbeautifyrc

@@ -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,

.jshintrc

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

notes.md

@@ -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

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) {
+            on(player.elements.settings.menu, 'click', toggleMenu);
-                // 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
+            // Click anywhere closes menu
-                if (!is.htmlElement(target)) {
+            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?
+                // TODO: This should call some sort of menuToggle function?
-                var isTab = target.getAttribute('role') === 'tabpanel';
+                form.setAttribute('aria-hidden', true);
-                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);
-                }
             });
 
             // 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");
                     });
                 }