[myfaces-tobago] branch master updated: tobago-tree: custom elements

[hn...@apache.org]

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 af60bca  tobago-tree: custom elements
af60bca is described below

commit af60bca8ab24d332af25a3309736a84e27e442a2
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Nov 29 16:24:11 2019 +0100

    tobago-tree: custom elements
    
    fix: multiple tobago-page-overlays after collapsing/expanding tree.
    
    issue: TOBAGO-1633: TS refactoring
---
 .../renderkit/renderer/TreeSelectRenderer.java     |  1 +
 .../src/main/npm/ts/tobago-tree.ts                 | 64 +++++++++++++++++-----
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
index ad60083..69152ec 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
@@ -138,6 +138,7 @@ public class TreeSelectRenderer extends RendererBase {
       final CommandMap behaviorCommands = getBehaviorCommands(facesContext, treeSelect);
       Command change = behaviorCommands.getOther().get(ClientBehaviors.change);
       change.setExecute(change.getExecute() + " " + tree.getClientId(facesContext));
+      change.setRender(change.getRender() + " " + tree.getClientId(facesContext));
       encodeBehavior(writer, behaviorCommands);
     }
 
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 64b1c2f..d3b8aa4 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
@@ -42,6 +42,22 @@ export class Tree extends HTMLElement {
     this.hiddenInputSelected.value = JSON.stringify(Array.from(selectedNodes));
   }
 
+  getSelectedNodes(): NodeListOf<TreeNode> {
+    let queryString: string = "";
+    for (const selectedNodeIndex of JSON.parse(this.hiddenInputSelected.value)) {
+      if (queryString.length > 0) {
+        queryString += ", ";
+      }
+      queryString += "tobago-tree-node[index='" + selectedNodeIndex + "']";
+    }
+
+    if(queryString.length > 0) {
+      return this.querySelectorAll(queryString) as NodeListOf<TreeNode>;
+    } else {
+      return null;
+    }
+  }
+
   deleteSelectedNode(selectedNode: number): void {
     const selectedNodes = new Set(JSON.parse(this.hiddenInputSelected.value));
     selectedNodes.delete(selectedNode);
@@ -181,7 +197,6 @@ export class TreeNode extends HTMLElement {
             this.id,
             event,
             {
-              //"javax.faces.behavior.event": "click",
               execute: this.tree.id,
               render: this.tree.id
             });
@@ -226,10 +241,6 @@ export class TreeSelect extends HTMLElement {
 
   connectedCallback(): void {
     this.input.addEventListener("change", this.select.bind(this));
-
-    if (this.tree.selectable === Selectable.multiCascade) {
-      this.input.addEventListener("change", this.selectChildren.bind(this));
-    }
   }
 
   get tree(): Tree {
@@ -240,6 +251,18 @@ export class TreeSelect extends HTMLElement {
     return this.closest("tobago-tree-node") as TreeNode;
   }
 
+  get treeSelectChildren(): NodeListOf<TreeSelect> {
+    let treeNodeId: string = this.treeNode.id;
+    if (this.tree.isSheet) {
+      return this.closest("tbody")
+          .querySelectorAll("tobago-tree-node[parent='" + treeNodeId + "'] tobago-tree-select");
+    } else {
+      let treeNode = this.closest("tobago-tree-node");
+      return treeNode.parentElement
+          .querySelectorAll("tobago-tree-node[parent='" + treeNode.id + "'] tobago-tree-select");
+    }
+  }
+
   get input(): HTMLInputElement {
     return this.querySelector("input");
   }
@@ -256,22 +279,35 @@ export class TreeSelect extends HTMLElement {
         } else {
           this.tree.deleteSelectedNode(this.treeNode.index);
         }
+
+        if (this.tree.selectable === Selectable.multiCascade) {
+          let treeNodeIds = [];
+          this.selectChildren(this.treeSelectChildren, this.input.checked, treeNodeIds);
+
+          /*if (treeNodeIds.length > 0) {
+            for (const id of treeNodeIds) {
+              let ts: TreeSelect = document.getElementById(id).querySelector("tobago-tree-select") as TreeSelect;
+              ts.input.dispatchEvent(new Event("change", {bubbles: false}));
+            }
+          }*/
+        }
         break;
     }
   }
 
-  selectChildren(event: Event): void {
-    for (const treeChildNode of this.treeNode.treeChildNodes) {
-      const child: TreeSelect = treeChildNode.querySelector(":scope > tobago-tree-select");
-      child.input.checked = this.input.checked;
-
-      if (this.input.checked) {
-        this.tree.addSelectedNode(child.treeNode.index);
+  selectChildren(treeSelectChildren: NodeListOf<TreeSelect>, checked: boolean, treeNodeIds: Array<string>): void {
+    for (const treeSelect of treeSelectChildren) {
+      if (treeSelect.input.checked !== checked) {
+        treeSelect.input.checked = checked;
+        treeNodeIds.push(treeSelect.treeNode.id);
+      }
+      if (checked) {
+        this.tree.addSelectedNode(treeSelect.treeNode.index);
       } else {
-        this.tree.deleteSelectedNode(child.treeNode.index);
+        this.tree.deleteSelectedNode(treeSelect.treeNode.index);
       }
 
-      child.input.dispatchEvent(new Event("change", {bubbles: true}));
+      this.selectChildren(treeSelect.treeSelectChildren, checked, treeNodeIds);
     }
   }
 }