From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 27 Aug 2019 14:09:04 +0000 (+0100)
Subject: wiki: Move preview code into Editor class
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=7b1f068c59cc755995b0d5a75d1601cf0b04a599;p=ipfire.org.git

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 9ee30878..7e478eee 100644
--- 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 8977e0e4..c4ffa564 100644
--- 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 %}