DEV: Drop jQuery (#61)

DEV: Drop jQuery (#61)

Included:

  • DEV: Drop .es6 filename suffixes
diff --git a/assets/javascripts/initializers/spoiler-alert.js b/assets/javascripts/initializers/spoiler-alert.js
new file mode 100644
index 0000000..d5f9e93
--- /dev/null
+++ b/assets/javascripts/initializers/spoiler-alert.js
@@ -0,0 +1,95 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { Tag } from "discourse/lib/to-markdown";
+import ComposerController from "discourse/controllers/composer";
+import applySpoiler from "discourse/plugins/discourse-spoiler-alert/lib/apply-spoiler";
+
+function spoil(element) {
+  element.querySelectorAll(".spoiler").forEach((spoiler) => {
+    spoiler.classList.remove("spoiler");
+    spoiler.classList.add("spoiled");
+    applySpoiler(spoiler);
+  });
+}
+
+function initializeSpoiler(api) {
+  api.decorateCookedElement(spoil, { id: "spoiler-alert" });
+
+  api.addToolbarPopupMenuOptionsCallback(() => {
+    return {
+      action: "insertSpoiler",
+      icon: "magic",
+      label: "spoiler.title",
+    };
+  });
+
+  ComposerController.reopen({
+    actions: {
+      insertSpoiler() {
+        this.get("toolbarEvent").applySurround(
+          "[spoiler]",
+          "[/spoiler]",
+          "spoiler_text",
+          { multiline: false, useBlockMode: true }
+        );
+      },
+    },
+  });
+
+  if (Tag) {
+    Tag.prototype.decorate = function (text) {
+      const attr = this.element.attributes;
+      if (attr.class === "spoiled") {
+        this.prefix = "[spoiler]";
+        this.suffix = "[/spoiler]";
+      }
+
+      if (this.prefix || this.suffix) {
+        text = [this.prefix, text, this.suffix].join("");
+      }
+
+      if (this.inline) {
+        text = " " + text + " ";
+      }
+
+      return text;
+    };
+
+    Tag.block = function (name, prefix, suffix) {
+      return class extends Tag {
+        constructor() {
+          super(name, prefix, suffix);
+          this.gap = "\n\n";
+        }
+
+        decorate(text) {
+          const attr = this.element.attributes;
+          const parent = this.element.parent;
+
+          if (this.name === "p" && parent && parent.name === "li") {
+            // fix for google docs
+            this.gap = "";
+          }
+
+          if (this.name === "div" && attr.class === "spoiled") {
+            this.prefix = "[spoiler]";
+            this.suffix = "[/spoiler]";
+            text = text.trim();
+          }
+
+          return `${this.gap}${this.prefix}${text}${this.suffix}${this.gap}`;
+        }
+      };
+    };
+  }
+}
+
+export default {
+  name: "apply-spoilers",
+
+  initialize(container) {
+    const siteSettings = container.lookup("site-settings:main");
+    if (siteSettings.spoiler_enabled) {
+      withPluginApi("0.5", initializeSpoiler);
+    }
+  },
+};
diff --git a/assets/javascripts/initializers/spoiler-alert.js.es6 b/assets/javascripts/initializers/spoiler-alert.js.es6
deleted file mode 100644
index c87f85d..0000000
--- a/assets/javascripts/initializers/spoiler-alert.js.es6
+++ /dev/null
@@ -1,89 +0,0 @@
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { Tag } from "discourse/lib/to-markdown";
-import ComposerController from "discourse/controllers/composer";
-
-function spoil($elem) {
-  $(".spoiler", $elem).removeClass("spoiler").addClass("spoiled").spoil();
-}
-
-function initializeSpoiler(api) {
-  api.decorateCooked(spoil, { id: "spoiler-alert" });
-
-  api.addToolbarPopupMenuOptionsCallback(() => {
-    return {
-      action: "insertSpoiler",
-      icon: "magic",
-      label: "spoiler.title",
-    };
-  });
-
-  ComposerController.reopen({
-    actions: {
-      insertSpoiler() {
-        this.get("toolbarEvent").applySurround(
-          "[spoiler]",
-          "[/spoiler]",
-          "spoiler_text",
-          { multiline: false, useBlockMode: true }
-        );
-      },
-    },
-  });
-
-  if (Tag) {
-    Tag.prototype.decorate = function (text) {
-      const attr = this.element.attributes;
-      if (attr.class === "spoiled") {
-        this.prefix = "[spoiler]";
-        this.suffix = "[/spoiler]";
-      }
-
-      if (this.prefix || this.suffix) {
-        text = [this.prefix, text, this.suffix].join("");
-      }
-
-      if (this.inline) {
-        text = " " + text + " ";
-      }
-
-      return text;
-    };
-
-    Tag.block = function (name, prefix, suffix) {
-      return class extends Tag {
-        constructor() {
-          super(name, prefix, suffix);
-          this.gap = "\n\n";
-        }
-
-        decorate(text) {
-          const attr = this.element.attributes;
-          const parent = this.element.parent;
-
-          if (this.name === "p" && parent && parent.name === "li") {
-            // fix for google docs
-            this.gap = "";
-          }
-
-          if (this.name === "div" && attr.class === "spoiled") {
-            this.prefix = "[spoiler]";
-            this.suffix = "[/spoiler]";
-            text = text.trim();
-          }
-
-          return `${this.gap}${this.prefix}${text}${this.suffix}${this.gap}`;
-        }
-      };
-    };
-  }
-}
-
-export default {
-  name: "apply-spoilers",
-  initialize(container) {
-    const siteSettings = container.lookup("site-settings:main");
-    if (siteSettings.spoiler_enabled) {
-      withPluginApi("0.5", initializeSpoiler);
-    }
-  },
-};
diff --git a/assets/javascripts/lib/apply-spoiler.js b/assets/javascripts/lib/apply-spoiler.js
new file mode 100644
index 0000000..6998426
--- /dev/null
+++ b/assets/javascripts/lib/apply-spoiler.js
@@ -0,0 +1,34 @@
+function blurLazyYT(spoilerElement) {
+  spoilerElement.querySelectorAll("div.lazyYT").forEach((element) => {
+    let id = element.getAttribute("data-youtube-id");
+    let p = document.createElement("p");
+    p.textContent = `https://youtube.com/watch?v=${id}`;
+
+    element.replaceWith(p);
+  });
+}
+
+function blur(spoilerElement) {
+  spoilerElement.classList.add("spoiler-blurred");
+  spoilerElement
+    .querySelectorAll("a")
+    .forEach((element) => element.classList.add("no-track-link"));
+}
+
+export default function applySpoiler(element) {
+  element.setAttribute("data-spoiler-state", "blurred");
+
+  blurLazyYT(element);
+  blur(element);
+
+  element.addEventListener("click", (event) => {
+    if (element.getAttribute("data-spoiler-state") === "blurred") {
+      element.setAttribute("data-spoiler-state", "revealed");
+      element.classList.remove("spoiler-blurred");
+      event.preventDefault();
+    } else {
+      element.setAttribute("data-spoiler-state", "blurred");
+      element.classList.add("spoiler-blurred");
+    }
+  });
+}
diff --git a/assets/javascripts/lib/discourse-markdown/spoiler-alert.js b/assets/javascripts/lib/discourse-markdown/spoiler-alert.js
new file mode 100644
index 0000000..264a64d
--- /dev/null
+++ b/assets/javascripts/lib/discourse-markdown/spoiler-alert.js
@@ -0,0 +1,52 @@
+import { registerOption } from "pretty-text/pretty-text";
+
+registerOption((siteSettings, opts) => {
+  opts.features["spoiler-alert"] = !!siteSettings.spoiler_enabled;
+});
+
+const CONTAINS_BLOCK_REGEX = /\n|<img|!\[[^\]]*\][(\[]/;
+
+function insertSpoiler(_, spoiler) {
+  const element = CONTAINS_BLOCK_REGEX.test(spoiler) ? "div" : "span";
+  return `<${element} class='spoiler'>${spoiler}</${element}>`;
+}
+
+function replaceSpoilers(text) {
+  text = text || "";
+  while (
+    text !==
+    (text = text.replace(
+      /\[spoiler\]((?:(?!\[spoiler\]|\[\/spoiler\])[\S\s])*)\[\/spoiler\]/gi,
+      insertSpoiler
+    ))
+  ) {}
+  return text;
+}
+
+function setupMarkdownIt(helper) {
+  helper.registerOptions((opts, siteSettings) => {
+    opts.features["spoiler-alert"] = !!siteSettings.spoiler_enabled;
+  });
+
+  helper.registerPlugin((md) => {
+    md.inline.bbcode.ruler.push("spoiler", {
+      tag: "spoiler",
+      wrap: "span.spoiler",
+    });
+
+    md.block.bbcode.ruler.push("spoiler", {
+      tag: "spoiler",
+      wrap: "div.spoiler",
+    });
+  });
+}
+
+export function setup(helper) {

[... diff too long, it was truncated ...]

GitHub sha: 81dacd17

1 Like

This commit appears in #61 which was approved by eviltrout. It was merged by CvX.