wiki: Fix wrong variable name

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

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index b7bc4dc0242ff34351006603cdf6e14abfd791a1..08f0f36dd98c0918f975ac91174862c13a87783f 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -11,33 +11,37 @@
 {% 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 %}
                        </h4>
 
-                       <form action="/actions/edit" method="POST">
+                       <form action="" method="POST">
                                {% raw xsrf_form_html() %}
 
-                               <input type="hidden" name="path" value="{{ request.path }}">
-
                                <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>
 
                                <div class="form-group row">
-                                       <label class="col-sm-3 col-form-label">{{ _("What has changed?") }}</label>
-                                       <div class="col-sm-9">
+                                       <label class="col-sm-4 col-form-label">{{ _("What has changed?") }}</label>
+                                       <div class="col-sm-8">
                                                <input type="text" class="form-control" name="changes" required>
                                        </div>
                                </div>
 
                                {% if page and not page.is_watched_by(current_user) %}
                                        <div class="form-group form-check">
-                                               <input type="checkbox" class="form-check-input" name="watch" id="watch" checked>
-                                               <label class="form-check-label" for="watch">{{ _("Watch this page") }}</label>
+                                               <div class="custom-control custom-checkbox">
+                                                       <input type="checkbox" class="custom-control-input" name="watch" id="watch" checked>
+                                                       <label class="custom-control-label" for="watch">{{ _("Watch this page") }}</label>
+                                               </div>
+
+                                               <small class="form-text text-muted">
+                                                       {{ _("Get notified when this page is changed") }}
+                                               </small>
                                        </div>
                                {% end %}
 
@@ -47,4 +51,61 @@
                        </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 %}
+       {% import os.path %}
+
+       <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("{{ os.path.join(page.url, "_render") }}", { content : content },
+                                               function(data) {
+                                                       c.html(data);
+
+                                                       // Update finished
+                                                       preview.removeClass("updating");
+                                               }
+                                       );
+                               }, 750);
+                       });
+               });
+       </script>
 {% end block %}