From dbb774fa9fbdb07ebce8fad55a7c27b6dea5b4a4 Mon Sep 17 00:00:00 2001 From: Sandra Lokshina Date: Fri, 17 May 2019 10:21:14 -0700 Subject: [PATCH] Convert ui utils to ES6 and merge duplicate utils. Both DOM and UI utils had a removeAllChildren method that did the same thing. This change removes it from the UI util and replaces all calls to it with calls to the DOM util. Issue #1157. Change-Id: Iaf7998c460c03416d8651e2efd53c96bdcc9a258 --- demo/asset_card.js | 2 +- demo/config.js | 2 +- demo/custom.js | 6 +- demo/front.js | 4 +- demo/search.js | 2 +- lib/util/dom_utils.js | 7 +- ui/language_utils.js | 2 +- ui/resolution_selection.js | 2 +- ui/ui_utils.js | 167 +++++++++++++++++-------------------- 9 files changed, 91 insertions(+), 103 deletions(-) diff --git a/demo/asset_card.js b/demo/asset_card.js index 0bdfc0c600..dabde36de3 100644 --- a/demo/asset_card.js +++ b/demo/asset_card.js @@ -215,7 +215,7 @@ class AssetCard { /** Remake the buttons of the card. */ remakeButtons() { - shaka.ui.Utils.removeAllChildren(this.actions_); + shaka.util.Dom.removeAllChildren(this.actions_); this.remakeButtonsFn_(this); } diff --git a/demo/config.js b/demo/config.js index 9a85549285..0391f85421 100644 --- a/demo/config.js +++ b/demo/config.js @@ -80,7 +80,7 @@ class ShakaDemoConfig { /** @private */ reload_() { - shaka.ui.Utils.removeAllChildren(this.container_); + shaka.util.Dom.removeAllChildren(this.container_); this.sections_ = []; this.addMetaSection_(); diff --git a/demo/custom.js b/demo/custom.js index 487fa1c924..858fec4ebd 100644 --- a/demo/custom.js +++ b/demo/custom.js @@ -97,7 +97,7 @@ class ShakaDemoCustom { */ showAssetDialog_(assetInProgress) { // Remove buttons for any previous assets. - shaka.ui.Utils.removeAllChildren(this.dialog_); + shaka.util.Dom.removeAllChildren(this.dialog_); const inputDiv = document.createElement('div'); this.dialog_.appendChild(inputDiv); @@ -257,7 +257,7 @@ class ShakaDemoCustom { } }; const iconOnChange = (input) => { - shaka.ui.Utils.removeAllChildren(iconDiv); + shaka.util.Dom.removeAllChildren(iconDiv); assetInProgress.iconUri = input.value; if (input.value) { const img = document.createElement('img'); @@ -392,7 +392,7 @@ class ShakaDemoCustom { /** @private */ remakeSavedList_() { - shaka.ui.Utils.removeAllChildren(this.savedList_); + shaka.util.Dom.removeAllChildren(this.savedList_); if (this.assets_.size == 0) { // Add in a message telling you what to do. diff --git a/demo/front.js b/demo/front.js index 288b0b988c..84495be9b1 100644 --- a/demo/front.js +++ b/demo/front.js @@ -93,7 +93,7 @@ class ShakaDemoFront { hideButton.classList.add('mdl-js-ripple-effect'); hideButton.textContent = 'Dismiss'; // TODO: localize hideButton.addEventListener('click', () => { - shaka.ui.Utils.removeAllChildren(this.messageDiv_); + shaka.util.Dom.removeAllChildren(this.messageDiv_); window.localStorage.setItem(hideName, 'true'); }); this.messageDiv_.appendChild(hideButton); @@ -101,7 +101,7 @@ class ShakaDemoFront { /** @private */ remakeAssetCards_() { - shaka.ui.Utils.removeAllChildren(this.assetCardDiv_); + shaka.util.Dom.removeAllChildren(this.assetCardDiv_); const assets = shakaAssets.testAssets.filter((asset) => { return asset.isFeatured && !asset.disabled; diff --git a/demo/search.js b/demo/search.js index 2adcbb1c6f..e5ac7b20ae 100644 --- a/demo/search.js +++ b/demo/search.js @@ -111,7 +111,7 @@ class ShakaDemoSearch { /** @private */ remakeResultsDiv_() { - shaka.ui.Utils.removeAllChildren(this.resultsDiv_); + shaka.util.Dom.removeAllChildren(this.resultsDiv_); const assets = this.searchResults_(); this.assetCards_ = assets.map((asset) => this.createAssetCardFor_(asset)); diff --git a/lib/util/dom_utils.js b/lib/util/dom_utils.js index f6d31f2274..485793f7dc 100644 --- a/lib/util/dom_utils.js +++ b/lib/util/dom_utils.js @@ -21,13 +21,15 @@ goog.provide('shaka.util.Dom'); goog.require('goog.asserts'); +/** + * @export + */ shaka.util.Dom = class { /** * Creates an element, and cast the type from Element to HTMLElement. * * @param {string} tagName * @return {!HTMLElement} - * @export */ static createHTMLElement(tagName) { const element = @@ -40,7 +42,6 @@ shaka.util.Dom = class { * Creates an element, and cast the type from Element to HTMLElement. * * @return {!HTMLVideoElement} - * @export */ static createVideoElement() { const video = @@ -59,7 +60,6 @@ shaka.util.Dom = class { * * @param {!Node|!Element} original * @return {!HTMLElement} - * @export */ static asHTMLElement(original) { return /** @type {!HTMLElement}*/ (original); @@ -71,7 +71,6 @@ shaka.util.Dom = class { * * @param {!Node|!Element} original * @return {!HTMLMediaElement} - * @export */ static asHTMLMediaElement(original) { return /** @type {!HTMLMediaElement}*/ (original); diff --git a/ui/language_utils.js b/ui/language_utils.js index 7cc099ab75..ae63522cf7 100644 --- a/ui/language_utils.js +++ b/ui/language_utils.js @@ -49,7 +49,7 @@ shaka.ui.LanguageUtils = class { langMenu, 'shaka-back-to-overflow-button'); // 2. Remove everything - shaka.ui.Utils.removeAllChildren(langMenu); + shaka.util.Dom.removeAllChildren(langMenu); // 3. Add the backTo Menu button back langMenu.appendChild(backButton); diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js index 110a2b33ec..b84c10115d 100644 --- a/ui/resolution_selection.js +++ b/ui/resolution_selection.js @@ -174,7 +174,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element { this.resolutionMenu_, 'shaka-back-to-overflow-button'); // 2. Remove everything - shaka.ui.Utils.removeAllChildren(this.resolutionMenu_); + shaka.util.Dom.removeAllChildren(this.resolutionMenu_); // 3. Add the backTo Menu button back this.resolutionMenu_.appendChild(backButton); diff --git a/ui/ui_utils.js b/ui/ui_utils.js index a063e890da..5d2e435f4d 100644 --- a/ui/ui_utils.js +++ b/ui/ui_utils.js @@ -21,106 +21,95 @@ goog.provide('shaka.ui.Utils'); goog.require('goog.asserts'); -/** - * @param {!HTMLElement} element - * @param {string} className - * @return {!HTMLElement} - * @export - */ -// TODO: This can be replaced by shaka.util.Dom.getElementByClassName -shaka.ui.Utils.getFirstDescendantWithClassName = function(element, className) { - const descendant = shaka.ui.Utils.getDescendantIfExists(element, className); - goog.asserts.assert(descendant != null, 'Should not be null!'); - - return descendant; -}; - - -/** - * @param {!HTMLElement} element - * @param {string} className - * @return {?HTMLElement} - */ -shaka.ui.Utils.getDescendantIfExists = function(element, className) { - const childrenWithClassName = element.getElementsByClassName(className); - if (childrenWithClassName.length) { - return /** @type {!HTMLElement} */ (childrenWithClassName[0]); +shaka.ui.Utils = class { + /** + * @param {!HTMLElement} element + * @param {string} className + * @return {!HTMLElement} + */ + // TODO: This can be replaced by shaka.util.Dom.getElementByClassName + static getFirstDescendantWithClassName(element, className) { + const descendant = shaka.ui.Utils.getDescendantIfExists(element, className); + goog.asserts.assert(descendant != null, 'Should not be null!'); + + return descendant; } - return null; -}; + /** + * @param {!HTMLElement} element + * @param {string} className + * @return {?HTMLElement} + */ + static getDescendantIfExists(element, className) { + const childrenWithClassName = element.getElementsByClassName(className); + if (childrenWithClassName.length) { + return /** @type {!HTMLElement} */ (childrenWithClassName[0]); + } -/** - * Finds a descendant of |menu| that has a 'shaka-chosen-item' class - * and focuses on its' parent. - * - * @param {HTMLElement} menu - */ -shaka.ui.Utils.focusOnTheChosenItem = function(menu) { - if (!menu) { - return; - } - const chosenItem = shaka.ui.Utils.getDescendantIfExists( - menu, 'shaka-chosen-item'); - if (chosenItem) { - chosenItem.parentElement.focus(); + return null; } -}; -/** - * @return {!Element} - */ -shaka.ui.Utils.checkmarkIcon = function() { - const icon = shaka.util.Dom.createHTMLElement('i'); - icon.classList.add('material-icons'); - icon.classList.add('shaka-chosen-item'); - icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK; - // Screen reader should ignore icon text. - icon.setAttribute('aria-hidden', 'true'); - return icon; -}; + /** + * Finds a descendant of |menu| that has a 'shaka-chosen-item' class + * and focuses on its' parent. + * + * @param {HTMLElement} menu + */ + static focusOnTheChosenItem(menu) { + if (!menu) { + return; + } + const chosenItem = shaka.ui.Utils.getDescendantIfExists( + menu, 'shaka-chosen-item'); + if (chosenItem) { + chosenItem.parentElement.focus(); + } + } -/** - * Depending on the value of display, sets/removes the css class of element to - * either display it or hide it. - * - * @param {Element} element - * @param {boolean} display - * @export - */ -shaka.ui.Utils.setDisplay = function(element, display) { - if (!element) { - return; + /** + * @return {!Element} + */ + static checkmarkIcon() { + const icon = shaka.util.Dom.createHTMLElement('i'); + icon.classList.add('material-icons'); + icon.classList.add('shaka-chosen-item'); + icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK; + // Screen reader should ignore icon text. + icon.setAttribute('aria-hidden', 'true'); + return icon; } - // You can't use setDisplay with SVG on IE, because classList isn't on SVG - // elements on that browser. It's better to find out on Chrome through an - // assertion, rather than wait for a failed test pass later on IE. - goog.asserts.assert(!(element instanceof SVGElement), - 'Do not use setDisplay with SVG elements!'); - - if (display) { - element.classList.add('shaka-displayed'); - // Removing a non-existent class doesn't throw, so, even if - // the element is not hidden, this should be fine. Same for displayed - // below. - element.classList.remove('shaka-hidden'); - } else { - element.classList.add('shaka-hidden'); - element.classList.remove('shaka-displayed'); - } -}; -/** - * Remove all of the child nodes of an elements. - * @param {!Element} element - * @export - */ -shaka.ui.Utils.removeAllChildren = function(element) { - while (element.firstChild) { - element.removeChild(element.firstChild); + /** + * Depending on the value of display, sets/removes the css class of element to + * either display it or hide it. + * + * @param {Element} element + * @param {boolean} display + */ + static setDisplay(element, display) { + if (!element) { + return; + } + + // You can't use setDisplay with SVG on IE, because classList isn't on SVG + // elements on that browser. It's better to find out on Chrome through an + // assertion, rather than wait for a failed test pass later on IE. + goog.asserts.assert(!(element instanceof SVGElement), + 'Do not use setDisplay with SVG elements!'); + + if (display) { + element.classList.add('shaka-displayed'); + // Removing a non-existent class doesn't throw, so, even if + // the element is not hidden, this should be fine. Same for displayed + // below. + element.classList.remove('shaka-hidden'); + } else { + element.classList.add('shaka-hidden'); + element.classList.remove('shaka-displayed'); + } } };