diff options
Diffstat (limited to 'templates/wiki')
| -rw-r--r-- | templates/wiki/page_edit.html | 55 |
1 files changed, 43 insertions, 12 deletions
diff --git a/templates/wiki/page_edit.html b/templates/wiki/page_edit.html index 97a5161c..e83676fd 100644 --- a/templates/wiki/page_edit.html +++ b/templates/wiki/page_edit.html @@ -2,19 +2,32 @@ {% block title %}Wiki | Home{% endblock %} {% block og_title %}Wiki | Home{% endblock %} {% block og_description %}Landing page for the wiki{% endblock %} +{% block extra_head %} +<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script> +{% endblock %} {% block content %} <div class="uk-container uk-section"> - <form action="{{ url_for("wiki.edit", page=page) }}" method="post"> - <label for="title">Title: </label> - <input name="title" id="title" value="{{ title }}" class="uk-input" /> - <label for="rst">Document: </label> - <textarea name="rst" id="rst" class="uk-textarea">{{ rst }}</textarea> - <button value="Preview" id="preview">Preview</button> - <button type="submit" value="Save">Save</button> + <form uk-grid class="uk-grid-small" action="{{ url_for("wiki.edit", page=page) }}" method="post"> + <div class="uk-width-expand"> + <input name="title" id="title" placeholder="Page Title" value="{{ title }}" class="uk-input" /> + </div> + <div class="uk-width-auto"> + <button class="uk-button uk-button-secondary" type="button" value="Preview" id="preview">Preview</button> + </div> + <div class="uk-width-auto"> + <button class="uk-button uk-button-primary" type="submit" value="Save">Save</button> + </div> + <div class="uk-width-1-1"> +{# <label for="rst">Document: </label>#} + <div id="rst" class="uk-textarea" style="resize: vertical; min-height: 10rem;">{{ rst }}</div> + </div> + <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> </form> - <div id="preview-div" style="border: 1px solid grey;"> + <h2 class="uk-h2">Preview</h2> + + <div id="preview-div"> <p>Preview will appear here.</p> </div> </div> @@ -26,15 +39,21 @@ document.getElementById("preview").onclick = function(event) { let oReq = new XMLHttpRequest(); - let data = document.getElementById("rst").value; oReq.addEventListener("load", function() { let response = JSON.parse(this.responseText); if (response.error !== undefined) { - console.log("Error: " + response.error) + if (response.error_lines !== undefined) { + editor.session.setAnnotations(response.error_lines); + document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>"; + } else { + console.log("Error: " + response.error); + document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>"; + } } else { document.getElementById("preview-div").innerHTML = response.data; + editor.session.setAnnotations([]); } }); @@ -43,9 +62,21 @@ oReq.setRequestHeader("Content-type", "application/json"); oReq.setRequestHeader("X-CSRFToken", csrf_token); - oReq.send(JSON.stringify({"data": data})); + oReq.send(JSON.stringify({"data": editor.getValue()})); return false; - } + }; + + let editor = ace.edit("rst"); + let timer; + + editor.session.setMode("ace/mode/rst"); + editor.setTheme("ace/theme/iplastic"); + editor.on("input", function() { + if (timer !== undefined) { + clearTimeout(timer); + } + timer = setTimeout(function() {document.getElementById("preview").click()}, 1000); + }) </script> {% endblock %}
\ No newline at end of file |