myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From hno...@apache.org
Subject [myfaces-tobago] branch master updated: TOBAGO-1633: TS refactoring: polyfill ':scope' for edge
Date Fri, 02 Aug 2019 07:51:52 GMT
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new 42593fd  TOBAGO-1633: TS refactoring: polyfill ':scope' for edge
42593fd is described below

commit 42593fd67230503a5f470b128fb72cd50a858069
Author: Henning Noeth <hnoeth@apache.org>
AuthorDate: Fri Aug 2 09:50:40 2019 +0200

    TOBAGO-1633: TS refactoring: polyfill ':scope' for edge
    
    * children selector util removed
    * polyfill activated for development
---
 .../src/main/npm/js/tobago-polyfill.js             | 48 ++++++++++++++++++++++
 .../src/main/npm/ts/tobago-tree.ts                 |  6 +--
 .../src/main/npm/ts/tobago-utils.ts                | 31 --------------
 .../src/main/resources/META-INF/tobago-config.xml  |  2 +-
 4 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/js/tobago-polyfill.js b/tobago-theme/tobago-theme-standard/src/main/npm/js/tobago-polyfill.js
index 98c3de9..e60a858 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/js/tobago-polyfill.js
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/js/tobago-polyfill.js
@@ -45,3 +45,51 @@ if (!Element.prototype.closest) {
 }
 
 // //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+// for edge/ie
+try {
+  document.querySelector(":scope");
+} catch (exception) {
+  var querySelectorWithScope = polyfill(Element.prototype.querySelector);
+  Element.prototype.querySelector = function querySelector(selectors) {
+    return querySelectorWithScope.apply(this, arguments);
+  };
+
+  var querySelectorAllWithScope = polyfill(Element.prototype.querySelectorAll);
+  Element.prototype.querySelectorAll = function querySelectorAll(selectors) {
+    return querySelectorAllWithScope.apply(this, arguments);
+  };
+
+  if (Element.prototype.matches) {
+    var matchesWithScope = polyfill(Element.prototype.matches);
+    Element.prototype.matches = function matches(selectors) {
+      return matchesWithScope.apply(this, arguments);
+    };
+  }
+
+  if (Element.prototype.closest) {
+    var closestWithScope = polyfill(Element.prototype.closest);
+    Element.prototype.closest = function closest(selectors) {
+      return closestWithScope.apply(this, arguments);
+    };
+  }
+
+  function polyfill(prototypeFunc) {
+    var scope = /:scope(?![\w-])/gi;
+
+    return function (selector) {
+      if (selector.toLowerCase().indexOf(":scope") >= 0) {
+        var attr = 'tobagoScopeAttribute';
+        arguments[0] = selector.replace(scope, '[' + attr + ']');
+        this.setAttribute(attr, '');
+        var element = prototypeFunc.apply(this, arguments);
+        this.removeAttribute(attr);
+        return element;
+      } else {
+        return prototypeFunc.apply(this, arguments);
+      }
+    };
+  }
+}
+
+// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
index 6987feb..0988f47 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
@@ -24,8 +24,8 @@ class Tree {
     const element = event.currentTarget as HTMLElement;
     const node: HTMLDivElement = element.closest(".tobago-treeNode") as HTMLDivElement;
     const data = node.closest(".tobago-tree, .tobago-sheet") as HTMLElement;
-    const expanded = DomUtils.childrenQuerySelector(data,
-        ".tobago-tree-expanded, .tobago-sheet-expanded") as HTMLInputElement;
+    const expanded = data.querySelector(
+        ":scope > .tobago-tree-expanded, :scope > .tobago-sheet-expanded") as HTMLInputElement;
     const togglesIcon = node.querySelectorAll(".tobago-treeNode-toggle i") as NodeListOf<HTMLElement>;
     const togglesImage = node.querySelectorAll(".tobago-treeNode-toggle img") as NodeListOf<HTMLImageElement>;
     const rowIndex = Tree.rowIndex(node);
@@ -121,7 +121,7 @@ class Tree {
     const command = event.currentTarget as HTMLElement;
     const node = command.parentElement;
     const tree = node.closest(".tobago-tree");
-    const selected = DomUtils.childrenQuerySelector(tree, ".tobago-tree-selected") as HTMLInputElement;
+    const selected = tree.querySelector(".tobago-tree-selected") as HTMLInputElement;
     selected.value = String(Tree.rowIndex(node));
     for (const otherNode of tree.querySelectorAll(".tobago-treeNode-markup-selected")) {
       if (otherNode !== node) {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
index 379f217..d90707d 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
@@ -77,37 +77,6 @@ export class DomUtils {
   }
 
   /**
-   * Find all children which matches the selector.
-   * @param element Parent element in DOM to collect.
-   * @param selectors Name of the matcher of the elements to find.
-   */
-// todo: may return NodeListOf<HTMLElementTagNameMap[K]> or something like that.
-  static childrenQuerySelectorAll(element: HTMLElement, selectors: string): Array<HTMLElement>
{
-    const result: Array<HTMLElement> = new Array<HTMLElement>();
-    for (const child of element.children) {
-      if (child.matches(selectors)) {
-        result.push(child as HTMLElement);
-      }
-    }
-    return result;
-  }
-
-  /**
-   * Find one children which matches the selector.
-   * @param element Parent element in DOM to collect.
-   * @param selectors Name of the matcher of the elements to find.
-   */
-// todo: may return NodeListOf<HTMLElementTagNameMap[K]> or something like that.
-  static childrenQuerySelector(element: Element, selectors: string): HTMLElement {
-    for (const child of element.children) {
-      if (child.matches(selectors)) {
-        return child as HTMLElement;
-      }
-    }
-    return null;
-  }
-
-  /**
    * Get the previous sibling element (without <style> elements).
    */
   static previousElementSibling(element: HTMLElement): HTMLElement {
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
index 21b320f..353e177 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml
@@ -64,7 +64,7 @@
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-myfaces.js"/>
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-deltaspike.js"/>
 <!--          <script name="/tobago/standard/tobago-bootstrap/${project.version}/node_modules/@babel/polyfill/dist/polyfill.js"/>-->
-<!--          <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-polyfill.js"/>-->
+          <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-polyfill.js"/>
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-all.js"/>
 <!--
           <script name="/tobago/standard/tobago-bootstrap/${project.version}/js/tobago-listener.js"/>


Mime
View raw message