diff options
author | Sam Potts <sam@potts.es> | 2018-11-11 11:05:09 +1100 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2018-11-11 11:05:09 +1100 |
commit | b7b2e3c0aa0749eed53ae91230082cb0482e1f28 (patch) | |
tree | f073bde14df6459419323dd6570b2549b8d26c41 /src/js/utils/events.js | |
parent | 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f (diff) | |
parent | 2c8a337f265f3f84133bc674f3836802588c0c13 (diff) | |
download | plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.tar.lz plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.tar.xz plyr-b7b2e3c0aa0749eed53ae91230082cb0482e1f28.zip |
Merge branch 'develop' into css-variables
# Conflicts:
# demo/dist/demo.css
# demo/dist/demo.js
# demo/dist/demo.js.map
# demo/dist/demo.min.js
# demo/dist/demo.min.js.map
# dist/plyr.css
# dist/plyr.js
# dist/plyr.js.map
# dist/plyr.min.js
# dist/plyr.min.js.map
# dist/plyr.polyfilled.js
# dist/plyr.polyfilled.js.map
# dist/plyr.polyfilled.min.js
# dist/plyr.polyfilled.min.js.map
# gulpfile.js
# src/sass/components/captions.scss
# src/sass/components/control.scss
Diffstat (limited to 'src/js/utils/events.js')
-rw-r--r-- | src/js/utils/events.js | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/src/js/utils/events.js b/src/js/utils/events.js new file mode 100644 index 00000000..9f734f04 --- /dev/null +++ b/src/js/utils/events.js @@ -0,0 +1,120 @@ +// ========================================================================== +// 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(element, event, callback, toggle = false, passive = true, capture = false) { + // Bail if no element, event, or callback + if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) { + 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 => { + if (this && this.eventListeners && toggle) { + // Cache event listener + this.eventListeners.push({ element, type, callback, options }); + } + + element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options); + }); +} + +// Bind event handler +export function on(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, true, passive, capture); +} + +// Unbind event handler +export function off(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, false, passive, capture); +} + +// Bind once-only event handler +export function once(element, events = '', callback, passive = true, capture = false) { + function onceCallback(...args) { + off(element, events, onceCallback, passive, capture); + callback.apply(this, args); + } + + toggleListener.call(this, element, events, onceCallback, true, passive, capture); +} + +// Trigger event +export function triggerEvent(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); +} + +// Unbind all cached event listeners +export function unbindListeners() { + if (this && this.eventListeners) { + this.eventListeners.forEach(item => { + const { element, type, callback, options } = item; + element.removeEventListener(type, callback, options); + }); + + 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(() => {}); +} |