🔀 Merge pull request #496 from FrostCo/watcher_multiple_selectors

Watcher multiple selectors

Author: richardfrost

src/script/lib/helper.ts

@@ -51,52 +51,24 @@ export function formatNumber(number: number): string {
 // Returns the element found by selector string
 //   Supports querying through a shadow DOM using '>>>'
 export function getElement(selector: string, root: Document | ShadowRoot | HTMLElement = document): HTMLElement {
-  let element;
-  const selectors = selector.split('>>>');
-
-  // No shadowRoot in selector: return native querySelector
-  if (selectors.length == 1) {
-    return root.querySelector(selector);
-  }
-
-  // shadowRoot in selector: return querySelector through shadowRoot(s)
-  while (selectors.length) {
-    if (root) {
-      element = root.querySelector(selectors.shift().trim());
-
-      if (element) {
-        if (selectors.length == 0) {
-          return element;
-        } else {
-          root = element.shadowRoot;
-        }
-      } else {
-        return null;
-      }
-    } else {
-      return null;
-    }
-  }
+  return getElementCore(selector, root, 'querySelector') as HTMLElement;
 }
 
 // Returns the elements found by selector string
 //   Supports querying through a shadow DOM using '>>>'
-export function getElements(selector: string, root: Document | HTMLElement | ShadowRoot  = document): NodeListOf<HTMLElement> {
+function getElementCore(selector: string, root: Document | HTMLElement | ShadowRoot = document, queryMethod = 'querySelector'): HTMLElement | NodeListOf<HTMLElement> {
   let element;
-  const selectors = selector.split('>>>');
+  const domLayers = selector.split('>>>');
 
-  // No shadowRoot in selector: return native querySelectorAll
-  if (selectors.length == 1) {
-    return root.querySelectorAll(selector);
-  }
+  // No shadowRoot in selector: return native querySelector[All]
+  if (domLayers.length == 1) return root[queryMethod](selector);
 
-  // shadowRoot in selector: return querySelectorAll through shadowRoot(s)
-  while (selectors.length) {
+  // shadowRoot in selector: return querySelector[All] through shadowRoot(s)
+  while (domLayers.length) {
     if (root) {
-      const currentSelector = selectors.shift().trim();
-
-      if (selectors.length == 0) {
-        return root.querySelectorAll(currentSelector);
+      const currentSelector = domLayers.shift().trim();
+      if (domLayers.length == 0) {
+        return root[queryMethod](currentSelector);
       } else {
         element = root.querySelector(currentSelector);
         if (element) {
@@ -111,6 +83,12 @@ export function getElements(selector: string, root: Document | HTMLElement | Sha
   }
 }
 
+// Returns the elements found by selector string
+//   Supports querying through a shadow DOM using '>>>'
+export function getElements(selector: string, root: Document | HTMLElement | ShadowRoot  = document): NodeListOf<HTMLElement> {
+  return getElementCore(selector, root, 'querySelectorAll') as NodeListOf<HTMLElement>;
+}
+
 export function getParent(node: HTMLElement, level: number = 1): HTMLElement {
   if (!node) {
     return null;