move ui under server for docker build
Bel LaPointe
parent
eadc4080b1
commit
5a569cb6d4
|
|
@ -0,0 +1,349 @@
|
|||
|
||||
<!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;">
|
||||
|
||||
<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>
|
||||
<style>
|
||||
#easyMDEwrap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.CodeMirror-scroll, .CodeMirror-sizer {
|
||||
min-height: 10px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
#article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#titlepath, #title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.EasyMDEContainer button {
|
||||
color: black;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.editor-toolbar > button.preview {
|
||||
color: #08c;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var saveFeedbackInterval = null
|
||||
function pushFile() {
|
||||
const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
|
||||
const body = easyMDE.value() ? easyMDE.value() : ""
|
||||
const id = "id00/id11"
|
||||
headers = {}
|
||||
if (title)
|
||||
headers["Title"] = title
|
||||
http("PUT", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to push file ${id}: ${status}: ${body}`)
|
||||
throw `failed to push file ${id}: ${status}: ${body}`
|
||||
}
|
||||
document.getElementById("saveFeedback").innerHTML = "success!"
|
||||
if (saveFeedbackInterval) {
|
||||
clearTimeout(saveFeedbackInterval)
|
||||
}
|
||||
saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
|
||||
}, body, headers)
|
||||
}
|
||||
function deleteFile() {
|
||||
const id = "id00/id11"
|
||||
const pid = "id00"
|
||||
http("DELETE", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to delete file ${id}: ${status}: ${body}`)
|
||||
throw `failed to delete file ${id}: ${status}: ${body}`
|
||||
}
|
||||
window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<div class="fullscreen tb_fullscreen">
|
||||
<article id="article">
|
||||
<div class="columns">
|
||||
<span class="r_buffer">
|
||||
<form action="#" onsubmit="pushFile(); return false;">
|
||||
<input class="button-info lil_btn" type="submit" value="SAVE"/>
|
||||
</form>
|
||||
</span>
|
||||
<span id="titlePath">
|
||||
/
|
||||
|
||||
<a href="/ui/files/id00">title id00</a> /
|
||||
|
||||
</span>
|
||||
<span id="title" class="thic_flex" contenteditable>title id11</span>
|
||||
<span class="l_buffer">
|
||||
<form onsubmit="deleteFile(); return false;">
|
||||
<input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="easyMDEwrap" class="monospace">
|
||||
<textarea id="my-text-area"></textarea>
|
||||
</div>
|
||||
<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
const easyMDE = new EasyMDE({
|
||||
autoDownloadFontAwesome: true,
|
||||
autofocus: true,
|
||||
autosave: {
|
||||
enabled: false,
|
||||
},
|
||||
element: document.getElementById('my-text-area'),
|
||||
forceSync: true,
|
||||
indentWithTabs: false,
|
||||
initialValue: "loading...",
|
||||
showIcons: ["code", "table"],
|
||||
spellChecker: false,
|
||||
sideBySideFullscreen: false,
|
||||
tabSize: 3,
|
||||
previewImagesInEditor: true,
|
||||
insertTexts: {
|
||||
image: ["![](", ")"],
|
||||
link: ["[](", ")"],
|
||||
},
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
uploadImage: true,
|
||||
imageUploadEndpoint: "/api/v0/media",
|
||||
imagePathAbsolute: false,
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
status: ["lines", "words", "cursor"],
|
||||
})
|
||||
easyMDE.value("# hello\n\n## world\n\n| this | is | my | table |\n| ---- | ---| ---| ----- |\n| hey |\n| ya | hey | ya |\n\n* and\n\t* a bulleted\n\t\t* list\n\n\u003e but here is a quote\n\n```go\n// and some go code\nfunc main() {\n\tlog.Println(\"hi\")\n}\n```\n\nand\n\nnow\n\nthe\n\nnewlines\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t")
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,456 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<header>
|
||||
<title>Notes</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">
|
||||
<!-- todo css
|
||||
<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
|
||||
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
||||
-->
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.EasyMDEContainer button {
|
||||
color: black;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.filetree {
|
||||
max-width: 15em;
|
||||
width: 15em;
|
||||
min-width: 15em;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.filesummary {
|
||||
min-width: 10em;
|
||||
}
|
||||
.filedetails {
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
.filetree > .filedetails,
|
||||
.filetree > .filedetails > .filedetails {
|
||||
padding-inline-start: 0em;
|
||||
}
|
||||
.fileleaf {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: calc(100% - 1em);
|
||||
}
|
||||
.fileleaf > input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
.fileleaf > input:hover,
|
||||
input.live_leaf {
|
||||
background: #ddd;
|
||||
}
|
||||
.lr_fullscreen {
|
||||
width: 90%;
|
||||
max-width: 1024px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.tb_fullscreen {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.editor-toolbar > button.preview {
|
||||
color: #08c;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function init() {
|
||||
drawTree()
|
||||
setInterval(drawTree, 100000)
|
||||
navigateToQueryParams()
|
||||
}
|
||||
|
||||
function navigateToQueryParams() {
|
||||
var queryF = getParameterByName("f")
|
||||
var queryQ = getParameterByName("q")
|
||||
console.log("init query f:", queryF, "q:", queryQ)
|
||||
if (queryF && queryF.length > 0) {
|
||||
drawFile(queryF)
|
||||
} else if (queryQ && queryQ.length > 0) {
|
||||
searchFilesFor(queryQ)
|
||||
}
|
||||
}
|
||||
|
||||
function getParameterByName(name, url = window.location.href) {
|
||||
name = name.replace(/[\[\]]/g, '\\$&');
|
||||
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
function deleteFile() {
|
||||
if (!confirm("would you like to delete this file?"))
|
||||
return
|
||||
const id = easyMDE.meta.id
|
||||
if (!id || id.length == 0)
|
||||
return
|
||||
http("DELETE", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to delete file ${id}: ${status}: ${body}`)
|
||||
throw `failed to delete file ${id}: ${status}: ${body}`
|
||||
}
|
||||
drawTree()
|
||||
var pid = id.slice(0, id.lastIndexOf("/"))
|
||||
if (pid) {
|
||||
drawFile(pid)
|
||||
} else {
|
||||
disableMDE()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function searchFiles() {
|
||||
const q = document.getElementById("searchbox").value
|
||||
searchFilesFor(q)
|
||||
}
|
||||
|
||||
function searchFilesFor(q) {
|
||||
http("GET", "/api/v0/search?q=" + q, (body, status) => {
|
||||
var results = JSON.parse(body)
|
||||
console.log(q, results)
|
||||
results.sort()
|
||||
var innerHTML = "<ul>"
|
||||
for (var result in results)
|
||||
innerHTML += `<li><input class="align_left" type="button" onclick="drawFile('${results[result]}');" value="${idsToFullTitle(results[result].split("/"))}"</li>`
|
||||
innerHTML += "</ul>"
|
||||
if (!results || results.length == 0)
|
||||
innerHTML = "no results"
|
||||
disableMDE()
|
||||
navigateToQuery("q", q)
|
||||
document.getElementById("searchResults").innerHTML = innerHTML
|
||||
})
|
||||
}
|
||||
|
||||
var saveFeedbackInterval = null
|
||||
function pushFile() {
|
||||
const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
|
||||
const body = easyMDE.value() ? easyMDE.value() : ""
|
||||
const id = easyMDE.meta.id ? easyMDE.meta.id : ""
|
||||
headers = {}
|
||||
if (title)
|
||||
headers["Title"] = title
|
||||
http("PUT", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to push file ${id}: ${status}: ${body}`)
|
||||
throw `failed to push file ${id}: ${status}: ${body}`
|
||||
}
|
||||
drawTree()
|
||||
//drawFile(id)
|
||||
document.getElementById("saveFeedback").innerHTML = "success!"
|
||||
if (saveFeedbackInterval) {
|
||||
clearTimeout(saveFeedbackInterval)
|
||||
}
|
||||
saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
|
||||
}, body, headers)
|
||||
}
|
||||
|
||||
function drawFile(id) {
|
||||
if (!id || id.length < 1) {
|
||||
return
|
||||
}
|
||||
http("GET", "/api/v0/files/"+id, (body, status, headers) => {
|
||||
if (status != 200) {
|
||||
throw `ERR loading file: ${status}: ${body}`
|
||||
}
|
||||
const title = headers("title") ? headers("title") : ""
|
||||
setMDE(id, title, body)
|
||||
})
|
||||
}
|
||||
|
||||
function drawNewFile(pid) {
|
||||
setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
|
||||
if (easyMDE.isPreviewActive()) {
|
||||
easyMDE.togglePreview()
|
||||
}
|
||||
}
|
||||
|
||||
function enableMDE() {
|
||||
document.getElementById("searchResults").className = "mia";
|
||||
document.getElementById("article").className = "";
|
||||
}
|
||||
|
||||
function disableMDE() {
|
||||
document.getElementById("article").className = "mia";
|
||||
document.getElementById("searchResults").className = "";
|
||||
}
|
||||
|
||||
var liveLeafTimeout = null
|
||||
|
||||
function setMDE(id, title, body) {
|
||||
if (id[0] == "/")
|
||||
id = id.slice(1, id.length)
|
||||
if (id[id.length-1] == "/")
|
||||
id = id.slice(0, id.length-1)
|
||||
var pids = id.split("/")
|
||||
pids = pids.slice(0, pids.length-1)
|
||||
|
||||
var titlePath = "/"
|
||||
for (var i = 0; i < pids.length; i++) {
|
||||
const fullPid = pids.slice(0, i+1)
|
||||
titlePath = `/ <input type="button" class="lil_btn" value="${idsToTitle(fullPid)}" onclick="drawFile('${fullPid.join("/")}');"/> /`
|
||||
}
|
||||
if (pids.length > 1) {
|
||||
titlePath = "/ ... "+titlePath
|
||||
}
|
||||
|
||||
enableMDE()
|
||||
document.getElementById("titlePath").innerHTML = titlePath
|
||||
document.getElementById("title").innerHTML = title
|
||||
easyMDE.value(body)
|
||||
easyMDE.meta = {
|
||||
id: id,
|
||||
}
|
||||
if (!easyMDE.isPreviewActive()) {
|
||||
easyMDE.togglePreview()
|
||||
var previews = document.getElementsByClassName("preview")
|
||||
}
|
||||
const previouslyHighlighted = document.getElementsByClassName("live_leaf")
|
||||
for (var i in previouslyHighlighted)
|
||||
if (previouslyHighlighted && previouslyHighlighted[i] && previouslyHighlighted[i].classList)
|
||||
previouslyHighlighted[i].classList.remove("live_leaf")
|
||||
if (liveLeafTimeout)
|
||||
clearTimeout(liveLeafTimeout)
|
||||
liveLeafTimeout = setTimeout(() => {
|
||||
const toHighlight = document.getElementsByClassName(btoa("/"+id))
|
||||
for (var i = 0; i < toHighlight.length; i++) {
|
||||
if (toHighlight && toHighlight[i] && toHighlight[i].classList)
|
||||
toHighlight[i].classList.add("live_leaf")
|
||||
}
|
||||
}, 100)
|
||||
navigateToQuery("f", id)
|
||||
}
|
||||
|
||||
var lastNavigateToQuery = new Date()
|
||||
|
||||
function navigateToQuery(k, v) {
|
||||
if (new Date() - lastNavigateToQuery < .1)
|
||||
return
|
||||
lastNavigateToQuery = new Date()
|
||||
const url = new URL(window.location)
|
||||
url.searchParams.set(k, v)
|
||||
var hash = "#?"
|
||||
const it = url.searchParams.entries()
|
||||
let result = it.next()
|
||||
while (!result.done) {
|
||||
hash = hash + result.value[0] + "=" + result.value[1] + "&"
|
||||
result = it.next()
|
||||
}
|
||||
window.location.hash = hash
|
||||
}
|
||||
|
||||
var lastTree = {}
|
||||
|
||||
function idsToTitle(original_ids) {
|
||||
const fullTitle = idsToFullTitle(original_ids)
|
||||
return fullTitle.slice(fullTitle.lastIndexOf("/")+1, fullTitle.length)
|
||||
}
|
||||
|
||||
function idsToFullTitle(original_ids) {
|
||||
var ids = original_ids.slice(0, original_ids.length)
|
||||
var subtree = lastTree
|
||||
var fullTitle = ""
|
||||
while (ids && ids.length > 0) {
|
||||
if (!subtree || !subtree["Branches"] || !subtree["Branches"][ids[0]])
|
||||
break
|
||||
subtree = subtree["Branches"][ids[0]]
|
||||
if (subtree && subtree.Leaf && subtree.Leaf.Title)
|
||||
fullTitle += "/" + subtree.Leaf.Title
|
||||
ids = ids.slice(1, ids.length)
|
||||
if (ids.length == 0) {
|
||||
return fullTitle.slice(1, fullTitle.length)
|
||||
}
|
||||
}
|
||||
return ids[ids.length-1]
|
||||
}
|
||||
|
||||
function drawTree() {
|
||||
function htmlifyBranch(id, branch) {
|
||||
const maxTreeTitleLength = 35
|
||||
var parent = `
|
||||
<input class="thic_flex ${btoa(id)}" type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
|
||||
<input type="button" class="lil_btn" value="+" onclick="drawNewFile('${id}');"/>
|
||||
`
|
||||
if (id == "") {
|
||||
parent = `
|
||||
<span class="thic_flex"></span>
|
||||
<input type="button" value="+" onclick="drawNewFile('${id}');"/>
|
||||
`
|
||||
}
|
||||
var children = []
|
||||
for (var child in branch.Branches)
|
||||
children.push({title: branch.Branches[child].Leaf.Title, content: htmlifyBranch(id + "/" + child, branch.Branches[child])})
|
||||
children = children.map((e) => `<!--${e.title}-->${e.content}`)
|
||||
children.sort();
|
||||
children = children.join("\n")
|
||||
return `
|
||||
<details class="filedetails" open>
|
||||
<summary class="filesummary">
|
||||
<div class="fileleaf">${parent}</div>
|
||||
</summary>
|
||||
${children}
|
||||
</details>
|
||||
`
|
||||
}
|
||||
http("GET", "/api/v0/tree", (body, status) => {
|
||||
if (status != 200)
|
||||
throw `bad status getting tree: ${status}: ${body}`
|
||||
lastTree = JSON.parse(body)
|
||||
document.getElementById("tree").innerHTML = htmlifyBranch("", lastTree)
|
||||
})
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
</header>
|
||||
<body class="lr_fullscreen tb_fullscreen" onload="init(); return false;">
|
||||
<br>
|
||||
<div class="rows">
|
||||
<form class="columns" action="return false;">
|
||||
<input class="thic_flex" type="text" id="searchbox" placeholder="search regexp"/>
|
||||
<input class="info lil_btn" type="submit" value="search" onclick="searchFiles(); return false;"/>
|
||||
</form>
|
||||
<div class="columns thic_flex tb_buffer">
|
||||
<div id="tree" class="filetree"></div>
|
||||
<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
|
||||
<article id="searchResults" class="mia">
|
||||
</article>
|
||||
<article id="article" class="mia">
|
||||
<div>
|
||||
<h1 class="columns">
|
||||
<span class="r_buffer">
|
||||
<input class="button-info lil_btn" type="submit" value="SAVE" onclick="pushFile(); return false;"/>
|
||||
</span>
|
||||
<span id="titlePath">
|
||||
</span>
|
||||
<span id="title" class="thic_flex" contenteditable></span>
|
||||
<span class="l_buffer">
|
||||
<input class="button-error lil_btn" type="submit" value="DELETE" onclick="deleteFile(); return false;"/>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
|
||||
</div>
|
||||
<!-- todo: each line no is an anchor -->
|
||||
<div class="monospace">
|
||||
<textarea id="my-text-area"></textarea>
|
||||
</font>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<script>
|
||||
const easyMDE = new EasyMDE({
|
||||
autoDownloadFontAwesome: true,
|
||||
autofocus: true,
|
||||
autosave: {
|
||||
enabled: false,
|
||||
},
|
||||
element: document.getElementById('my-text-area'),
|
||||
forceSync: true,
|
||||
indentWithTabs: false,
|
||||
initialValue: "# initial\nvalue",
|
||||
showIcons: ["code", "table"],
|
||||
spellChecker: false,
|
||||
sideBySideFullscreen: false,
|
||||
tabSize: 3,
|
||||
previewImagesInEditor: true,
|
||||
insertTexts: {
|
||||
image: ["![](", ")"],
|
||||
link: ["[](", ")"],
|
||||
},
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
uploadImage: true,
|
||||
imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
|
||||
imagePathAbsolute: false,
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
})
|
||||
function logValue() {
|
||||
console.log(easyMDE.value())
|
||||
}
|
||||
logValue()
|
||||
</script>
|
||||
</footer>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
|
||||
<!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>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
|
||||
<body class="fullscreen" style="border: 10px solid red;">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<style>
|
||||
#easyMDEwrap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.CodeMirror-scroll, .CodeMirror-sizer {
|
||||
min-height: 10px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
#article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#titlepath, #title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.EasyMDEContainer button {
|
||||
color: black;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.editor-toolbar > button.preview {
|
||||
color: #08c;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var saveFeedbackInterval = null
|
||||
function pushFile() {
|
||||
const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
|
||||
const body = easyMDE.value() ? easyMDE.value() : ""
|
||||
const id = "id00/id11"
|
||||
headers = {}
|
||||
if (title)
|
||||
headers["Title"] = title
|
||||
http("PUT", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to push file ${id}: ${status}: ${body}`)
|
||||
throw `failed to push file ${id}: ${status}: ${body}`
|
||||
}
|
||||
document.getElementById("saveFeedback").innerHTML = "success!"
|
||||
if (saveFeedbackInterval) {
|
||||
clearTimeout(saveFeedbackInterval)
|
||||
}
|
||||
saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
|
||||
}, body, headers)
|
||||
}
|
||||
function deleteFile() {
|
||||
const id = "id00/id11"
|
||||
const pid = "id00"
|
||||
http("DELETE", "/api/v0/files/" + id, (body, status) => {
|
||||
if (status != 200) {
|
||||
alert(`failed to delete file ${id}: ${status}: ${body}`)
|
||||
throw `failed to delete file ${id}: ${status}: ${body}`
|
||||
}
|
||||
window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<div class="fullscreen tb_fullscreen">
|
||||
<article id="article">
|
||||
<div class="columns">
|
||||
<span class="r_buffer">
|
||||
<form action="#" onsubmit="pushFile(); return false;">
|
||||
<input class="button-info lil_btn" type="submit" value="SAVE"/>
|
||||
</form>
|
||||
</span>
|
||||
<span id="titlePath">
|
||||
/
|
||||
|
||||
<a href="/ui/files/id00">title id00</a> /
|
||||
|
||||
</span>
|
||||
<span id="title" class="thic_flex" contenteditable>title id11</span>
|
||||
<span class="l_buffer">
|
||||
<form onsubmit="deleteFile(); return false;">
|
||||
<input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="easyMDEwrap" class="monospace">
|
||||
<textarea id="my-text-area"></textarea>
|
||||
</div>
|
||||
<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
const easyMDE = new EasyMDE({
|
||||
autoDownloadFontAwesome: true,
|
||||
autofocus: true,
|
||||
autosave: {
|
||||
enabled: false,
|
||||
},
|
||||
element: document.getElementById('my-text-area'),
|
||||
forceSync: true,
|
||||
indentWithTabs: false,
|
||||
initialValue: "loading...",
|
||||
showIcons: ["code", "table"],
|
||||
spellChecker: false,
|
||||
sideBySideFullscreen: false,
|
||||
tabSize: 3,
|
||||
previewImagesInEditor: true,
|
||||
insertTexts: {
|
||||
image: ["![](", ")"],
|
||||
link: ["[](", ")"],
|
||||
},
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
uploadImage: true,
|
||||
imageUploadEndpoint: "/api/v0/media",
|
||||
imagePathAbsolute: false,
|
||||
renderingConfig: {
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
status: ["lines", "words", "cursor"],
|
||||
})
|
||||
easyMDE.value("# hello\n\n## world\n\n| this | is | my | table |\n| ---- | ---| ---| ----- |\n| hey |\n| ya | hey | ya |\n\n* and\n\t* a bulleted\n\t\t* list\n\n\u003e but here is a quote\n\n```go\n// and some go code\nfunc main() {\n\tlog.Println(\"hi\")\n}\n```\n\nand\n\nnow\n\nthe\n\nnewlines\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
|
||||
<body class="fullscreen" style="border: 10px solid red;">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
|
||||
<body class="fullscreen" style="border: 10px solid red;">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
|
||||
<body class="fullscreen" style="border: 10px solid red;">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
<body class="fullscreen" style="border: 10px solid red;">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue