notea-de-me/spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl

72 lines
1.9 KiB
Plaintext

{{ define "_filetree" }}
<style>
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;
}
</style>
<div class="fullscreen tb_fullscreen" style="max-width: 25em;">
<details open id="filetree">
</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.Title : "ROOT"
const isLive = `{{ .This.ID }}`
return `
<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;">${title}</button></a>
<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>
`
}
function branchesHTML(id, branches) {
if (!branchesHaveContent(branches))
return ""
var out = ``
for(var i in branches) {
out += `<details open>`
out += branchHTML(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 }}