diff options
Diffstat (limited to 'dist/plyr.js')
| -rw-r--r-- | dist/plyr.js | 133 |
1 files changed, 70 insertions, 63 deletions
diff --git a/dist/plyr.js b/dist/plyr.js index 804d7dd5..66ea1d3f 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1624,7 +1624,7 @@ typeof navigator === "object" && (function (global, factory) { var attributes = getAttributesFromSelector(this.config.selectors.display[type]); var container = createElement('div', extend(attributes, { - class: 'plyr__time ' + attributes.class, + class: (this.config.classNames.display.time + ' ' + (attributes.class ? attributes.class : '')).trim(), 'aria-label': i18n.get(type, this.config) }), '00:00'); @@ -1646,16 +1646,42 @@ typeof navigator === "object" && (function (global, factory) { _ref$checked = _ref.checked, checked = _ref$checked === undefined ? false : _ref$checked; - var item = createElement('button', extend(getAttributesFromSelector(this.config.selectors.inputs[type]), { + var attributes = getAttributesFromSelector(this.config.selectors.inputs[type]); + + var item = createElement('button', extend(attributes, { type: 'button', + role: 'menuitemradio', + class: (this.config.classNames.control + ' ' + (attributes.class ? attributes.class : '')).trim(), value: value, 'aria-checked': checked - }), title); + })); + + // We have to set as HTML incase of special characters + item.innerHTML = title; if (is.element(badge)) { item.appendChild(badge); } + Object.defineProperty(item, 'checked', { + enumerable: true, + get: function get$$1() { + return item.getAttribute('aria-checked') === 'true'; + }, + set: function set$$1(checked) { + // Ensure exclusivity + if (checked) { + Array.from(item.parentNode.children).filter(function (node) { + return matches(node, '[role="menuitemradio"]'); + }).forEach(function (node) { + return node.setAttribute('aria-checked', 'false'); + }); + } + + item.setAttribute('aria-checked', checked ? 'true' : 'false'); + } + }); + list.appendChild(item); }, @@ -1930,12 +1956,12 @@ typeof navigator === "object" && (function (global, factory) { var _this3 = this; // Menu required - if (!is.element(this.elements.settings.menus.quality)) { + if (!is.element(this.elements.settings.panels.quality)) { return; } var type = 'quality'; - var list = this.elements.settings.menus.quality.querySelector('[role="menu"]'); + var list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); // Set options if passed and filter based on uniqueness and config if (is.array(options)) { @@ -2018,7 +2044,7 @@ typeof navigator === "object" && (function (global, factory) { // Update the selected setting updateSetting: function updateSetting(setting, container, input) { - var pane = this.elements.settings.menus[setting]; + var pane = this.elements.settings.panels[setting]; var value = null; var list = container; @@ -2060,10 +2086,10 @@ typeof navigator === "object" && (function (global, factory) { label.innerHTML = controls.getLabel.call(this, setting, value); // Find the radio option and check it - var target = list && list.querySelector('button[value="' + value + '"]'); + var target = list && list.querySelector('[value="' + value + '"]'); if (is.element(target)) { - target.setAttribute('aria-checked', true); + target.checked = true; } }, @@ -2071,14 +2097,14 @@ typeof navigator === "object" && (function (global, factory) { // Set the looping options /* setLoopMenu() { // Menu required - if (!is.element(this.elements.settings.menus.loop)) { + if (!is.element(this.elements.settings.panels.loop)) { return; } const options = ['start', 'end', 'all', 'reset']; - const list = this.elements.settings.menus.loop.querySelector('[role="menu"]'); + const list = this.elements.settings.panels.loop.querySelector('[role="menu"]'); // Show the pane and tab toggleHidden(this.elements.settings.buttons.loop, false); - toggleHidden(this.elements.settings.menus.loop, false); + toggleHidden(this.elements.settings.panels.loop, false); // Toggle the pane and tab const toggle = !is.empty(this.loop.options); controls.toggleMenuButton.call(this, 'loop', toggle); @@ -2113,7 +2139,7 @@ typeof navigator === "object" && (function (global, factory) { // TODO: Captions or language? Currently it's mixed var type = 'captions'; - var list = this.elements.settings.menus.captions.querySelector('[role="menu"]'); + var list = this.elements.settings.panels.captions.querySelector('[role="menu"]'); var tracks = captions.getTracks.call(this); // Toggle the pane and tab @@ -2168,7 +2194,7 @@ typeof navigator === "object" && (function (global, factory) { } // Menu required - if (!is.element(this.elements.settings.menus.speed)) { + if (!is.element(this.elements.settings.panels.speed)) { return; } @@ -2199,7 +2225,7 @@ typeof navigator === "object" && (function (global, factory) { } // Get the list to populate - var list = this.elements.settings.menus.speed.querySelector('[role="menu"]'); + var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Empty the menu emptyElement(list); @@ -2278,19 +2304,13 @@ typeof navigator === "object" && (function (global, factory) { }, - // Get the natural size of a tab - getTabSize: function getTabSize(tab) { + // Get the natural size of a menu panel + getMenuSize: function getMenuSize(tab) { var clone = tab.cloneNode(true); clone.style.position = 'absolute'; clone.style.opacity = 0; clone.removeAttribute('hidden'); - // Prevent input's being unchecked due to the name being identical - /* Array.from(clone.querySelectorAll('input[name]')).forEach(input => { - const name = input.getAttribute('name'); - input.setAttribute('name', `${name}-clone`); - }); */ - // Append to parent so we get the "real" size tab.parentNode.appendChild(clone); @@ -2308,38 +2328,24 @@ typeof navigator === "object" && (function (global, factory) { }, - // Toggle Menu - showMenu: function showMenu() { + // Show a panel in the menu + showMenuPanel: function showMenuPanel() { var _this6 = this; var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; - var menu = this.elements.settings.menu; - - var pane = document.getElementById('plyr-settings-' + this.id + '-' + type); - console.warn('plyr-settings-' + this.id + '-' + type); + var target = document.getElementById('plyr-settings-' + this.id + '-' + type); // Nothing to show, bail - if (!is.element(pane)) { - console.warn('No pane found'); + if (!is.element(target)) { return; } - // Are we targeting a tab? If not, bail - /* const isTab = pane.getAttribute('role') === 'tabpanel'; - if (!isTab) { - return; - } */ - - // Hide all other tabs - // Get other tabs - var current = menu.querySelector('[id^=plyr-settings-' + this.id + ']:not([hidden])'); - var container = current.parentNode; - - // Set other toggles to be expanded false - /* Array.from(menu.querySelectorAll(`[aria-controls="${current.getAttribute('id')}"]`)).forEach(toggle => { - toggle.setAttribute('aria-expanded', false); - }); */ + // Hide all other panels + var container = target.parentNode; + var current = Array.from(container.children).find(function (node) { + return !node.hidden; + }); // If we can do fancy animations, we'll animate the height/width if (support.transitions && !support.reducedMotion) { @@ -2348,12 +2354,12 @@ typeof navigator === "object" && (function (global, factory) { container.style.height = current.scrollHeight + 'px'; // Get potential sizes - var size = controls.getTabSize.call(this, pane); + var size = controls.getMenuSize.call(this, target); // Restore auto height/width - var restore = function restore(e) { + var restore = function restore(event) { // We're only bothered about height and width on the container - if (e.target !== container || !['width', 'height'].includes(e.propertyName)) { + if (event.target !== container || !['width', 'height'].includes(event.propertyName)) { return; } @@ -2378,16 +2384,10 @@ typeof navigator === "object" && (function (global, factory) { // current.setAttribute('tabindex', -1); // Set attributes on target - toggleHidden(pane, false); - - /* const tabs = getElements.call(this, `[aria-controls="${target}"]`); - Array.from(tabs).forEach(tab => { - tab.setAttribute('aria-expanded', true); - }); - pane.removeAttribute('tabindex'); */ + toggleHidden(target, false); // Focus the first item - pane.querySelectorAll('button:not(:disabled), input:not(:disabled), [tabindex]')[0].focus(); + target.querySelectorAll('[role^="menuitem"]')[0].focus(); }, @@ -2532,7 +2532,7 @@ typeof navigator === "object" && (function (global, factory) { var menuItem = createElement('button', extend(getAttributesFromSelector(_this7.config.selectors.buttons.settings), { type: 'button', class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--forward', - 'role': 'menuitem', + role: 'menuitem', 'aria-haspopup': true })); @@ -2556,10 +2556,14 @@ typeof navigator === "object" && (function (global, factory) { }); // Back button - pane.appendChild(createElement('button', { + var back = createElement('button', { type: 'button', class: _this7.config.classNames.control + ' ' + _this7.config.classNames.control + '--back' - }, i18n.get(type, _this7.config))); + }, i18n.get(type, _this7.config)); + back.addEventListener('click', function () { + controls.showMenuPanel.call(_this7, 'home'); + }); + pane.appendChild(back); // Menu pane.appendChild(createElement('div', { @@ -2569,11 +2573,11 @@ typeof navigator === "object" && (function (global, factory) { inner.appendChild(pane); menuItem.addEventListener('click', function () { - controls.showMenu.call(_this7, type); + controls.showMenuPanel.call(_this7, type); }); _this7.elements.settings.buttons[type] = menuItem; - _this7.elements.settings.menus[type] = pane; + _this7.elements.settings.panels[type] = pane; }); home.appendChild(menu); @@ -3482,6 +3486,9 @@ typeof navigator === "object" && (function (global, factory) { isTouch: 'plyr--is-touch', uiSupported: 'plyr--full-ui', noTransition: 'plyr--no-transition', + display: { + time: 'plyr__time' + }, menu: { value: 'plyr__menu__value', badge: 'plyr__badge', @@ -4608,7 +4615,7 @@ typeof navigator === "object" && (function (global, factory) { // Go back to home tab on click var showHomeTab = function showHomeTab() { - controls.showMenu.call(_this4.player, 'home'); + controls.showMenuPanel.call(_this4.player, 'home'); }; // Settings menu items - use event delegation as items are added/removed @@ -6942,7 +6949,7 @@ typeof navigator === "object" && (function (global, factory) { settings: { popup: null, menu: null, - menus: {}, + panels: {}, buttons: {} } }; |