84 lines
2.4 KiB
Plaintext
84 lines
2.4 KiB
Plaintext
{{ 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.Title : "ROOT"
|
|
const isLiveParent = '{{ .This.ID }}'.slice(0, id.length) == id
|
|
const isLive = '{{ .This.ID }}' == 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;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">${title}</button></a>
|
|
<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.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 }}
|