Added Markdown editor and Javascript code refactoring

1 files changed, 50 insertions, 39 deletions

diff --git a/assets/js/src/Markdown.js b/assets/js/src/Markdown.js
index 50293729..11673eec 100644
--- a/assets/js/src/Markdown.js
+++ b/assets/js/src/Markdown.js
@@ -1,48 +1,59 @@
-function Markdown() {
-}
-
-Markdown.prototype.showPreview = function(e) {
-    e.preventDefault();
-
-    var write = $(".write-area");
-    var preview = $(".preview-area");
-    var textarea = $("textarea");
-
-    $("#markdown-write").parent().removeClass("form-tab-selected");
-    $("#markdown-preview").parent().addClass("form-tab-selected");
-
-    var request = $.ajax({
-        url: $("body").data("markdown-preview-url"),
-        contentType: "application/json",
-        type: "POST",
-        processData: false,
-        dataType: "html",
-        data: JSON.stringify({
-            "text": textarea.val()
-        })
-    });
+Kanboard.Markdown = function(app) {
+    this.app = app;
+    this.editor = null;
+};
 
-    request.done(function(data) {
-        preview.find(".markdown").html(data)
-        preview.css("height", textarea.css("height"));
-        preview.css("width", textarea.css("width"));
+Kanboard.Markdown.prototype.onPopoverOpened = function() {
+    this.listen();
+};
 
-        write.hide();
-        preview.show();
-    });
+Kanboard.Markdown.prototype.onPopoverClosed = function() {
+    this.listen();
 };
 
-Markdown.prototype.showWriter = function(e) {
-    e.preventDefault();
+Kanboard.Markdown.prototype.listen = function() {
+    var editors = $(".markdown-editor");
 
-    $("#markdown-write").parent().addClass("form-tab-selected");
-    $("#markdown-preview").parent().removeClass("form-tab-selected");
+    if (this.editor) {
+        this.destroy();
+    }
 
-    $(".write-area").show();
-    $(".preview-area").hide();
+    if (editors.length > 0) {
+        this.show(editors[0]);
+    }
 };
 
-Markdown.prototype.listen = function() {
-    $(document).on("click", "#markdown-preview", this.showPreview.bind(this));
-    $(document).on("click", "#markdown-write", this.showWriter.bind(this));
+Kanboard.Markdown.prototype.destroy = function() {
+    var cm = this.editor.codemirror;
+    var wrapper = cm.getWrapperElement();
+
+    for (var item in ["toolbar", "statusbar", "sideBySide"]) {
+        if (this.editor.gui[item]) {
+            wrapper.parentNode.removeChild(this.editor.gui[item]);
+        }
+    }
+
+    cm.toTextArea();
+    this.editor = null;
+};
+
+Kanboard.Markdown.prototype.show = function(textarea) {
+    var toolbar = ["bold", "italic", "strikethrough", "heading", "|", "unordered-list", "ordered-list", "link", "|", "code", "table"];
+
+    this.editor = new SimpleMDE({
+        element: textarea,
+        status: false,
+        toolbarTips: false,
+        autoDownloadFontAwesome: false,
+        spellChecker: false,
+        autosave: {
+            enabled: false
+        },
+        forceSync: true,
+        blockStyles: {
+            italic: "_"
+        },
+        toolbar: textarea.hasAttribute("data-markdown-editor-disable-toolbar") ? false : toolbar,
+        placeholder: textarea.getAttribute("placeholder")
+    });
 };