wiki: Add preview for editing pages

[ipfire.org.git] / src / templates / wiki / edit.html

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index c5bec0ea9f4bff07cacc0dafb0731ea0cadc6c2d..8933b4008b37996fb18460ce76aad4c370c0711c 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -11,7 +11,7 @@
 {% end block %}
 
 {% block main %}
-       <div class="card">
+       <div class="card mb-4">
                <div class="card-body">
                        <h4 class="card-title">
                                {% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}
@@ -21,7 +21,7 @@
                                {% raw xsrf_form_html() %}
 
                                <div class="form-group">
-                                       <textarea class="form-control" rows="16" name="content" placeholder="{{ _("Text") }}"
+                                       <textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
                                                >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
                                </div>
 
@@ -51,4 +51,59 @@
                        </form>
                </div>
        </div>
+
+       <div id="preview" class="fade show">
+               <div class="d-flex align-items-center mb-4">
+                       <h4 class="mb-0">{{ _("Preview") }}</h4>
+                       <div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
+               </div>
+
+               <div class="card">
+                       <div class="card-body mb-0">
+                               <div id="preview-content" class="wiki-content mb-0">
+                                       {{ _("Loading...") }}
+                               </div>
+                       </div>
+               </div>
+       </div>
+{% end block %}
+
+{% block javascript %}
+       <script type="text/javascript">
+               var update = null;
+
+               $(document).ready(function() {
+                       var preview = $("#preview");
+                       preview.hide();
+
+                       $("#content").on("keyup", function(e) {
+                               if (update)
+                                       clearTimeout(update);
+
+                               var content = $(this).val();
+
+                               // If the field is all empty, we will hide it
+                               if (content)
+                                       preview.show();
+                               else
+                                       preview.hide();
+
+                               // Go into update mode
+                               preview.addClass("updating");
+
+                               update = setTimeout(function() {
+                                       var c = $("#preview-content");
+
+                                       $.post("{{ page.url }}/_render", { content : content },
+                                               function(data) {
+                                                       c.html(data);
+
+                                                       // Update finished
+                                                       preview.removeClass("updating");
+                                               }
+                                       );
+                               }, 750);
+                       });
+               });
+       </script>
 {% end block %}