241 lines
7.0 KiB
HTML
241 lines
7.0 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<title>title id11</title>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
|
|
|
|
<style>
|
|
html, body {
|
|
background-color: #f8f8f8;
|
|
}
|
|
.columns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.rows {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.thic_flex {
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
}
|
|
.mia {
|
|
display: none;
|
|
}
|
|
.align_left {
|
|
text-align: left;
|
|
}
|
|
.tb_buffer {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.r_buffer {
|
|
margin-right: 1em;
|
|
}
|
|
.l_buffer {
|
|
margin-left: 1em;
|
|
}
|
|
.monospace {
|
|
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
|
|
}
|
|
.lil_btn {
|
|
width: initial;
|
|
display: inline-block;
|
|
}
|
|
input, label, textarea {
|
|
margin: initial;
|
|
}
|
|
.fullscreen {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 5px;
|
|
overflow: scroll;
|
|
}
|
|
.lr_fullscreen {
|
|
width: 100%;
|
|
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
.tb_fullscreen {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script>
|
|
function http(method, remote, callback, body, headers) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
|
|
}
|
|
};
|
|
xmlhttp.open(method, remote, true);
|
|
if (typeof body == "undefined") {
|
|
body = null
|
|
}
|
|
if (headers) {
|
|
for (var key in headers)
|
|
xmlhttp.setRequestHeader(key, headers[key])
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
function generateUUID() {
|
|
var d = new Date().getTime();
|
|
var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
|
var r = Math.random() * 16;
|
|
if(d > 0){
|
|
r = (d + r)%16 | 0;
|
|
d = Math.floor(d/16);
|
|
} else {
|
|
r = (d2 + r)%16 | 0;
|
|
d2 = Math.floor(d2/16);
|
|
}
|
|
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
|
}
|
|
);
|
|
}
|
|
</script>
|
|
|
|
</header>
|
|
<body class="fullscreen tb_fullscreen lr_fullscreen" style="position: absolute">
|
|
<div class="rows" style="height: inherit;">
|
|
|
|
<form class="columns" action="/ui/search" method="GET">
|
|
<input class="thic_flex" type="text" name="q" placeholder="space delimited search regexp"/>
|
|
<input class="info lil_btn" type="submit" value="search"/>
|
|
</form>
|
|
|
|
<div class="columns thic_flex tb_buffer" style="height: calc(100% - 4rem);">
|
|
|
|
<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 = 'id00\/id11'.slice(0, id.length) == id
|
|
const isLive = 'id00\/id11' == 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("{\n\t\t\t\"Leaf\": {\"Title\": \"\"},\n\t\t\t\"Branches\": {\n\t\t\t\t\"id00\": {\n\t\t\t\t\t\"Leaf\": {\"Title\": \"title id00\"},\n\t\t\t\t\t\"Branches\": {\n\t\t\t\t\t\t\"id10\": {\"Leaf\":{\"Title\":\"title id10\"},\"Branches\":{\n\t\t\t\t\t\t\t\"id20\": {\"Leaf\":{\"Title\":\"title id20\"},\"Branches\":{}}\n\t\t\t\t\t\t}},\n\t\t\t\t\t\t\"id11\": {\"Leaf\":{\"Title\":\"title id11\"},\"Branches\":{}}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\"id01\": {\"Leaf\":{\"Title\":\"title id01\"},\"Branches\":{}},\n\t\t\t\t\"id02\": {\"Leaf\":{\"Title\":\"title id02\"},\"Branches\":{}},\n\t\t\t\t\"id03\": {\"Leaf\":{\"Title\":\"title id03\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id04\": {\"Leaf\":{\"Title\":\"title id04\"},\"Branches\":{}},\n\t\t\t\t\"id05\": {\"Leaf\":{\"Title\":\"title id05\"},\"Branches\":{}},\n\t\t\t\t\"id06\": {\"Leaf\":{\"Title\":\"title id06\"},\"Branches\":{}},\n\t\t\t\t\"id07\": {\"Leaf\":{\"Title\":\"title id07 but it's really really really long\"},\"Branches\":{}}\n\t\t\t}\n\t\t}"))
|
|
</script>
|
|
|
|
<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
|
|
|
|
<style>
|
|
</style>
|
|
</script>
|
|
<div class="fullscreen tb_fullscreen">
|
|
<ul id="results">
|
|
|
|
<li>
|
|
<a href="/ui/files/id00">title id00</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/ui/files/id07">title id07 but it's really really really long</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/ui/files/id00/id10/id10">title id00 / title id10</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/ui/files/id00/id10/id20">title id00 / title id10 / title id20</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|