whee

spike/review/reinvent/ezmded/ui/render.go

@@ -38,40 +38,32 @@ func main() {
 	data := map[string]interface{}{
 		"This": map[string]interface{}{
 			"ID":     "id00/id11",
-			"Title":  "title11",
+			"Title":  "title id11",
 			"PID":    "id00",
-			"PTitle": "title00",
+			"PTitle": "title id00",
-		},
-		"Tree": []map[string]interface{}{
-			map[string]interface{}{
-				"ID":     "id00",
-				"Title":  "title00",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":    "id00/id10",
-				"Title": "title10",
-			},
-			map[string]interface{}{
-				"ID":     "id00/id11",
-				"Title":  "title11",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":     "id00/id11/id20",
-				"Title":  "title20",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":     "id01",
-				"Title":  "title01",
-				"PID":    "",
-				"PTitle": "",
 		},
+		"Tree": `{
+			"Leaf": {"Title": ""},
+			"Branches": {
+				"id00": {
+					"Leaf": {"Title": "title id00"},
+					"Branches": {
+						"id10": {"Leaf":{"Title":"title id10"},"Branches":{
+							"id20": {"Leaf":{"Title":"title id20"},"Branches":{}}
+						}},
+						"id11": {"Leaf":{"Title":"title id11"},"Branches":{}}
+					}
 				},
+				"id01": {"Leaf":{"Title":"title id01"},"Branches":{}},
+				"id02": {"Leaf":{"Title":"title id02"},"Branches":{}},
+				"id03": {"Leaf":{"Title":"title id03"},"Branches":{}},
+				"id04": {"Leaf":{"Title":"title id04"},"Branches":{}},
+				"id04": {"Leaf":{"Title":"title id04"},"Branches":{}},
+				"id05": {"Leaf":{"Title":"title id05"},"Branches":{}},
+				"id06": {"Leaf":{"Title":"title id06"},"Branches":{}},
+				"id07": {"Leaf":{"Title":"title id07"},"Branches":{}}
+			}
+		}`,
 	}
 	if err := recursePwd(func(p string) error {
 		switch path.Ext(p) {

spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl

@@ -1,45 +1,62 @@
-{{ $filetreeLevel := 0 }}
-
-{{ define "_filetreeLevelUpOpen" }}
-   {{ if gt .Level $filetreeLevel }}
-      <details>
-      {{ $filetreeLevel = $filetreeLevel + 1 }}
-      {{ template "_filetreeLevelUpOpen" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeCloseAll" }}
-   {{ if lt 0 $filetreeLevel }}
-      </details>
-      {{ $filetreeLevel = $filetreeLevel - 1 }}
-      {{ template "_filetreeCloseAll" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeLevelDownOpen" }}
-   {{ if lt .Level $filetreeLevel }}
-      </details>
-      {{ $filetreeLevel = $filetreeLevel - 1 }}
-      {{ template "_filetreeLevelDownOpen" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeRecurse" }}
-   <plaintext>
-   {{ range . }}
-      {{ template "_filetreeLevelUpOpen" . }}
-      {{ template "_filetreeLevelDownOpen" . }}
-         <details>
-            <summary>
-               <a href="/files/{{ .ID }}">{{ .Title }}</a>
-            </summary>
-   {{ end }}
-   {{ template "_filetreeLevelDownOpen" . }}
-{{ end }}
-
 {{ define "_filetree" }}
-input = {{ . }}
+<style>
-<div>
+	details > details {
-   {{ template "_filetreeRecurse" .Tree }}
+		padding-inline-start: 2em;
-</div>
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+</style>
+<details open id="filetree">
+</details>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href=id ? id : "#"
+		const name=`filetree-leaf-${id}`
+		const title=id ? branch.Leaf.Title : "ROOT"
+		return `
+			<a style="flex-grow: 1;" href="${href}"><button style="width: 100%; text-align: left;">${title}</button></a>
+			<button>+</button>
+		`
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var out = ``
+		for(var i in branches) {
+			out += `<details open>`
+			out += branchHTML((id ? id + "/" : "") + i, branches[i])
+			out += `</details>`
+		}
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse(`{{ .Tree }}`))
+</script>
 {{ end }}