joicomponents/book/chapter7_html_comp/demo/TreeNodeOpen.html

Design patterns to build native web components

<script type="module">

  import {SlotchangeMixin} from "https://unpkg.com/joicomponents@1.2.27/src/slot/SlotChildMixin.js";

  class TreeNode extends SlotchangeMixin(HTMLElement) {
    constructor() {
      super();
      this.attachShadow({mode: "open"});
      this.shadowRoot.innerHTML = "<slot></slot>";
      this.addEventListener("click", this.onClick.bind(this));
      this.__isTriggered = false;
      this.__isSetup = false;
    }

    static get observedAttributes() {
      return ["open"];
    }

    slotCallback(slot) {
      this.__isSetup = true;
      this.getRootTreeNode().syncAtBranchChange();
    }

    attributeChangedCallback(name, oldValue, newValue) {
      if (name === "open") {
        if (this.__isSetup)
          newValue === null ? this.closeChildren() : this.openParent();
      }
    }

    getRootTreeNode() {
      let parent = this;
      while (parent.parentNode && parent.parentNode.tagName && parent.parentNode.tagName === "TREE-NODE")
        parent = parent.parentNode;
      return parent;
    }

    closeChildren() {
      if (this.children)
        for (let child of this.children) {
          if (child.tagName === "TREE-NODE" && child.hasAttribute("open"))
            child.removeAttribute("open");
        }
    }

    openParent() {
      const p = this.parentNode;
      if (p.tagName && p.tagName === "TREE-NODE" && !p.hasAttribute("open"))
        p.setAttribute("open", "");
    }

    syncAtBranchChange() {                                                              //[2]
      if (this.__isTriggered)
        return;
      this.__isTriggered = true;
      Promise.resolve().then(() => {
        this.__isTriggered = false;
        const opens = this.querySelectorAll("tree-node[open]");
        for (let i = 0; i < opens.length; i++) {
          let open = opens[i];
          open.openParent();
        }
      });
    }

    onClick(e) {
      e.stopPropagation();
      this.hasAttribute("open") ?
        this.removeAttribute("open") :
        this.setAttribute("open", "");
    }
  }

  customElements.define("tree-node", TreeNode);
</script>

<style>
  tree-node {
    display: block;
    padding-left: 10px;
  }
  tree-node[open] {
    color: green;
  }
  tree-node:not([open]) {
    color: red;
    display: none;
  }
  tree-node#root,
  tree-node[open] > tree-node:not([open]) {
    display: block;
  }
</style>

<tree-node id="root">book
  <tree-node>
    chapter 1
    <tree-node>
      chapter 1.1
      <tree-node open>chapter 1.1.1</tree-node>
      <tree-node>chapter 1.1.2</tree-node>
    </tree-node>
    <tree-node id="a">chapter 1.2</tree-node>
  </tree-node>

  <tree-node>
    chapter 2
    <tree-node open>chapter 2.1</tree-node>
    <tree-node>chapter 2.2</tree-node>
  </tree-node>
</tree-node>

<script>
  const clone = document.querySelector("tree-node").cloneNode(true);
  clone.id = undefined;
  setTimeout(function () {
    document.querySelector("tree-node#a").appendChild(clone);
  }, 3000);
</script>