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 shaka-project#1157. Change-Id: Iaf7998c460c03416d8651e2efd53c96bdcc9a258
Pavelas · May 20, 2019 · dbb774f · dbb774f
1 parent 74918b9
commit dbb774f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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
@@ -93,15 +93,15 @@ 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);
   }
 
   /** @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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
+    }
   }
 };