From 392dfd024c505f5ae1bbb2f0d3e0793c251a1f35 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 13 Jun 2018 00:02:55 +1000 Subject: Utils broken down into seperate files and exports --- src/js/utils/events.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/js/utils/events.js (limited to 'src/js/utils/events.js') diff --git a/src/js/utils/events.js b/src/js/utils/events.js new file mode 100644 index 00000000..cb92a93c --- /dev/null +++ b/src/js/utils/events.js @@ -0,0 +1,98 @@ +// ========================================================================== +// Event utils +// ========================================================================== + +import is from './is'; + +// Check for passive event listener support +// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md +// https://www.youtube.com/watch?v=NPM6172J22g +const supportsPassiveListeners = (() => { + // Test via a getter in the options object to see if the passive property is accessed + let supported = false; + try { + const options = Object.defineProperty({}, 'passive', { + get() { + supported = true; + return null; + }, + }); + window.addEventListener('test', null, options); + window.removeEventListener('test', null, options); + } catch (e) { + // Do nothing + } + + return supported; +})(); + +// Toggle event listener +export function toggleListener(elements, event, callback, toggle = false, passive = true, capture = 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); + } + }); + + return; + } + + // Allow multiple events + const events = event.split(' '); + + // Build options + // Default to just the capture boolean for browsers with no passive listener support + let options = capture; + + // If passive events listeners are supported + if (supportsPassiveListeners) { + options = { + // Whether the listener can be passive (i.e. default never prevented) + passive, + // Whether the listener is a capturing listener or not + capture, + }; + } + + // If a single node is passed, bind the event listener + events.forEach(type => { + elements[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options); + }); +} + +// Bind event handler +export function on(element, events = '', callback, passive = true, capture = false) { + toggleListener(element, events, callback, true, passive, capture); +} + +// Unbind event handler +export function off(element, events = '', callback, passive = true, capture = false) { + toggleListener(element, events, callback, false, passive, capture); +} + +// Trigger event +export function trigger(element, type = '', bubbles = false, detail = {}) { + // Bail if no element + if (!is.element(element) || is.empty(type)) { + return; + } + + // Create and dispatch the event + const event = new CustomEvent(type, { + bubbles, + detail: Object.assign({}, detail, { + plyr: this, + }), + }); + + // Dispatch the event + element.dispatchEvent(event); +} -- cgit v1.2.3 From fb48b330cc590d39b44ac508f232c552d97e3925 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 17:41:17 +0200 Subject: typo --- src/js/utils/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/utils/events.js') 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; } -- cgit v1.2.3 From f15c1344b0975e7f692492b775062489ee4b1302 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 19:10:00 +0200 Subject: Removed support for multiple elements in toggleListener --- src/js/utils/events.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) (limited to 'src/js/utils/events.js') 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 = []; -- cgit v1.2.3 From 927326f715132d56c79de70e9b871594514caa2f Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Tue, 12 Jun 2018 19:43:08 +0200 Subject: Also remove 'once' event listeners when destroying (they may still be waiting) --- src/js/utils/events.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js/utils/events.js') 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 -- cgit v1.2.3 From 2fe98f3721c68f663f8439e2ab590a0846052271 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Wed, 13 Jun 2018 14:29:55 +0200 Subject: Fix condition in events.toggleListener to allow non-elements --- src/js/utils/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/utils/events.js') diff --git a/src/js/utils/events.js b/src/js/utils/events.js index d6ffc043..1e940c71 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -29,7 +29,7 @@ const supportsPassiveListeners = (() => { // Toggle event listener 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)) { + if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) { return; } -- cgit v1.2.3 From 2af60c5c0db42655b9adb14a518fc94c2c0f6222 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Fri, 15 Jun 2018 23:01:33 +0200 Subject: Add 'ready' promise --- src/js/utils/events.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/js/utils/events.js') diff --git a/src/js/utils/events.js b/src/js/utils/events.js index 1e940c71..9009d1cc 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -111,3 +111,9 @@ export function unbindListeners() { this.eventListeners = []; } } + +// Run method when / if player is ready +export function ready () { + return new Promise(resolve => this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)) + .then(() => {}); +} -- cgit v1.2.3 From d4abb4b1438cb316aacae480e7b7e9b055a60b24 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 17 Jun 2018 01:04:55 +1000 Subject: 120 line width, package upgrade --- src/js/utils/events.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src/js/utils/events.js') diff --git a/src/js/utils/events.js b/src/js/utils/events.js index 9009d1cc..9f734f04 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -113,7 +113,8 @@ export function unbindListeners() { } // Run method when / if player is ready -export function ready () { - return new Promise(resolve => this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)) - .then(() => {}); +export function ready() { + return new Promise( + resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)), + ).then(() => {}); } -- cgit v1.2.3