From fb48b330cc590d39b44ac508f232c552d97e3925 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 17:41:17 +0200 Subject: [PATCH 1/4] typo --- src/js/utils/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/utils/events.js b/src/js/utils/events.js index a8e05f54..b91195d9 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -28,7 +28,7 @@ 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 + // Bail if no elements, event, or callback if (is.empty(elements) || is.empty(event) || !is.function(callback)) { return; } From f15c1344b0975e7f692492b775062489ee4b1302 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 19:10:00 +0200 Subject: [PATCH 2/4] Removed support for multiple elements in toggleListener --- src/js/listeners.js | 8 +++++--- src/js/utils/events.js | 26 +++++++------------------- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/js/listeners.js b/src/js/listeners.js index 65d24277..0597e9d3 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -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 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)); }); } diff --git a/src/js/utils/events.js b/src/js/utils/events.js index b91195d9..3923f291 100644 --- a/src/js/utils/events.js +++ b/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 elements, 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, once = false) { + // Bail if no element, event, or callback + if (!is.element(element) || is.empty(event) || !is.function(callback)) { return; } @@ -66,10 +54,10 @@ export function toggleListener(elements, event, callback, toggle = false, passiv events.forEach(type => { if (this && this.eventListeners && toggle && !once) { // 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); }); } @@ -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 = []; From 53933dff7eaa8074e57cccc7cab18d5be6c83fc4 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 19:39:26 +0200 Subject: [PATCH 3/4] Use toggleListener in trapFocus --- src/js/utils/elements.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js index 4d4f97cd..55866367 100644 --- a/src/js/utils/elements.js +++ b/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 From 927326f715132d56c79de70e9b871594514caa2f Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 19:43:08 +0200 Subject: [PATCH 4/4] Also remove 'once' event listeners when destroying (they may still be waiting) --- src/js/controls.js | 2 +- src/js/listeners.js | 2 +- src/js/plyr.js | 2 +- src/js/utils/events.js | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/controls.js b/src/js/controls.js index 6d15e486..0e28c222 100644 --- a/src/js/controls.js +++ b/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`; diff --git a/src/js/listeners.js b/src/js/listeners.js index 0597e9d3..283bd4a2 100644 --- a/src/js/listeners.js +++ b/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 diff --git a/src/js/plyr.js b/src/js/plyr.js index 71619851..543291e7 100644 --- a/src/js/plyr.js +++ b/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 diff --git a/src/js/utils/events.js b/src/js/utils/events.js index 3923f291..d6ffc043 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -27,7 +27,7 @@ const supportsPassiveListeners = (() => { })(); // Toggle event listener -export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false, once = false) { +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; @@ -52,7 +52,7 @@ export function toggleListener(element, event, callback, toggle = false, passive // 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({ element, type, callback, options }); } @@ -78,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