From cd51788b980a7bc7b5caaf2d595d2077be4138f5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 May 2018 13:53:15 +1000 Subject: v3.3.8 --- src/js/controls.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index d266ed6b..c76bd66b 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1165,7 +1165,6 @@ const controls = { const tooltip = utils.createElement( 'span', { - role: 'tooltip', class: this.config.classNames.tooltip, }, '00:00', -- cgit v1.2.3 From 90c5735904354f5fde0dcdae9f8894fe9088739c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 28 May 2018 10:19:07 +1000 Subject: WIP --- src/js/controls.js | 47 +++++++++++++++++++---------------------------- 1 file changed, 19 insertions(+), 28 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index c76bd66b..fc000b52 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -243,9 +243,6 @@ const controls = { // Label/Tooltip button.appendChild(controls.createLabel.call(this, labelPressed, { class: 'label--pressed' })); button.appendChild(controls.createLabel.call(this, label, { class: 'label--not-pressed' })); - - // Add aria attributes - attributes['aria-pressed'] = false; } else { button.appendChild(controls.createIcon.call(this, icon)); button.appendChild(controls.createLabel.call(this, label)); @@ -267,22 +264,23 @@ const controls = { this.elements.buttons[type] = button; } + // Toggle classname when pressed property is set + const className = this.config.classNames.controlPressed; + Object.defineProperty(button, 'pressed', { + enumerable: true, + get() { + return utils.hasClass(button, className); + }, + set(pressed = false) { + utils.toggleClass(button, className, pressed); + }, + }); + return button; }, // Create an createRange(type, attributes) { - // Seek label - const label = utils.createElement( - 'label', - { - for: attributes.id, - id: `${attributes.id}-label`, - class: this.config.classNames.hidden, - }, - i18n.get(type, this.config), - ); - // Seek input const input = utils.createElement( 'input', @@ -297,7 +295,7 @@ const controls = { autocomplete: 'off', // A11y fixes for https://github.com/sampotts/plyr/issues/905 role: 'slider', - 'aria-labelledby': `${attributes.id}-label`, + 'aria-label': i18n.get(type, this.config), 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': 0, @@ -311,10 +309,7 @@ const controls = { // Set the fill for webkit now controls.updateRangeFill.call(this, input); - return { - label, - input, - }; + return input; }, // Create a @@ -435,7 +430,7 @@ const controls = { // Update mute state if (utils.is.element(this.elements.buttons.mute)) { - utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0); + this.elements.buttons.mute.pressed = this.muted || this.volume === 0; } }, @@ -1149,11 +1144,9 @@ const controls = { const progress = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.progress)); // Seek range slider - const seek = controls.createRange.call(this, 'seek', { + progress.appendChild(controls.createRange.call(this, 'seek', { id: `plyr-seek-${data.id}`, - }); - progress.appendChild(seek.label); - progress.appendChild(seek.input); + })); // Buffer progress progress.appendChild(controls.createProgress.call(this, 'buffer')); @@ -1207,15 +1200,13 @@ const controls = { }; // Create the volume range slider - const range = controls.createRange.call( + volume.appendChild(controls.createRange.call( this, 'volume', utils.extend(attributes, { id: `plyr-volume-${data.id}`, }), - ); - volume.appendChild(range.label); - volume.appendChild(range.input); + )); this.elements.volume = volume; -- cgit v1.2.3 From 0109454a34d58d5fc0b2828c5106486de6a334db Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 28 May 2018 04:38:08 +0200 Subject: Ensure language is set in case the track is added after initialization, and trigger languagechange event when language is initially set --- src/js/controls.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index c76bd66b..32e82f78 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -883,13 +883,10 @@ const controls = { 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, - track.language.toLowerCase() === this.captions.language.toLowerCase(), + track.language.toLowerCase() === this.language, ); }); - // Store reference - this.options.captions = tracks.map(track => track.language); - controls.updateSetting.call(this, type, list); }, -- cgit v1.2.3 From 1c1668bfc344a21e2039527f70034ba4ecb68dfd Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 30 May 2018 14:55:48 +0200 Subject: Implement translation support for qualityName and qualityBadge --- src/js/controls.js | 31 ++++++++----------------------- 1 file changed, 8 insertions(+), 23 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 32e82f78..72b752c1 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -664,27 +664,7 @@ const controls = { // Get the badge HTML for HD, 4K etc const getBadge = quality => { - let label = ''; - - switch (quality) { - case 2160: - label = '4K'; - break; - - case 1440: - case 1080: - case 720: - label = 'HD'; - break; - - case 576: - case 480: - label = 'SD'; - break; - - default: - break; - } + const label = i18n.get(`qualityBadge.${quality}`, this.config); if (!label.length) { return null; @@ -708,7 +688,6 @@ const controls = { }, // Translate a value into a nice label - // TODO: Localisation getLabel(setting, value) { switch (setting) { case 'speed': @@ -716,7 +695,13 @@ const controls = { case 'quality': if (utils.is.number(value)) { - return `${value}p`; + const qualityName = i18n.get(`qualityName.${value}`, this.config); + + if (!qualityName.length) { + return `${value}p`; + } + + return qualityName; } return utils.toTitleCase(value); -- cgit v1.2.3 From 56668f58b6284e63f2874120cf7e1747b868d2b0 Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Thu, 31 May 2018 14:40:56 +0200 Subject: Rename qualityName to label --- src/js/controls.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 72b752c1..20518f9c 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -695,13 +695,13 @@ const controls = { case 'quality': if (utils.is.number(value)) { - const qualityName = i18n.get(`qualityName.${value}`, this.config); + const label = i18n.get(`qualityLabel.${value}`, this.config); - if (!qualityName.length) { + if (!label.length) { return `${value}p`; } - return qualityName; + return label; } return utils.toTitleCase(value); -- cgit v1.2.3 From 1fab4919c01347a29e11cbd78fedcddfabd1b814 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Sat, 9 Jun 2018 14:14:34 +0200 Subject: controls.createMenuItem: Change input to object (too many params made it hard to read) --- src/js/controls.js | 34 +++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 13 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 20518f9c..e9529e4e 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -376,7 +376,7 @@ const controls = { }, // Create a settings menu item - createMenuItem(value, list, type, title, badge = null, checked = false) { + createMenuItem({value, list, type, title, badge = null, checked = false}) { const item = utils.createElement('li'); const label = utils.createElement('label', { @@ -680,8 +680,13 @@ const controls = { return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; }) .forEach(quality => { - const label = controls.getLabel.call(this, 'quality', quality); - controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality)); + controls.createMenuItem.call(this, { + value: quality, + list, + type, + title: controls.getLabel.call(this, 'quality', quality), + badge: getBadge(quality), + }); }); controls.updateSetting.call(this, type, list); @@ -861,15 +866,14 @@ const controls = { // Generate options tracks.forEach(track => { - controls.createMenuItem.call( - this, - track.language, + controls.createMenuItem.call(this, { + value: track.language, list, - 'language', - track.label, - track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, - track.language.toLowerCase() === this.language, - ); + type: 'language', + title: track.label, + badge: track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, + checked: track.language.toLowerCase() === this.language, + }); }); controls.updateSetting.call(this, type, list); @@ -927,8 +931,12 @@ const controls = { // Create items this.options.speed.forEach(speed => { - const label = controls.getLabel.call(this, 'speed', speed); - controls.createMenuItem.call(this, speed, list, type, label); + controls.createMenuItem.call(this, { + value: speed, + list, + type, + title: controls.getLabel.call(this, 'speed', speed), + }); }); controls.updateSetting.call(this, type, list); -- cgit v1.2.3 From c83487a293d61d3a1add31018918e9c831bbcac2 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Fri, 8 Jun 2018 14:49:35 +0200 Subject: Fix #1017, fix #980, fix #1014: Captions rewrite (use index internally) --- src/js/controls.js | 49 +++++++++++++++++++------------------------------ 1 file changed, 19 insertions(+), 30 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index e9529e4e..058e636f 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -727,16 +727,7 @@ const controls = { switch (setting) { case 'captions': - if (this.captions.active) { - if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) { - value = this.captions.language; - } else { - value = 'enabled'; - } - } else { - value = ''; - } - + value = this.currentTrack; break; default: @@ -836,10 +827,10 @@ const controls = { // TODO: Captions or language? Currently it's mixed const type = 'captions'; const list = this.elements.settings.panes.captions.querySelector('ul'); + const tracks = captions.getTracks.call(this); // Toggle the pane and tab - const toggle = captions.getTracks.call(this).length; - controls.toggleTab.call(this, type, toggle); + controls.toggleTab.call(this, type, tracks.length); // Empty the menu utils.emptyElement(list); @@ -848,33 +839,31 @@ const controls = { controls.checkMenu.call(this); // If there's no captions, bail - if (!toggle) { + if (!tracks.length) { return; } - // Re-map the tracks into just the data we need - const tracks = captions.getTracks.call(this).map(track => ({ - language: !utils.is.empty(track.language) ? track.language : 'enabled', - label: captions.getLabel.call(this, track), + // Generate options data + const options = tracks.map((track, value) => ({ + value, + checked: this.captions.active && this.currentTrack === value, + title: captions.getLabel.call(this, track), + badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()), + list, + type: 'language', })); // Add the "Disabled" option to turn off captions - tracks.unshift({ - language: '', - label: i18n.get('disabled', this.config), + options.unshift({ + value: -1, + checked: !this.captions.active, + title: i18n.get('disabled', this.config), + list, + type: 'language', }); // Generate options - tracks.forEach(track => { - controls.createMenuItem.call(this, { - value: track.language, - list, - type: 'language', - title: track.label, - badge: track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, - checked: track.language.toLowerCase() === this.language, - }); - }); + options.forEach(controls.createMenuItem.bind(this)); controls.updateSetting.call(this, type, list); }, -- cgit v1.2.3 From 38f10d4cc67b3109189699f7e65189a852064236 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 11 Jun 2018 16:19:11 +1000 Subject: WIP --- src/js/controls.js | 80 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 56 insertions(+), 24 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index e2b4ed1a..f39101af 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -12,8 +12,6 @@ import utils from './utils'; const browser = utils.getBrowser(); const controls = { - - // Get icon URL getIconUrl() { const url = new URL(this.config.iconUrl, window.location); @@ -359,10 +357,14 @@ const controls = { createTime(type) { const attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]); - const container = utils.createElement('div', utils.extend(attributes, { - class: `plyr__time ${attributes.class}`, - 'aria-label': i18n.get(type, this.config), - }), '00:00'); + const container = utils.createElement( + 'div', + utils.extend(attributes, { + class: `plyr__time ${attributes.class}`, + 'aria-label': i18n.get(type, this.config), + }), + '00:00', + ); // Reference for updates this.elements.display[type] = container; @@ -403,6 +405,19 @@ const controls = { list.appendChild(item); }, + // Format a time for display + formatTime(time = 0, inverted = false) { + // Bail if the value isn't a number + if (!utils.is.number(time)) { + return time; + } + + // Always display hours if duration is over an hour + const forceHours = utils.getHours(this.duration) > 0; + + return utils.formatTime(time, forceHours, inverted); + }, + // Update the displayed time updateTimeDisplay(target = null, time = 0, inverted = false) { // Bail if there's no element to display or the value isn't a number @@ -410,11 +425,8 @@ const controls = { return; } - // Always display hours if duration is over an hour - const forceHours = utils.getHours(this.duration) > 0; - // eslint-disable-next-line no-param-reassign - target.innerText = utils.formatTime(time, forceHours, inverted); + target.innerText = controls.formatTime(time, inverted); }, // Update volume UI and storage @@ -509,8 +521,20 @@ const controls = { return; } - // Set aria value for https://github.com/sampotts/plyr/issues/905 - range.setAttribute('aria-valuenow', range.value); + // Set aria values for https://github.com/sampotts/plyr/issues/905 + if (utils.matches(range, this.config.selectors.inputs.seek)) { + range.setAttribute('aria-valuenow', this.currentTime); + const currentTime = controls.formatTime(this.currentTime); + const duration = controls.formatTime(this.duration); + const format = i18n.get('seekLabel', this.config); + range.setAttribute('aria-valuetext', format.replace('{currentTime}', currentTime).replace('{duration}', duration)); + } else if (utils.matches(range, this.config.selectors.inputs.volume)) { + const percent = range.value * 100; + range.setAttribute('aria-valuenow', percent); + range.setAttribute('aria-valuetext', `${percent}%`); + } else { + range.setAttribute('aria-valuenow', range.value); + } // WebKit only if (!browser.isWebkit) { @@ -599,11 +623,16 @@ const controls = { // Show the duration on metadataloaded or durationchange events durationUpdate() { - // Bail if no ui or durationchange event triggered after playing/seek when invertTime is false + // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) { return; } + // Update ARIA values + if (utils.is.element(this.elements.inputs.seek)) { + this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); + } + // If there's a spot to display duration const hasDuration = utils.is.element(this.elements.display.duration); @@ -1126,9 +1155,11 @@ const controls = { const progress = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.progress)); // Seek range slider - progress.appendChild(controls.createRange.call(this, 'seek', { - id: `plyr-seek-${data.id}`, - })); + progress.appendChild( + controls.createRange.call(this, 'seek', { + id: `plyr-seek-${data.id}`, + }), + ); // Buffer progress progress.appendChild(controls.createProgress.call(this, 'buffer')); @@ -1182,13 +1213,15 @@ const controls = { }; // Create the volume range slider - volume.appendChild(controls.createRange.call( - this, - 'volume', - utils.extend(attributes, { - id: `plyr-volume-${data.id}`, - }), - )); + volume.appendChild( + controls.createRange.call( + this, + 'volume', + utils.extend(attributes, { + id: `plyr-volume-${data.id}`, + }), + ), + ); this.elements.volume = volume; @@ -1463,7 +1496,6 @@ const controls = { Array.from(labels).forEach(label => { utils.toggleClass(label, this.config.classNames.hidden, false); utils.toggleClass(label, this.config.classNames.tooltip, true); - label.setAttribute('role', 'tooltip'); }); } }, -- cgit v1.2.3 From 81ee3f759c86ded1967555ab22cfef8cd16607b5 Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 11 Jun 2018 08:56:13 +0200 Subject: Remove todo comment about Vimeo support for setting quality (they don't support it) --- src/js/controls.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 058e636f..dbc88a3a 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -632,7 +632,6 @@ const controls = { }, // Set the quality menu - // TODO: Vimeo support setQualityMenu(options) { // Menu required if (!utils.is.element(this.elements.settings.panes.quality)) { -- cgit v1.2.3 From db95b3234fd38e5dd71d00876c925514960e63fc Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Mon, 11 Jun 2018 17:00:34 +0200 Subject: Move uniqueness filter from getQualityOptions to setQualityMenu --- src/js/controls.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index dbc88a3a..8fb2b7b7 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -641,9 +641,10 @@ const controls = { const type = 'quality'; const list = this.elements.settings.panes.quality.querySelector('ul'); - // Set options if passed and filter based on config + // Set options if passed and filter based on uniqueness and config if (utils.is.array(options)) { - this.options.quality = options.filter(quality => this.config.quality.options.includes(quality)); + this.options.quality = utils.dedupe(options) + .filter(quality => this.config.quality.options.includes(quality)); } // Toggle the pane and tab -- cgit v1.2.3 From 87170ab46080ae0d82afd1b39ab3fdf2e3ff1e62 Mon Sep 17 00:00:00 2001 From: cky <576779975@qq.com> Date: Tue, 12 Jun 2018 20:55:31 +0800 Subject: remove event listeners in destroy, add once method --- src/js/controls.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 8fb2b7b7..1301084a 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1063,12 +1063,10 @@ const controls = { container.style.width = ''; container.style.height = ''; - // Only listen once - utils.off(container, utils.transitionEndEvent, restore); }; // Listen for the transition finishing and restore auto height/width - utils.on(container, utils.transitionEndEvent, restore); + utils.once(container, utils.transitionEndEvent, restore); // Set dimensions to target container.style.width = `${size.width}px`; -- cgit v1.2.3 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/controls.js | 320 +++++++++++++++++++++++++++-------------------------- 1 file changed, 161 insertions(+), 159 deletions(-) (limited to 'src/js/controls.js') diff --git a/src/js/controls.js b/src/js/controls.js index 058e636f..cfab26bc 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -6,14 +6,17 @@ import captions from './captions'; import html5 from './html5'; import i18n from './i18n'; import support from './support'; -import utils from './utils'; - -// Sniff out the browser -const browser = utils.getBrowser(); +import { repaint, transitionEndEvent } from './utils/animation'; +import browser from './utils/browser'; +import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, removeElement, setAttributes, toggleClass, toggleHidden, toggleState } from './utils/elements'; +import { off, on } from './utils/events'; +import is from './utils/is'; +import loadSprite from './utils/loadSprite'; +import { extend } from './utils/objects'; +import { getPercentage, replaceAll, toCamelCase, toTitleCase } from './utils/strings'; +import { formatTime, getHours } from './utils/time'; const controls = { - - // Get icon URL getIconUrl() { const url = new URL(this.config.iconUrl, window.location); @@ -29,41 +32,41 @@ const controls = { // TODO: Allow settings menus with custom controls findElements() { try { - this.elements.controls = utils.getElement.call(this, this.config.selectors.controls.wrapper); + this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper); // Buttons this.elements.buttons = { - play: utils.getElements.call(this, this.config.selectors.buttons.play), - pause: utils.getElement.call(this, this.config.selectors.buttons.pause), - restart: utils.getElement.call(this, this.config.selectors.buttons.restart), - rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind), - fastForward: utils.getElement.call(this, this.config.selectors.buttons.fastForward), - mute: utils.getElement.call(this, this.config.selectors.buttons.mute), - pip: utils.getElement.call(this, this.config.selectors.buttons.pip), - airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay), - settings: utils.getElement.call(this, this.config.selectors.buttons.settings), - captions: utils.getElement.call(this, this.config.selectors.buttons.captions), - fullscreen: utils.getElement.call(this, this.config.selectors.buttons.fullscreen), + play: getElements.call(this, this.config.selectors.buttons.play), + pause: getElement.call(this, this.config.selectors.buttons.pause), + restart: getElement.call(this, this.config.selectors.buttons.restart), + rewind: getElement.call(this, this.config.selectors.buttons.rewind), + fastForward: getElement.call(this, this.config.selectors.buttons.fastForward), + mute: getElement.call(this, this.config.selectors.buttons.mute), + pip: getElement.call(this, this.config.selectors.buttons.pip), + airplay: getElement.call(this, this.config.selectors.buttons.airplay), + settings: getElement.call(this, this.config.selectors.buttons.settings), + captions: getElement.call(this, this.config.selectors.buttons.captions), + fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen), }; // Progress - this.elements.progress = utils.getElement.call(this, this.config.selectors.progress); + this.elements.progress = getElement.call(this, this.config.selectors.progress); // Inputs this.elements.inputs = { - seek: utils.getElement.call(this, this.config.selectors.inputs.seek), - volume: utils.getElement.call(this, this.config.selectors.inputs.volume), + seek: getElement.call(this, this.config.selectors.inputs.seek), + volume: getElement.call(this, this.config.selectors.inputs.volume), }; // Display this.elements.display = { - buffer: utils.getElement.call(this, this.config.selectors.display.buffer), - currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime), - duration: utils.getElement.call(this, this.config.selectors.display.duration), + buffer: getElement.call(this, this.config.selectors.display.buffer), + currentTime: getElement.call(this, this.config.selectors.display.currentTime), + duration: getElement.call(this, this.config.selectors.display.duration), }; // Seek tooltip - if (utils.is.element(this.elements.progress)) { + if (is.element(this.elements.progress)) { this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`); } @@ -87,9 +90,9 @@ const controls = { // Create const icon = document.createElementNS(namespace, 'svg'); - utils.setAttributes( + setAttributes( icon, - utils.extend(attributes, { + extend(attributes, { role: 'presentation', focusable: 'false', }), @@ -138,21 +141,21 @@ const controls = { attributes.class = this.config.classNames.hidden; } - return utils.createElement('span', attributes, text); + return createElement('span', attributes, text); }, // Create a badge createBadge(text) { - if (utils.is.empty(text)) { + if (is.empty(text)) { return null; } - const badge = utils.createElement('span', { + const badge = createElement('span', { class: this.config.classNames.menu.value, }); badge.appendChild( - utils.createElement( + createElement( 'span', { class: this.config.classNames.menu.badge, @@ -166,9 +169,9 @@ const controls = { // Create a