"; + /** Article content as last received from the server. */ + var preview = { + title: undefined, + rendered: undefined, + citations: [], + errors: [] + } - if (document.body.contains(document.getElementById("editor-content"))) { - onContentChange(0); - } -}; + /** The nonce of the last-made update request. */ + let nonce = 0; -function buildArticleObject() { - var title = document.getElementById("editor-title").value; - var contents = document.getElementById("editor-content").value; - return { - aid: params.article.aid, - title: title, - status: params.article.status, - contents: contents - }; -} + /** + * Update request debounce wrapper that executes the callback if no further + * calls are made during the timeout period. If a new call is made, any + * previous calls are skipped. + */ + function ifNoFurtherChanges(callback, timeout) + { + // Stake a claim on the nonce, potentially overwriting a previous + // nonce value. + const nonce_local = 1 + Math.random(); + nonce = nonce_local; + // Wait to see if this call is overwritten in turn. + setTimeout(() => { + if (nonce == nonce_local) + { + callback(); + nonce = 0; + } + }, timeout); + } -function update(article) { - var req = new XMLHttpRequest(); - req.open("POST", params.updateURL, true); - req.setRequestHeader("Content-type", "application/json"); - req.responseType = "json"; - req.onreadystatechange = function () { - if (req.readyState == 4 && req.status == 200) { - // Update internal state with the returned article object - params.status = req.response.status; - params.errors = req.response.error.length; - document.getElementById("editor-title").value = req.response.title; - // Set editor editability based on article status - updateEditorStatus(); - // Update the preview with the parse information - updatePreview(req.response); - } - }; - var payload = { article: article }; - req.send(JSON.stringify(payload)); -} + /** Update the editor controls and preview to match the current state. */ + function refreshEditor() + { + // Enable or disable controls + const isEditable = article.state == ArticleState.DRAFT; + const blocked = preview.errors.filter(err => err.severity == 2).length > 0; + document.getElementById("editor-title").disabled = !isEditable; + document.getElementById("editor-content").disabled = !isEditable; + document.getElementById("button-submit").innerText = isEditable ? "Submit article" : "Edit article"; + document.getElementById("button-submit").disabled = blocked; -function updateEditorStatus() { - var ready = !!params.status.ready || !!params.status.approved; - document.getElementById("editor-title").disabled = ready; - document.getElementById("editor-content").disabled = ready; - var hasErrors = params.errors > 0; - var submitButton = document.getElementById("button-submit"); - submitButton.innerText = ready ? "Edit article" : "Submit article"; - submitButton.disabled = hasErrors; -} + // Update the preview + const previewHtml = "
Loading...
"; + document.getElementById("preview-citations").innerHTML = "Loading...
"; + document.getElementById("preview-control").innerHTML = "Loading...
"; + + // Hook up the controls + document.getElementById("button-submit").onclick = submitArticle; + document.getElementById("editor-title").oninput = onContentChange; + document.getElementById("editor-content").oninput = onContentChange; + window.addEventListener("beforeunload", e => + { + if (nonce > 0) + { + e.returnValue = "Are you sure?"; + } + }); + window.addEventListener("keydown", e => + { + if (e.ctrlKey && e.key == 's') + { + e.preventDefault(); + onContentChange(e, 0); + } + }); + + // Get the article status information. + const updateUrl = document.body.dataset.amanuensisUpdateUrl; + fetch(updateUrl).then(response => response.json()).then(updateState); + } + window.onload = initializeEditor; +})(); diff --git a/amanuensis/server/lexicon.jinja b/amanuensis/server/lexicon.jinja index 1c332bc..333f8f4 100644 --- a/amanuensis/server/lexicon.jinja +++ b/amanuensis/server/lexicon.jinja @@ -15,6 +15,9 @@ {% if current_page == "contents" %}class="current-page" {% else %}href="{{ url_for('lexicon.contents', lexicon_name=g.lexicon.name) }}" {% endif %}>Contents{% endblock %} +{% block sb_editor %}Editor{% endblock %} {% block sb_posts %}") +@lexicon_param +@player_required +def open(lexicon_name, article_id): + db: DbContext = g.db + article: Article = db( + select(Article).where(Article.public_id == article_id) + ).scalar_one() + return render_template( + "session.editor.jinja", + lexicon_name=lexicon_name, + article=article, + ) + + +@bp.get("/This editor requires Javascript to function.
--
- - - + +
This editor requires Javascript to function.
++
+ +
{{ article.title }} - {{ article.public_id }}
+{{ article.body }}
{% endfor %}