246 lines
6.5 KiB
HTML
246 lines
6.5 KiB
HTML
|
|
<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>
|