wiki: Move preview code into Editor class

[ipfire.org.git] / src / static / js / editor.js

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