no submod

work/notea/server/public/ui/templates/_filetree.ctmpl

@@ -0,0 +1,87 @@
+{{ define "_filetree" }}
+<style>
+	details > details details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+	details > summary > .hamburger::before {
+		content: "+";
+	}
+	details[open] > summary > .hamburger::before {
+		content: "-";
+	}
+</style>
+<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
+	<details open>
+		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
+		<details open id="filetree">
+		</details>
+	</details>
+</div>
+<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="/ui/files/" + (id ? id : "")
+		var nameSafeId = id.replace(/\//g, "-")
+		var parentNameSafeId = nameSafeId
+		if (id.includes("/"))
+			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
+		const name=`filetree-leaf-${nameSafeId}`
+		const parentname=`filetree-leaf-${parentNameSafeId}`
+		const title=id ? branch.Leaf.Meta.Title : "ROOT"
+		const isLiveParent = '{{ .This.ID }}'.slice(0, id.length) == id
+		const isLive = '{{ .This.ID }}' == id
+		const linkToFile = `
+			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
+			<a style="flex-grow: 1;" href="${href}#${parentname}">
+				<button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">
+					${title}
+				</button>
+			</a>
+		`
+		return linkToFile + (branch.Leaf.Meta.ReadOnly ? "" : `<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>`)
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var html = []
+		var out = ``
+		for(var i in branches) {
+			html.push([branches[i].Leaf.Meta.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
+		}
+		html.sort()
+		for(var i in html)
+			out += html[i][1]
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse({{ .Tree }}))
+</script>
+{{ end }}