| /* |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| import {Selectable} from "./tobago-selectable"; |
| |
| export class Tree extends HTMLElement { |
| |
| constructor() { |
| super(); |
| } |
| |
| connectedCallback(): void { |
| } |
| |
| get isSheet(): boolean { |
| // TODO if sheet is implemented as custom element use: |
| // return this.tagName === "TOBAGO-SHEET"; |
| return this.classList.contains("tobago-sheet"); |
| } |
| |
| clearSelectedNodes(): void { |
| this.hiddenInputSelected.value = "[]"; //empty set |
| } |
| |
| addSelectedNode(selectedNode: number): void { |
| const selectedNodes = new Set(JSON.parse(this.hiddenInputSelected.value)); |
| selectedNodes.add(selectedNode); |
| this.hiddenInputSelected.value = JSON.stringify(Array.from(selectedNodes)); |
| } |
| |
| deleteSelectedNode(selectedNode: number): void { |
| const selectedNodes = new Set(JSON.parse(this.hiddenInputSelected.value)); |
| selectedNodes.delete(selectedNode); |
| this.hiddenInputSelected.value = JSON.stringify(Array.from(selectedNodes)); |
| } |
| |
| private get hiddenInputSelected(): HTMLInputElement { |
| if (this.isSheet) { |
| return this.querySelector(":scope > .tobago-sheet-selected"); |
| } else { |
| return this.querySelector(":scope > .tobago-tree-selected"); |
| } |
| } |
| |
| clearExpandedNodes(): void { |
| this.hiddenInputExpanded.value = "[]"; //empty set |
| } |
| |
| addExpandedNode(expandedNode: number): void { |
| const expandedNodes = new Set(JSON.parse(this.hiddenInputExpanded.value)); |
| expandedNodes.add(expandedNode); |
| this.hiddenInputExpanded.value = JSON.stringify(Array.from(expandedNodes)); |
| } |
| |
| deleteExpandedNode(expandedNode: number): void { |
| const expandedNodes = new Set(JSON.parse(this.hiddenInputExpanded.value)); |
| expandedNodes.delete(expandedNode); |
| this.hiddenInputExpanded.value = JSON.stringify(Array.from(expandedNodes)); |
| } |
| |
| get expandedNodes(): Set<number> { |
| return new Set(JSON.parse(this.hiddenInputExpanded.value)); |
| } |
| |
| private get hiddenInputExpanded(): HTMLInputElement { |
| if (this.isSheet) { |
| return this.querySelector(":scope > .tobago-sheet-expanded"); |
| } else { |
| return this.querySelector(":scope > .tobago-tree-expanded"); |
| } |
| } |
| |
| get selectable(): Selectable { |
| return Selectable[this.getAttribute("selectable")]; |
| } |
| } |
| |
| export class TreeNode extends HTMLElement { |
| |
| constructor() { |
| super(); |
| } |
| |
| connectedCallback(): void { |
| if (this.isExpandable() && this.toggles !== null) { |
| this.toggles.forEach(element => element.addEventListener("click", this.toggleNode.bind(this))); |
| } |
| } |
| |
| get tree(): Tree { |
| return this.closest("tobago-tree") as Tree; //TODO how to detect tobago-sheet? |
| } |
| |
| isExpandable(): boolean { |
| return this.getAttribute("expandable") === "expandable"; |
| } |
| |
| isExpanded(): boolean { |
| for (const expandedNodeIndex of this.tree.expandedNodes) { |
| if (expandedNodeIndex === this.index) { |
| return true; |
| } |
| } |
| return false; |
| } |
| |
| get treeChildNodes(): NodeListOf<TreeNode> { |
| if (this.tree.isSheet) { |
| return this.closest("tbody").querySelectorAll("tobago-tree-node[parent='" + this.id + "']"); |
| } else { |
| return this.parentElement.querySelectorAll("tobago-tree-node[parent='" + this.id + "']"); |
| } |
| } |
| |
| get toggles(): NodeListOf<HTMLSpanElement> { |
| return this.querySelectorAll(".tobago-treeNode-toggle"); |
| } |
| |
| get icons(): NodeListOf<HTMLElement> { |
| return this.querySelectorAll(".tobago-treeNode-toggle i"); |
| } |
| |
| get images(): NodeListOf<HTMLImageElement> { |
| return this.querySelectorAll(".tobago-treeNode-toggle img"); |
| } |
| |
| get index(): number { |
| return Number(this.getAttribute("index")); |
| } |
| |
| toggleNode(event: MouseEvent): void { |
| if (this.isExpanded()) { |
| for (const icon of this.icons) { |
| icon.classList.remove(icon.dataset.tobagoOpen); |
| icon.classList.add(icon.dataset.tobagoClosed); |
| } |
| for (const image of this.images) { |
| if (image.dataset.tobagoClosed) { |
| image.src = image.dataset.tobagoClosed; |
| } else { |
| image.src = image.dataset.tobagoOpen; |
| } |
| } |
| |
| this.tree.deleteExpandedNode(this.index); |
| this.classList.remove("tobago-treeNode-markup-expanded"); |
| |
| this.hideNodes(this.treeChildNodes); |
| } else { |
| for (const icon of this.icons) { |
| icon.classList.remove(icon.dataset.tobagoClosed); |
| icon.classList.add(icon.dataset.tobagoOpen); |
| } |
| for (const image of this.images) { |
| if (image.dataset.tobagoOpen) { |
| image.src = image.dataset.tobagoOpen; |
| } else { |
| image.src = image.dataset.tobagoClosed; |
| } |
| } |
| |
| this.tree.addExpandedNode(this.index); |
| this.classList.add("tobago-treeNode-markup-expanded"); |
| |
| if (this.treeChildNodes.length === 0) { |
| jsf.ajax.request( |
| this.id, |
| event, |
| { |
| //"javax.faces.behavior.event": "click", |
| execute: this.tree.id, |
| render: this.tree.id |
| }); |
| } else { |
| this.showNodes(this.treeChildNodes); |
| } |
| } |
| } |
| |
| hideNodes(treeChildNodes: NodeListOf<TreeNode>): void { |
| for (const treeChildNode of treeChildNodes) { |
| |
| if (treeChildNode.tree.isSheet) { |
| treeChildNode.closest("tobago-sheet-row").classList.add("d-none"); |
| } else { |
| treeChildNode.classList.add("d-none"); |
| } |
| |
| this.hideNodes(treeChildNode.treeChildNodes); |
| } |
| } |
| |
| showNodes(treeChildNodes: NodeListOf<TreeNode>): void { |
| for (const treeChildNode of treeChildNodes) { |
| |
| if (treeChildNode.tree.isSheet) { |
| treeChildNode.closest("tobago-sheet-row").classList.remove("d-none"); |
| } else { |
| treeChildNode.classList.remove("d-none"); |
| } |
| |
| this.showNodes(treeChildNode.treeChildNodes); |
| } |
| } |
| } |
| |
| export class TreeSelect extends HTMLElement { |
| |
| constructor() { |
| super(); |
| } |
| |
| 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 { |
| return this.closest("tobago-tree") as Tree; |
| } |
| |
| get treeNode(): TreeNode { |
| return this.closest("tobago-tree-node") as TreeNode; |
| } |
| |
| get input(): HTMLInputElement { |
| return this.querySelector("input"); |
| } |
| |
| select(event: Event): void { |
| switch (this.input.type) { |
| case "radio": |
| this.tree.clearSelectedNodes(); |
| this.tree.addSelectedNode(this.treeNode.index); |
| break; |
| case "checkbox": |
| if (this.input.checked) { |
| this.tree.addSelectedNode(this.treeNode.index); |
| } else { |
| this.tree.deleteSelectedNode(this.treeNode.index); |
| } |
| 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); |
| } else { |
| this.tree.deleteSelectedNode(child.treeNode.index); |
| } |
| |
| child.input.dispatchEvent(new Event("change", {bubbles: true})); |
| } |
| } |
| } |
| |
| document.addEventListener("DOMContentLoaded", function (event: Event): void { |
| window.customElements.define("tobago-tree-select", TreeSelect); |
| window.customElements.define("tobago-tree-node", TreeNode); |
| window.customElements.define("tobago-tree", Tree); |
| }); |