wiki: Move preview code into Editor class

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/static/js/editor.js b/src/static/js/editor.js
index 9ee3087836037e53a3fec5a439471411d86d50fc..7e478eeeba604ea8dbec45f3db7ea67723f8fd9d 100644 (file)
--- a/src/static/js/editor.js
+++ b/src/static/js/editor.js
@@ -1,6 +1,11 @@
 class Editor {
     constructor(parent) {
         this.parent = $(parent);
+        this.data = this.parent.data();
+
+        // Hide the preview here
+               this.preview = $("#preview");
+               this.preview.hide();
 
         // Get the textarea
         this.textarea = this.parent.find("textarea");
@@ -19,6 +24,9 @@ class Editor {
         // Bind all keys
         this.bindKeys();
 
+        // Change timer for preview
+        var update = null;
+
         console.log("Editor initialised for " + this.parent);
 
         // Set focus on the textarea
@@ -28,6 +36,37 @@ class Editor {
     activateTextArea() {
         var editor = this;
 
+        // Render preview when content has changed
+        this.textarea.on("keyup change", function(e) {
+            if (editor.update)
+                clearTimeout(editor.update);
+
+            var content = editor.textarea.val();
+
+                       // If the field is all empty, we will hide it
+                       if (content)
+                               editor.preview.show();
+                       else
+                               editor.preview.hide();
+
+                       // Go into update mode
+                       editor.preview.addClass("updating");
+
+            // Render content and show it
+                       editor.update = setTimeout(function() {
+                               var c = $("#preview-content");
+
+                               $.post(editor.data.render_url, { content : content },
+                                       function(data) {
+                                               c.html(data);
+
+                                               // Update finished
+                                               editor.preview.removeClass("updating");
+                                       }
+                               );
+                       }, 750);
+        });
+
         // Remember any selected text
         this.textarea.on("select keyup click", function(e) {
             // Ignore any keyboard shortcuts

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index 8977e0e43e3a5b435bcebfda170e4dab16470de3..c4ffa564b818dced6db67f7ddbf7577896f2ebab 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -11,16 +11,18 @@
 {% end block %}
 
 {% block main %}
+       {% import os.path %}
+
        <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="" method="POST">
+                       <form action="" method="POST" class="editor" data-render_url="{{ os.path.join(path, "_render") }}">
                                {% raw xsrf_form_html() %}
 
-                               <div class="form-group editor">
+                               <div class="form-group">
                                        <div class="btn-toolbar mb-3" role="toolbar">
                                                <div class="btn-group btn-group-sm mr-2" role="group">
                                                        <button type="button" class="btn btn-secondary"
@@ -111,44 +113,5 @@
 {% end block %}
 
 {% block javascript %}
-       {% import os.path %}
-
        <script src="{{ static_url("js/editor.js") }}"></script>
-       <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(path, "_render") }}", { content : content },
-                                               function(data) {
-                                                       c.html(data);
-
-                                                       // Update finished
-                                                       preview.removeClass("updating");
-                                               }
-                                       );
-                               }, 750);
-                       });
-               });
-       </script>
 {% end block %}