82 lines
2 KiB
HTML
82 lines
2 KiB
HTML
<header>
|
|
<h1>{{title}}</h1>
|
|
</header>
|
|
|
|
<article>
|
|
<div class="rendered">
|
|
{{{rendered}}}
|
|
</div>
|
|
<div class="editor">
|
|
<form action="" method="POST">
|
|
<input type=hidden name=revision value="{{revision}}">
|
|
<textarea autocomplete=off name=body>{{raw}}</textarea>
|
|
<textarea autocomplete=off class="shadow-control"></textarea>
|
|
<div class="editor-controls">
|
|
<button type=submit>Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
|
|
<footer>
|
|
<p><a id="openEditor" href="?editor=true">Edit</a></p>
|
|
<dl>
|
|
<dt>Article ID</dt>
|
|
<dd>{{article_id}}</dd>
|
|
|
|
<dt>Revision</dt>
|
|
<dd>{{revision}}</dd>
|
|
|
|
<dt>Last updated</dt>
|
|
<dd>{{created}}</dd>
|
|
</dl>
|
|
</footer>
|
|
|
|
<script>
|
|
function autosizeTextarea(textarea, shadow) {
|
|
shadow.value = textarea.value;
|
|
shadow.style.width = textarea.clientWidth + "px";
|
|
shadow.style.height = "auto";
|
|
textarea.style.height = shadow.scrollHeight + "px";
|
|
}
|
|
|
|
function openEditor() {
|
|
const rendered = document.querySelector(".rendered");
|
|
const editor = document.querySelector(".editor");
|
|
const textarea = editor.querySelector('textarea[name="body"]');
|
|
const shadow = editor.querySelector('textarea.shadow-control');
|
|
|
|
editor.style.display = "block";
|
|
|
|
autosizeTextarea(textarea, shadow);
|
|
textarea.addEventListener('input', () => autosizeTextarea(textarea, shadow));
|
|
window.addEventListener('resize', () => autosizeTextarea(textarea, shadow));
|
|
|
|
rendered.style.display = "none";
|
|
|
|
const form = editor.querySelector("form");
|
|
form.addEventListener("submit", async function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
const response = await fetch(
|
|
form.getAttribute("action"),
|
|
{
|
|
method: 'PUT',
|
|
body: new FormData(form),
|
|
}
|
|
);
|
|
});
|
|
|
|
textarea.focus();
|
|
}
|
|
|
|
document
|
|
.getElementById("openEditor")
|
|
.addEventListener("click", function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
openEditor();
|
|
})
|
|
</script>
|