dynamic loading

static/css/tree.css

@@ -97,8 +97,7 @@
     opacity: 100%;
 }
 
-.tree .branch-link {
-    background-image: url("../svg/link.svg");
+.tree .icon {
     background-repeat: no-repeat;
     background-position: 50% 50%;
     opacity: 35%;
@@ -106,3 +105,24 @@
     width: 24px;
     height: 24px;
 }
+
+.tree .icon-permalink {
+    background-image: url("../svg/permalink.svg");
+}
+
+.tree .icon-go {
+    background-image: url("../svg/go.svg");
+}
+
+.tree a.navigate {
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+    opacity: 50%;
+    color: #000;
+    padding-left: 20px;
+}
+
+.tree .link-loading {
+    padding-left: 24px;
+    opacity: 50%;
+}

static/js/tree.js

@@ -0,0 +1,60 @@
+class LinkedBranch extends HTMLLIElement {
+    constructor() {
+        super();
+
+        this.linkedTree = this.getAttribute("data-th-link");
+
+        this.details = this.childNodes[0];
+        this.innerUL = this.details.childNodes[1];
+
+        this.state = "notloaded";
+
+        this.loadingText = document.createElement("p");
+        {
+            this.loadingText.className = "link-loading";
+            let linkedTreeName = document.createElement("code");
+            linkedTreeName.innerText = this.linkedTree;
+            this.loadingText.append("Loading ", linkedTreeName, "...");
+        }
+        this.innerUL.appendChild(this.loadingText);
+
+        // This produces a warning during static generation but we still want to handle that
+        // correctly. Having an expanded-by-default linked block can be useful in development.
+        if (this.details.open) {
+            this.loadTree();
+        }
+
+        this.details.addEventListener("toggle", event => {
+            if (this.details.open) {
+                this.loadTree();
+            }
+        });
+    }
+
+    loadTree() {
+        if (this.state == "notloaded") {
+            this.state = "loading";
+
+            fetch(`/${this.linkedTree}.html`)
+                .then(request => request.text())
+                .then(text => {
+                    let parser = new DOMParser();
+                    let linkedDocument = parser.parseFromString(text, "text/html");
+                    let main = linkedDocument.getElementsByTagName("main")[0];
+                    let ul /*: Element */ = main.getElementsByTagName("ul")[0];
+                    console.log(ul);
+
+                    this.loadingText.remove();
+
+                    for (let i = 0; i < ul.childNodes.length; ++i) {
+                        this.innerUL.appendChild(ul.childNodes[i]);
+                    }
+                })
+                .catch(error => {
+                    this.loadingText.innerText = error.toString();
+                });
+        }
+    }
+}
+
+customElements.define("th-linked-branch", LinkedBranch, { extends: "li" });