diff options
Diffstat (limited to 'demo/src/js')
| -rw-r--r-- | demo/src/js/demo.js (renamed from demo/src/js/main.js) | 184 | ||||
| -rw-r--r-- | demo/src/js/lib/classlist.js | 237 | ||||
| -rw-r--r-- | demo/src/js/lib/tab-focus.js | 26 |
3 files changed, 111 insertions, 336 deletions
diff --git a/demo/src/js/main.js b/demo/src/js/demo.js index bc2ea0aa..eef49596 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/demo.js @@ -4,9 +4,7 @@ // Please see readme.md in the root or github.com/sampotts/plyr // ========================================================================== -/*global Plyr*/ - -(function() { +document.addEventListener('DOMContentLoaded', () => { if (window.shr) { window.shr.setup({ count: { @@ -15,12 +13,33 @@ }); } - /*document.body.addEventListener('ready', function(event) { + // Setup tab focus + const tabClassName = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', event => { + event.target.classList.remove(tabClassName); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + window.setTimeout(() => { + document.activeElement.classList.add(tabClassName); + }, 0); + }); + + /* document.body.addEventListener('ready', function(event) { console.log(event); - });*/ + }); */ // Setup the player - var player = new Plyr('#player', { + const player = new window.Plyr('#player', { debug: true, title: 'View From A Blue Moon', iconUrl: '../dist/plyr.svg', @@ -28,70 +47,36 @@ controls: true, }, captions: { - defaultActive: true, + active: true, }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'], + controls: [ + 'play-large', + 'play', + 'progress', + 'current-time', + 'mute', + 'volume', + 'captions', + 'settings', + 'fullscreen', + 'pip', + 'airplay', + ], }); // Expose for testing window.player = player; // Setup type toggle - var buttons = document.querySelectorAll('[data-source]'); - var types = { + const buttons = document.querySelectorAll('[data-source]'); + const types = { video: 'video', audio: 'audio', youtube: 'youtube', vimeo: 'vimeo', }; - var currentType = window.location.hash.replace('#', ''); - var historySupport = window.history && window.history.pushState; - - // Bind to each button - [].forEach.call(buttons, function(button) { - button.addEventListener('click', function() { - var type = this.getAttribute('data-source'); - - newSource(type); - - if (historySupport) { - history.pushState({ type: type }, '', '#' + type); - } - }); - }); - - // List for backwards/forwards - window.addEventListener('popstate', function(event) { - if (event.state && 'type' in event.state) { - newSource(event.state.type); - } - }); - - // On load - if (historySupport) { - var video = !currentType.length; - - // If there's no current type set, assume video - if (video) { - currentType = types.video; - } - - // Replace current history state - if (currentType in types) { - history.replaceState( - { - type: currentType, - }, - '', - video ? '' : '#' + currentType - ); - } - - // If it's not video, load the source - if (currentType !== types.video) { - newSource(currentType, true); - } - } + let currentType = window.location.hash.replace('#', ''); + const historySupport = window.history && window.history.pushState; // Toggle class on an element function toggleClass(element, className, state) { @@ -109,7 +94,7 @@ switch (type) { case types.video: - player.source({ + player.src = { type: 'video', title: 'View From A Blue Moon', sources: [ @@ -134,11 +119,12 @@ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ], - }); + }; + break; case types.audio: - player.source({ + player.src = { type: 'audio', title: 'Kishi Bashi – “It All Began With A Burst”', sources: [ @@ -151,11 +137,12 @@ type: 'audio/ogg', }, ], - }); + }; + break; case types.youtube: - player.source({ + player.src = { type: 'video', title: 'View From A Blue Moon', sources: [ @@ -164,11 +151,12 @@ type: 'youtube', }, ], - }); + }; + break; case types.vimeo: - player.source({ + player.src = { type: 'video', title: 'View From A Blue Moon', sources: [ @@ -177,7 +165,11 @@ type: 'vimeo', }, ], - }); + }; + + break; + + default: break; } @@ -185,23 +177,68 @@ currentType = type; // Remove active classes - for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, 'active', false); - } + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true); + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); // Show cite - [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { cite.setAttribute('hidden', ''); }); - document.querySelector('.plyr__cite--' + type).removeAttribute('hidden'); + document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); + } + + // Bind to each button + Array.from(buttons).forEach(button => { + button.addEventListener('click', () => { + const type = button.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + window.history.pushState({ type }, '', `#${type}`); + } + }); + }); + + // List for backwards/forwards + window.addEventListener('popstate', event => { + if (event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if (historySupport) { + const video = !currentType.length; + + // If there's no current type set, assume video + if (video) { + currentType = types.video; + } + + // Replace current history state + if (currentType in types) { + window.history.replaceState( + { + type: currentType, + }, + '', + video ? '' : `#${currentType}` + ); + } + + // If it's not video, load the source + if (currentType !== types.video) { + newSource(currentType, true); + } } -})(); +}); // Google analytics // For demo site (https://plyr.io) only +/* eslint-disable */ if (window.location.host === 'plyr.io') { (function(i, s, o, g, r, a, m) { i.GoogleAnalyticsObject = r; @@ -220,3 +257,4 @@ if (window.location.host === 'plyr.io') { window.ga('create', 'UA-40881672-11', 'auto'); window.ga('send', 'pageview'); } +/* eslint-enable */ diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js deleted file mode 100644 index eac1e99e..00000000 --- a/demo/src/js/lib/classlist.js +++ /dev/null @@ -1,237 +0,0 @@ -/* - * classList.js: Cross-browser full element.classList implementation. - * 1.1.20150312 - * - * By Eli Grey, http://eligrey.com - * License: Dedicated to the public domain. - * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md - */ - -/*global self, document, DOMException */ - -/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ - -if ("document" in self) { - -// Full polyfill for browsers with no classList support -if (!("classList" in document.createElement("_"))) { - -(function (view) { - -"use strict"; - -if (!('Element' in view)) return; - -var - classListProp = "classList" - , protoProp = "prototype" - , elemCtrProto = view.Element[protoProp] - , objCtr = Object - , strTrim = String[protoProp].trim || function () { - return this.replace(/^\s+|\s+$/g, ""); - } - , arrIndexOf = Array[protoProp].indexOf || function (item) { - var - i = 0 - , len = this.length - ; - for (; i < len; i++) { - if (i in this && this[i] === item) { - return i; - } - } - return -1; - } - // Vendors: please allow content code to instantiate DOMExceptions - , DOMEx = function (type, message) { - this.name = type; - this.code = DOMException[type]; - this.message = message; - } - , checkTokenAndGetIndex = function (classList, token) { - if (token === "") { - throw new DOMEx( - "SYNTAX_ERR" - , "An invalid or illegal string was specified" - ); - } - if (/\s/.test(token)) { - throw new DOMEx( - "INVALID_CHARACTER_ERR" - , "String contains an invalid character" - ); - } - return arrIndexOf.call(classList, token); - } - , ClassList = function (elem) { - var - trimmedClasses = strTrim.call(elem.getAttribute("class") || "") - , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] - , i = 0 - , len = classes.length - ; - for (; i < len; i++) { - this.push(classes[i]); - } - this._updateClassName = function () { - elem.setAttribute("class", this.toString()); - }; - } - , classListProto = ClassList[protoProp] = [] - , classListGetter = function () { - return new ClassList(this); - } -; -// Most DOMException implementations don't allow calling DOMException's toString() -// on non-DOMExceptions. Error's toString() is sufficient here. -DOMEx[protoProp] = Error[protoProp]; -classListProto.item = function (i) { - return this[i] || null; -}; -classListProto.contains = function (token) { - token += ""; - return checkTokenAndGetIndex(this, token) !== -1; -}; -classListProto.add = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - ; - do { - token = tokens[i] + ""; - if (checkTokenAndGetIndex(this, token) === -1) { - this.push(token); - updated = true; - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.remove = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - , index - ; - do { - token = tokens[i] + ""; - index = checkTokenAndGetIndex(this, token); - while (index !== -1) { - this.splice(index, 1); - updated = true; - index = checkTokenAndGetIndex(this, token); - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.toggle = function (token, force) { - token += ""; - - var - result = this.contains(token) - , method = result ? - force !== true && "remove" - : - force !== false && "add" - ; - - if (method) { - this[method](token); - } - - if (force === true || force === false) { - return force; - } else { - return !result; - } -}; -classListProto.toString = function () { - return this.join(" "); -}; - -if (objCtr.defineProperty) { - var classListPropDesc = { - get: classListGetter - , enumerable: true - , configurable: true - }; - try { - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } catch (ex) { // IE 8 doesn't support enumerable:true - if (ex.number === -0x7FF5EC54) { - classListPropDesc.enumerable = false; - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } - } -} else if (objCtr[protoProp].__defineGetter__) { - elemCtrProto.__defineGetter__(classListProp, classListGetter); -} - -}(self)); - -} else { -// There is full or partial native classList support, so just check if we need -// to normalize the add/remove and toggle APIs. - -(function () { - "use strict"; - - var testElement = document.createElement("_"); - - testElement.classList.add("c1", "c2"); - - // Polyfill for IE 10/11 and Firefox <26, where classList.add and - // classList.remove exist but support only one argument at a time. - if (!testElement.classList.contains("c2")) { - var createMethod = function(method) { - var original = DOMTokenList.prototype[method]; - - DOMTokenList.prototype[method] = function(token) { - var i, len = arguments.length; - - for (i = 0; i < len; i++) { - token = arguments[i]; - original.call(this, token); - } - }; - }; - createMethod('add'); - createMethod('remove'); - } - - testElement.classList.toggle("c3", false); - - // Polyfill for IE 10 and Firefox <24, where classList.toggle does not - // support the second argument. - if (testElement.classList.contains("c3")) { - var _toggle = DOMTokenList.prototype.toggle; - - DOMTokenList.prototype.toggle = function(token, force) { - if (1 in arguments && !this.contains(token) === !force) { - return force; - } else { - return _toggle.call(this, token); - } - }; - - } - - testElement = null; -}()); - -} - -}
\ No newline at end of file diff --git a/demo/src/js/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js deleted file mode 100644 index 06e51203..00000000 --- a/demo/src/js/lib/tab-focus.js +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// tab-focus.js -// Detect keyboard tabbing -// ========================================================================== - -(function() { - var className = 'tab-focus'; - - // Remove class on blur - document.addEventListener('focusout', function(event) { - event.target.classList.remove(className); - }); - - // Add classname to tabbed elements - document.addEventListener('keydown', function(event) { - if (event.keyCode !== 9) { - return; - } - - // Delay the adding of classname until the focus has changed - // This event fires before the focusin event - window.setTimeout(function() { - document.activeElement.classList.add(className); - }, 0); - }); -})(); |