Implement markdown emoji, youtube, clipboard

resources/pagedown_init.js

@@ -0,0 +1,158 @@
+var DjangoPagedown = DjangoPagedown | {};
+
+DjangoPagedown = (function() {
+  var converter = Markdown.getSanitizingConverter();
+  var editors = {};
+  var elements;
+
+  Markdown.Extra.init(converter, {
+    extensions: "all"
+  });
+
+  var createEditor = function(element) {
+    var input = element.getElementsByClassName("wmd-input")[0];
+    if (input === undefined) {
+      return
+    }
+    var id = input.id.substr(9);
+    if (!editors.hasOwnProperty(id)) {
+      var editor = new Markdown.Editor(converter, id, {});
+
+      // Handle image upload
+      if (element.classList.contains("image-upload-enabled")) {
+        var upload = element.getElementsByClassName("pagedown-image-upload")[0];
+        var url = upload.getElementsByClassName("url-input")[0];
+        var file = upload.getElementsByClassName("file-input")[0];
+        var cancel = upload.getElementsByClassName("deletelink")[0];
+        var submit = upload.getElementsByClassName("submit-input")[0];
+        var loading = upload.getElementsByClassName("submit-loading")[0];
+
+        var close = function(value, callback = undefined) {
+          upload.classList.remove("show");
+          url.value = "";
+          file.value = "";
+          document.removeEventListener('click', outsideClickListener);
+          if (callback) callback(value);
+        };
+
+        var outsideClickListener = function(event) {
+          if (!upload.contains(event.target) && upload.classList.contains("show")) {
+            cancel.click();
+          }
+        };
+
+        editor.hooks.set("insertImageDialog", function(callback) {
+          upload.classList.add("show");
+
+          setTimeout(function() {
+            document.addEventListener('click', outsideClickListener);
+          }, 0);
+
+          cancel.addEventListener(
+            "click",
+            function(event) {
+              close(null, callback);
+              event.preventDefault();
+            },
+            { once: true }
+          );
+
+          submit.addEventListener(
+            "click",
+            function() {
+              // Regular URL
+              if (url.value.length > 0) {
+                close(url.value, callback);
+              }
+              // File upload
+              else if (file.files.length > 0) {
+                loading.classList.add("show");
+                submit.classList.remove("show");
+
+                var data = new FormData();
+                var xhr = new XMLHttpRequest();
+                data.append("image", file.files[0]);
+                xhr.open("POST", file.dataset.action, true);
+                xhr.addEventListener(
+                  "load",
+                  function() {
+                    loading.classList.remove("show");
+                    submit.classList.add("show");
+
+                    if (xhr.status !== 200) {
+                      alert(xhr.statusText);
+                    } else {
+                      var response = JSON.parse(xhr.response);
+                      if (response.success) {
+                        close(response.url, callback);
+                      } else {
+                        if (response.error) {
+                          var error = "";
+                          for (var key in response.error) {
+                            if (response.error.hasOwnProperty(key)) {
+                              error += key + ":" + response.error[key];
+                            }
+                          }
+                          alert(error);
+                        }
+                        close(null, callback);
+                      }
+                    }
+                  },
+                  {
+                    once: true
+                  }
+                );
+                xhr.send(data);
+              } else {
+                // Nothing
+                close(null, callback);
+              }
+              event.preventDefault();
+            },
+            { once: true }
+          );
+          
+          return true;
+        });
+      }
+
+      editor.run();
+      editors[id] = editor;
+    }
+  };
+
+  var destroyEditor = function(element) {
+    var input = element.getElementsByClassName("wmd-input")[0];
+    if (input === undefined) {
+      return
+    }
+    var id = input.id.substr(9);
+    if (editors.hasOwnProperty(id)) {
+      delete editors[id];
+      return true;
+    }
+    return false;
+  };
+
+  var init = function() {
+    elements = document.getElementsByClassName("wmd-wrapper");
+    for (var i = 0; i < elements.length; ++i) {
+      createEditor(elements[i]);
+    }
+  };
+
+  return {
+    init: function() {
+      return init();
+    },
+    createEditor: function(element) {
+      return createEditor(element);
+    },
+    destroyEditor: function(element) {
+      return destroyEditor(element);
+    }
+  };
+})();
+
+window.onload = DjangoPagedown.init;