121 lines
3.4 KiB
HTML
121 lines
3.4 KiB
HTML
<header>
|
|
<h1>{{title}}</h1>
|
|
</header>
|
|
|
|
<article>
|
|
<div class="rendered">
|
|
{{{rendered}}}
|
|
</div>
|
|
<div class="editor">
|
|
<form action="" method="POST">
|
|
<input type=hidden name=base_revision value="{{revision}}">
|
|
<textarea autocomplete=off name=body>{{raw}}</textarea>
|
|
<textarea autocomplete=off class="shadow-control"></textarea>
|
|
<div class="editor-controls">
|
|
<a href="{{article_id}}">Cancel</a>
|
|
<button type=submit>Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
|
|
<footer>
|
|
<p><a id="openEditor" href="?editor">Edit</a></p>
|
|
<dl>
|
|
<dt>Article ID</dt>
|
|
<dd>{{article_id}}</dd>
|
|
|
|
<dt>Revision</dt>
|
|
<dd class="revision">{{revision}}</dd>
|
|
|
|
<dt>Last updated</dt>
|
|
<dd class="last-updated">{{created}}</dd>
|
|
</dl>
|
|
</footer>
|
|
|
|
<script>
|
|
function autosizeTextarea(textarea, shadow) {
|
|
shadow.style.width = textarea.clientWidth + "px";
|
|
shadow.value = textarea.value;
|
|
textarea.style.height = shadow.scrollHeight + "px";
|
|
}
|
|
|
|
function queryArgsFromForm(form) {
|
|
const items = [];
|
|
for (const {name, value} of form.elements) {
|
|
if (!name) continue;
|
|
items.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
|
|
}
|
|
return items.join('&');
|
|
}
|
|
|
|
let hasBeenOpen = false;
|
|
function openEditor() {
|
|
const article = document.querySelector("article");
|
|
const rendered = document.querySelector(".rendered");
|
|
const editor = document.querySelector(".editor");
|
|
const textarea = editor.querySelector('textarea[name="body"]');
|
|
const shadow = editor.querySelector('textarea.shadow-control');
|
|
const form = editor.querySelector("form");
|
|
|
|
textarea.style.height = rendered.clientHeight + "px";
|
|
|
|
article.classList.add('edit');
|
|
|
|
autosizeTextarea(textarea, shadow);
|
|
|
|
textarea.focus();
|
|
|
|
if (hasBeenOpen) return;
|
|
hasBeenOpen = true;
|
|
|
|
textarea.addEventListener('input', () => autosizeTextarea(textarea, shadow));
|
|
window.addEventListener('resize', () => autosizeTextarea(textarea, shadow));
|
|
|
|
form.addEventListener("submit", function (ev) {
|
|
(async function () {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
const body = queryArgsFromForm(form);
|
|
textarea.disabled = true;
|
|
|
|
const response = await fetch(
|
|
form.getAttribute("action"),
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded"
|
|
},
|
|
body: body,
|
|
}
|
|
);
|
|
|
|
if (!response.ok) throw new Error("Unexpected status code (" + response.status + ")");
|
|
|
|
const result = await response.json();
|
|
form.elements.base_revision.value = result.revision;
|
|
document.querySelector("footer .revision").textContent = result.revision;
|
|
document.querySelector("footer .last-updated").textContent = result.created;
|
|
rendered.innerHTML = result.rendered;
|
|
article.classList.remove('edit');
|
|
|
|
textarea.disabled = false;
|
|
}()
|
|
.catch(err => {
|
|
textarea.disabled = false;
|
|
console.error(err);
|
|
alert(err);
|
|
}));
|
|
});
|
|
}
|
|
|
|
document
|
|
.getElementById("openEditor")
|
|
.addEventListener("click", function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
openEditor();
|
|
})
|
|
</script>
|