diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/config/defaults.js | 3 | ||||
| -rw-r--r-- | src/js/controls.js | 264 | ||||
| -rw-r--r-- | src/js/listeners.js | 8 | ||||
| -rw-r--r-- | src/js/plyr.js | 7 | ||||
| -rw-r--r-- | src/js/utils/elements.js | 13 | ||||
| -rw-r--r-- | src/sass/components/menus.scss | 77 |
6 files changed, 175 insertions, 197 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index 1e90a4f0..a898755d 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -354,6 +354,9 @@ const defaults = { isTouch: 'plyr--is-touch', uiSupported: 'plyr--full-ui', noTransition: 'plyr--no-transition', + display: { + time: 'plyr__time', + }, menu: { value: 'plyr__menu__value', badge: 'plyr__badge', diff --git a/src/js/controls.js b/src/js/controls.js index d79aaee7..607511cb 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -9,19 +9,7 @@ import support from './support'; import { repaint, transitionEndEvent } from './utils/animation'; import { dedupe } from './utils/arrays'; import browser from './utils/browser'; -import { - createElement, - emptyElement, - getAttributesFromSelector, - getElement, - getElements, - hasClass, - removeElement, - setAttributes, - toggleClass, - toggleHidden, - matches, -} from './utils/elements'; +import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, toggleClass, toggleHidden } from './utils/elements'; import { off, on } from './utils/events'; import is from './utils/is'; import loadSprite from './utils/loadSprite'; @@ -360,7 +348,7 @@ const controls = { const 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', @@ -374,34 +362,43 @@ const controls = { // Create a settings menu item createMenuItem({ value, list, type, title, badge = null, checked = false }) { - const item = createElement('li'); + const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]); - const label = createElement('label', { - class: this.config.classNames.control, - }); - - const radio = createElement( - 'input', - extend(getAttributesFromSelector(this.config.selectors.inputs[type]), { - type: 'radio', - name: `plyr-${type}`, + const item = createElement( + 'button', + extend(attributes, { + type: 'button', + role: 'menuitemradio', + class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(), value, - checked, - class: 'plyr__sr-only', - }), + 'aria-checked': checked, + }) ); - const faux = createElement('span', { hidden: '' }); - - label.appendChild(radio); - label.appendChild(faux); - label.insertAdjacentHTML('beforeend', title); + // We have to set as HTML incase of special characters + item.innerHTML = title; if (is.element(badge)) { - label.appendChild(badge); + item.appendChild(badge); } - item.appendChild(label); + Object.defineProperty(item, 'checked', { + enumerable: true, + get() { + return item.getAttribute('aria-checked') === 'true'; + }, + set(checked) { + // Ensure exclusivity + if (checked) { + Array.from(item.parentNode.children) + .filter(node => matches(node, '[role="menuitemradio"]')) + .forEach(node => node.setAttribute('aria-checked', 'false')); + } + + item.setAttribute('aria-checked', checked ? 'true' : 'false'); + }, + }); + list.appendChild(item); }, @@ -656,19 +653,19 @@ const controls = { }, // Hide/show a tab - toggleTab(setting, toggle) { - toggleHidden(this.elements.settings.tabs[setting], !toggle); + toggleMenuButton(setting, toggle) { + toggleHidden(this.elements.settings.buttons[setting], !toggle); }, // Set the quality menu setQualityMenu(options) { // Menu required - if (!is.element(this.elements.settings.panes.quality)) { + if (!is.element(this.elements.settings.panels.quality)) { return; } const type = 'quality'; - const list = this.elements.settings.panes.quality.querySelector('ul'); + const list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); // Set options if passed and filter based on uniqueness and config if (is.array(options)) { @@ -677,7 +674,7 @@ const controls = { // Toggle the pane and tab const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1; - controls.toggleTab.call(this, type, toggle); + controls.toggleMenuButton.call(this, type, toggle); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -749,7 +746,7 @@ const controls = { // Update the selected setting updateSetting(setting, container, input) { - const pane = this.elements.settings.panes[setting]; + const pane = this.elements.settings.panels[setting]; let value = null; let list = container; @@ -778,7 +775,7 @@ const controls = { // Get the list if we need to if (!is.element(list)) { - list = pane && pane.querySelector('ul'); + list = pane && pane.querySelector('[role="menu"]'); } // If there's no list it means it's not been rendered... @@ -787,11 +784,11 @@ const controls = { } // Update the label - const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`); + const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`); label.innerHTML = controls.getLabel.call(this, setting, value); // Find the radio option and check it - const target = list && list.querySelector(`input[value="${value}"]`); + const target = list && list.querySelector(`[value="${value}"]`); if (is.element(target)) { target.checked = true; @@ -801,20 +798,20 @@ const controls = { // Set the looping options /* setLoopMenu() { // Menu required - if (!is.element(this.elements.settings.panes.loop)) { + if (!is.element(this.elements.settings.panels.loop)) { return; } const options = ['start', 'end', 'all', 'reset']; - const list = this.elements.settings.panes.loop.querySelector('ul'); + const list = this.elements.settings.panels.loop.querySelector('[role="menu"]'); // Show the pane and tab - toggleHidden(this.elements.settings.tabs.loop, false); - toggleHidden(this.elements.settings.panes.loop, false); + toggleHidden(this.elements.settings.buttons.loop, false); + toggleHidden(this.elements.settings.panels.loop, false); // Toggle the pane and tab const toggle = !is.empty(this.loop.options); - controls.toggleTab.call(this, 'loop', toggle); + controls.toggleMenuButton.call(this, 'loop', toggle); // Empty the menu emptyElement(list); @@ -849,11 +846,11 @@ const controls = { setCaptionsMenu() { // TODO: Captions or language? Currently it's mixed const type = 'captions'; - const list = this.elements.settings.panes.captions.querySelector('ul'); + const list = this.elements.settings.panels.captions.querySelector('[role="menu"]'); const tracks = captions.getTracks.call(this); // Toggle the pane and tab - controls.toggleTab.call(this, type, tracks.length); + controls.toggleMenuButton.call(this, type, tracks.length); // Empty the menu emptyElement(list); @@ -899,7 +896,7 @@ const controls = { } // Menu required - if (!is.element(this.elements.settings.panes.speed)) { + if (!is.element(this.elements.settings.panels.speed)) { return; } @@ -917,7 +914,7 @@ const controls = { // Toggle the pane and tab const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; - controls.toggleTab.call(this, type, toggle); + controls.toggleMenuButton.call(this, type, toggle); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -928,7 +925,7 @@ const controls = { } // Get the list to populate - const list = this.elements.settings.panes.speed.querySelector('ul'); + const list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Empty the menu emptyElement(list); @@ -948,26 +945,26 @@ const controls = { // Check if we need to hide/show the settings menu checkMenu() { - const { tabs } = this.elements.settings; - const visible = !is.empty(tabs) && Object.values(tabs).some(tab => !tab.hidden); + const { buttons } = this.elements.settings; + const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden); toggleHidden(this.elements.settings.menu, !visible); }, // Show/hide menu toggleMenu(event) { - const { form } = this.elements.settings; + const { popup } = this.elements.settings; const button = this.elements.buttons.settings; // Menu and button are required - if (!is.element(form) || !is.element(button)) { + if (!is.element(popup) || !is.element(button)) { return; } - const show = is.boolean(event) ? event : is.element(form) && form.hasAttribute('hidden'); + const show = is.boolean(event) ? event : is.element(popup) && popup.hasAttribute('hidden'); if (is.event(event)) { - const isMenuItem = is.element(form) && form.contains(event.target); + const isMenuItem = is.element(popup) && popup.contains(event.target); const isButton = event.target === this.elements.buttons.settings; // If the click was inside the form or if the click @@ -988,31 +985,25 @@ const controls = { button.setAttribute('aria-expanded', show); } - if (is.element(form)) { - toggleHidden(form, !show); + if (is.element(popup)) { + toggleHidden(popup, !show); toggleClass(this.elements.container, this.config.classNames.menu.open, show); if (show) { - form.removeAttribute('tabindex'); + popup.removeAttribute('tabindex'); } else { - form.setAttribute('tabindex', -1); + popup.setAttribute('tabindex', -1); } } }, - // Get the natural size of a tab - getTabSize(tab) { + // Get the natural size of a menu panel + getMenuSize(tab) { const 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); @@ -1029,31 +1020,18 @@ const controls = { }; }, - // Toggle Menu - showTab(target = '') { - const { menu } = this.elements.settings; - const pane = document.getElementById(target); + // Show a panel in the menu + showMenuPanel(type = '') { + const target = document.getElementById(`plyr-settings-${this.id}-${type}`); // Nothing to show, bail - if (!is.element(pane)) { - return; - } - - // Are we targeting a tab? If not, bail - const isTab = pane.getAttribute('role') === 'tabpanel'; - if (!isTab) { + if (!is.element(target)) { return; } - // Hide all other tabs - // Get other tabs - const current = menu.querySelector('[role="tabpanel"]:not([hidden])'); - const 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 + const container = target.parentNode; + const current = Array.from(container.children).find(node => !node.hidden); // If we can do fancy animations, we'll animate the height/width if (support.transitions && !support.reducedMotion) { @@ -1062,12 +1040,12 @@ const controls = { container.style.height = `${current.scrollHeight}px`; // Get potential sizes - const size = controls.getTabSize.call(this, pane); + const size = controls.getMenuSize.call(this, target); // Restore auto height/width - const restore = e => { + const 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; } @@ -1089,19 +1067,13 @@ const controls = { // Set attributes on current tab toggleHidden(current, true); - current.setAttribute('tabindex', -1); + // 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(); }, // Build the default HTML @@ -1220,12 +1192,12 @@ const controls = { // Settings button / menu if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) { - const menu = createElement('div', { + const control = createElement('div', { class: 'plyr__menu', hidden: '', }); - menu.appendChild( + control.appendChild( controls.createButton.call(this, 'settings', { id: `plyr-settings-toggle-${data.id}`, 'aria-haspopup': true, @@ -1234,48 +1206,38 @@ const controls = { }), ); - const form = createElement('form', { + const popup = createElement('div', { class: 'plyr__menu__container', id: `plyr-settings-${data.id}`, hidden: '', 'aria-labelled-by': `plyr-settings-toggle-${data.id}`, - role: 'tablist', - tabindex: -1, }); const inner = createElement('div'); const home = createElement('div', { id: `plyr-settings-${data.id}-home`, - 'aria-labelled-by': `plyr-settings-toggle-${data.id}`, - role: 'tabpanel', }); - // Create the tab list - const tabs = createElement('ul', { - role: 'tablist', + // Create the menu + const menu = createElement('div', { + role: 'menu', }); - // Build the tabs + // Build the menu items this.config.settings.forEach(type => { - const tab = createElement('li', { - role: 'tab', - hidden: '', - }); - - const button = createElement( + const menuItem = createElement( 'button', extend(getAttributesFromSelector(this.config.selectors.buttons.settings), { type: 'button', class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`, - id: `plyr-settings-${data.id}-${type}-tab`, + role: 'menuitem', 'aria-haspopup': true, - 'aria-controls': `plyr-settings-${data.id}-${type}`, - 'aria-expanded': false, }), - i18n.get(type, this.config), ); + const flex = createElement('span', null, i18n.get(type, this.config)); + const value = createElement('span', { class: this.config.classNames.menu.value, }); @@ -1283,54 +1245,56 @@ const controls = { // Speed contains HTML entities value.innerHTML = data[type]; - button.appendChild(value); - tab.appendChild(button); - tabs.appendChild(tab); + flex.appendChild(value); + menuItem.appendChild(flex); + menu.appendChild(menuItem); - this.elements.settings.tabs[type] = tab; - }); - - home.appendChild(tabs); - inner.appendChild(home); - - // Build the panes - this.config.settings.forEach(type => { + // Build the panes const pane = createElement('div', { id: `plyr-settings-${data.id}-${type}`, hidden: '', - 'aria-labelled-by': `plyr-settings-${data.id}-${type}-tab`, - role: 'tabpanel', - tabindex: -1, }); + // Back button const back = createElement( 'button', { type: 'button', class: `${this.config.classNames.control} ${this.config.classNames.control}--back`, - 'aria-haspopup': true, - 'aria-controls': `plyr-settings-${data.id}-home`, - 'aria-expanded': false, }, i18n.get(type, this.config), ); - + back.addEventListener('click', () => { + controls.showMenuPanel.call(this, 'home'); + }); pane.appendChild(back); - const options = createElement('ul'); + // Menu + pane.appendChild( + createElement('div', { + role: 'menu', + }), + ); - pane.appendChild(options); inner.appendChild(pane); - this.elements.settings.panes[type] = pane; + menuItem.addEventListener('click', () => { + controls.showMenuPanel.call(this, type); + }); + + this.elements.settings.buttons[type] = menuItem; + this.elements.settings.panels[type] = pane; }); - form.appendChild(inner); - menu.appendChild(form); - container.appendChild(menu); + home.appendChild(menu); + inner.appendChild(home); + + popup.appendChild(inner); + control.appendChild(popup); + container.appendChild(control); - this.elements.settings.form = form; - this.elements.settings.menu = menu; + this.elements.settings.popup = popup; + this.elements.settings.menu = control; } // Picture in picture button diff --git a/src/js/listeners.js b/src/js/listeners.js index 9d987508..cc9d3889 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -486,13 +486,12 @@ class Listeners { }); // Settings menu - bind(this.player.elements.settings.form, 'click', event => { + bind(this.player.elements.settings.popup, 'click', event => { event.stopPropagation(); // Go back to home tab on click const showHomeTab = () => { - const id = `plyr-settings-${this.player.id}-home`; - controls.showTab.call(this.player, id); + controls.showMenuPanel.call(this.player, 'home'); }; // Settings menu items - use event delegation as items are added/removed @@ -523,9 +522,6 @@ class Listeners { }, 'speed', ); - } else { - const tab = event.target; - controls.showTab.call(this.player, tab.getAttribute('aria-controls')); } }); diff --git a/src/js/plyr.js b/src/js/plyr.js index c2bb6a4d..c15e83cb 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -75,16 +75,17 @@ class Plyr { // Elements cache this.elements = { container: null, + captions: null, buttons: {}, display: {}, progress: {}, inputs: {}, settings: { + popup: null, menu: null, - panes: {}, - tabs: {}, + panels: {}, + buttons: {}, }, - captions: null, }; // Captions diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js index 69e4d46c..7b58c9ff 100644 --- a/src/js/utils/elements.js +++ b/src/js/utils/elements.js @@ -70,12 +70,19 @@ export function createElement(type, attributes, text) { // Inaert an element after another export function insertAfter(element, target) { + if (!is.element(element) || !is.element(target)) { + return; + } + target.parentNode.insertBefore(element, target.nextSibling); } // Insert a DocumentFragment export function insertElement(type, parent, attributes, text) { - // Inject the new <element> + if (!is.element(parent)) { + return; + } + parent.appendChild(createElement(type, attributes, text)); } @@ -95,6 +102,10 @@ export function removeElement(element) { // Remove all child elements export function emptyElement(element) { + if (!is.element(element)) { + return; + } + let { length } = element.childNodes; while (length > 0) { diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index 3ad4039a..35bfdeaa 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -54,18 +54,16 @@ width: 0; } - ul { - list-style: none; - margin: 0; - overflow: hidden; + [role='menu'] { padding: $plyr-control-padding; + } - li { - margin-top: 2px; + [role='menuitem'], + [role='menuitemradio'] { + margin-top: 2px; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; } } @@ -75,10 +73,16 @@ color: $plyr-menu-color; display: flex; font-size: $plyr-font-size-menu; - padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2); + padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5); user-select: none; width: 100%; + > span { + align-items: inherit; + display: flex; + width: 100%; + } + &::after { border: 4px solid transparent; content: ''; @@ -135,50 +139,49 @@ } } - label.plyr__control { + .plyr__control[role='menuitemradio'] { padding-left: $plyr-control-padding; - input[type='radio'] + span { - background: rgba(#000, 0.1); + &::before, + &::after { border-radius: 100%; + } + + &::before { + background: rgba(#000, 0.1); + content: ''; display: block; flex-shrink: 0; height: 16px; margin-right: $plyr-control-spacing; - position: relative; transition: all 0.3s ease; width: 16px; - - &::after { - background: #fff; - border-radius: 100%; - content: ''; - height: 6px; - left: 5px; - opacity: 0; - position: absolute; - top: 5px; - transform: scale(0); - transition: transform 0.3s ease, opacity 0.3s ease; - width: 6px; - } } - input[type='radio']:checked + span { - background: $plyr-color-main; + &::after { + background: #fff; + border: 0; + height: 6px; + left: 12px; + opacity: 0; + top: 50%; + transform: translateY(-50%) scale(0); + transition: transform 0.3s ease, opacity 0.3s ease; + width: 6px; + } + &[aria-checked='true'] { + &::before { + background: $plyr-color-main; + } &::after { opacity: 1; - transform: scale(1); + transform: translateY(-50%) scale(1); } } - input[type='radio']:focus + span { - @include plyr-tab-focus(); - } - - &.plyr__tab-focus input[type='radio'] + span, - &:hover input[type='radio'] + span { + &.plyr__tab-focus::before, + &:hover::before { background: rgba(#000, 0.1); } } |