FIX: Correctly handle interactive elements (#63)

FIX: Correctly handle interactive elements (#63)

  1. Prevent interacting with blurred elements (e.g. lightboxes)
  2. Prevent re-blurring when interacting with revealed elements

Closes #60

diff --git a/assets/javascripts/lib/apply-spoiler.js b/assets/javascripts/lib/apply-spoiler.js
index 6998426..1f51750 100644
--- a/assets/javascripts/lib/apply-spoiler.js
+++ b/assets/javascripts/lib/apply-spoiler.js
@@ -1,32 +1,38 @@
-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}`;
+const INTERACTIVE_SELECTOR = [
+  "a",
+  "area",
+  "audio",
+  "button",
+  "details",
+  "embed",
+  "iframe",
+  "img.animated",
+  "input",
+  "map",
+  "object",
+  "option",
+  "portal",
+  "select",
+  "textarea",
+  "track",
+  "video",
+  ".lightbox",
+].join(", ");
 
-    element.replaceWith(p);
-  });
-}
-
-function blur(spoilerElement) {
-  spoilerElement.classList.add("spoiler-blurred");
-  spoilerElement
-    .querySelectorAll("a")
-    .forEach((element) => element.classList.add("no-track-link"));
+function isInteractive(event) {
+  return event.defaultPrevented || event.target.closest(INTERACTIVE_SELECTOR);
 }
 
 export default function applySpoiler(element) {
   element.setAttribute("data-spoiler-state", "blurred");
-
-  blurLazyYT(element);
-  blur(element);
+  element.classList.add("spoiler-blurred");
 
   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 {
+    } else if (!isInteractive(event)) {
       element.setAttribute("data-spoiler-state", "blurred");
       element.classList.add("spoiler-blurred");
     }
diff --git a/assets/stylesheets/discourse_spoiler_alert.scss b/assets/stylesheets/discourse_spoiler_alert.scss
index 7f2b914..a83f8a7 100644
--- a/assets/stylesheets/discourse_spoiler_alert.scss
+++ b/assets/stylesheets/discourse_spoiler_alert.scss
@@ -16,6 +16,27 @@
   cursor: pointer;
   filter: blur(0.5em);
 
+  a,
+  area,
+  audio,
+  button,
+  details,
+  embed,
+  iframe,
+  img.animated,
+  input,
+  map,
+  object,
+  option,
+  portal,
+  select,
+  textarea,
+  track,
+  video,
+  .lightbox {
+    pointer-events: none;
+  }
+
   img {
     filter: blur(1em);
   }

GitHub sha: f2bf7e5c

This commit appears in #63 which was approved by pmusaraj and ZogStriP. It was merged by CvX.