TOBAGO-1633: TS refactoring: polyfill ':scope' for edge
* children selector util removed
* polyfill activated for development
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 @@
}
// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+// 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 @@
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 @@
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 @@
}
/**
- * 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"/>
