Merge pull request #1030 from friday/event-improvements

Minor event changes

src/js/controls.js

@@ -1068,7 +1068,7 @@ const controls = {
             };
 
             // Listen for the transition finishing and restore auto height/width
-            once(container, transitionEndEvent, restore);
+            once.call(this, container, transitionEndEvent, restore);
 
             // Set dimensions to target
             container.style.width = `${size.width}px`;

src/js/listeners.js

@@ -210,7 +210,7 @@ class Listeners {
         toggleListener.call(this.player, document.body, 'click', this.toggleMenu, toggle);
 
         // Detect touch by events
-        once(document.body, 'touchstart', this.firstTouch);
+        once.call(this.player, document.body, 'touchstart', this.firstTouch);
     }
 
     // Container listeners
@@ -453,7 +453,9 @@ class Listeners {
         };
 
         // Play/pause toggle
-        bind(this.player.elements.buttons.play, 'click', this.player.togglePlay, 'play');
+        Array.from(this.player.elements.buttons.play).forEach(button => {
+            bind(button, 'click', this.player.togglePlay, 'play');
+        });
 
         // Pause
         bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
@@ -634,8 +636,8 @@ class Listeners {
 
         // Polyfill for lower fill in <input type="range"> for webkit
         if (browser.isWebkit) {
-            bind(getElements.call(this.player, 'input[type="range"]'), 'input', event => {
-                controls.updateRangeFill.call(this.player, event.target);
+            Array.from(getElements.call(this.player, 'input[type="range"]')).forEach(element => {
+                bind(element, 'input', event => controls.updateRangeFill.call(this.player, event.target));
             });
         }
 

src/js/plyr.js

@@ -975,7 +975,7 @@ class Plyr {
      * @param {function} callback - Callback for when event occurs
      */
     once(event, callback) {
-        once(this.elements.container, event, callback);
+        once.call(this, this.elements.container, event, callback);
     }
     /**
      * Remove event listeners

src/js/utils/elements.js

@@ -2,7 +2,7 @@
 // Element utils
 // ==========================================================================
 
-import { off, on } from './events';
+import { toggleListener } from './events';
 import is from './is';
 
 // Wrap an element
@@ -277,11 +277,7 @@ export function trapFocus(element = null, toggle = false) {
         }
     };
 
-    if (toggle) {
-        on(this.elements.container, 'keydown', trap, false);
-    } else {
-        off(this.elements.container, 'keydown', trap, false);
-    }
+    toggleListener.call(this, this.elements.container, 'keydown', trap, toggle, false);
 }
 
 // Toggle aria-pressed state on a toggle button

src/js/utils/events.js

@@ -27,21 +27,9 @@ const supportsPassiveListeners = (() => {
 })();
 
 // Toggle event listener
-export function toggleListener(elements, event, callback, toggle = false, passive = true, capture = false, once = false) {
-    // Bail if no elemetns, event, or callback
-    if (is.empty(elements) || is.empty(event) || !is.function(callback)) {
-        return;
-    }
-
-    // If a nodelist is passed, call itself on each node
-    if (is.nodeList(elements) || is.array(elements)) {
-        // Create listener for each node
-        Array.from(elements).forEach(element => {
-            if (element instanceof Node) {
-                toggleListener.call(null, element, event, callback, toggle, passive, capture);
-            }
-        });
-
+export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {
+    // Bail if no element, event, or callback
+    if (!is.element(element) || is.empty(event) || !is.function(callback)) {
         return;
     }
 
@@ -64,12 +52,12 @@ export function toggleListener(elements, event, callback, toggle = false, passiv
 
     // If a single node is passed, bind the event listener
     events.forEach(type => {
-        if (this && this.eventListeners && toggle && !once) {
+        if (this && this.eventListeners && toggle) {
             // Cache event listener
-            this.eventListeners.push({ elements, type, callback, options });
+            this.eventListeners.push({ element, type, callback, options });
         }
 
-        elements[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
+        element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
     });
 }
 
@@ -90,7 +78,7 @@ export function once(element, events = '', callback, passive = true, capture = f
         callback.apply(this, args);
     }
 
-    toggleListener(element, events, onceCallback, true, passive, capture, true);
+    toggleListener.call(this, element, events, onceCallback, true, passive, capture);
 }
 
 // Trigger event
@@ -116,8 +104,8 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
 export function unbindListeners() {
     if (this && this.eventListeners) {
         this.eventListeners.forEach(item => {
-            const { elements, type, callback, options } = item;
-            elements.removeEventListener(type, callback, options);
+            const { element, type, callback, options } = item;
+            element.removeEventListener(type, callback, options);
         });
 
         this.eventListeners = [];