REFACTOR: remove IE support, use CSS filter, simplify (#39)

REFACTOR: remove IE support, use CSS filter, simplify (#39)

  • REFACTOR: remove IE support, use CSS filter, simplify

  • rename blurText because it blurs other things too

diff --git a/assets/javascripts/spoiler.js b/assets/javascripts/spoiler.js
index 43c7a05..357639b 100644
--- a/assets/javascripts/spoiler.js
+++ b/assets/javascripts/spoiler.js
@@ -1,12 +1,4 @@
 (function($) {
-  var isIE = /*@cc_on!@*/ false || document.documentMode,
-    isFirefox = typeof InstallTrigger !== "undefined",
-    DEFAULTS = {
-      max: { text: 10, link: 10, image: 20 },
-      partial: { text: 5, link: 5, image: 6 },
-      none: { text: 0, link: 0, image: 0 }
-    };
-
   // handle lazyYT onebox
   function blurLazyYT($spoiler) {
     $("div.lazyYT", $spoiler).each(function() {
@@ -16,103 +8,36 @@
     });
   }
 
-  function blurText($spoiler, radius) {
-    // spoiler text is gray so as to maintain plugin compatibility with both light and dark theme sites.
-    var textShadow = "gray 0 0 " + radius + "px",
-      userSelect = "-webkit-user-select";
-
-    if (isIE) {
-      textShadow =
-        radius <= 0 ? "0 0 0 0 gray" : "0 0 " + radius + "px .1px gray";
-      userSelect = "-ms-user-select";
-    }
-    if (isFirefox) {
-      userSelect = "-moz-user-select";
-    }
-
-    $spoiler
-      .css("background-color", "transparent")
-      .css("color", "rgba(0,0,0,0)")
-      .css("text-shadow", textShadow)
-      .css(userSelect, "none");
-  }
-
-  function blurSelector($sel, radius) {
-    var value = radius > 0 ? "blur(" + radius + "px)" : "";
-    if (isIE) {
-      $sel.css(
-        "-ms-filter",
-        "progid:DXImageTransform.Microsoft.Blur(pixelradius=" + radius + ")"
-      );
-    } else {
-      $sel.css("filter", value).css("-webkit-filter", value);
-    }
-  }
-
-  function blurLinkAndPre($spoiler, radius) {
+  function blur($spoiler) {
+    $spoiler.addClass("spoiler-blurred");
     $("a", $spoiler).addClass("no-track-link");
-
-    $("a,pre", $spoiler).each(function(index, linkOrPre) {
-      blurSelector($(linkOrPre), radius);
-    });
-  }
-
-  function blurImageIE($spoiler, radius) {
-    var $images = $("img", $spoiler);
-    if (isIE) {
-      $images.css("opacity", radius === 0 ? "1.0" : "0.0");
-    } else {
-      blurSelector($images, radius);
-    }
   }
 
-  var applyBlur = function($spoiler, option) {
+  var applyBlur = function($spoiler) {
     blurLazyYT($spoiler);
-    blurText($spoiler, option.text);
-    blurLinkAndPre($spoiler, option.link);
-    blurImageIE($spoiler, option.image);
+    blur($spoiler);
   };
 
-  var applySpoilers = function($spoiler, options) {
-    var maxBlur = options.max,
-      partialBlur = options.partial,
-      noBlur = options.none;
-
+  var applySpoilers = function($spoiler) {
     $spoiler.data("spoiler-state", "blurred");
 
-    applyBlur($spoiler, maxBlur);
-
-    $spoiler
-      .on("mouseover", function() {
-        $spoiler.css("cursor", "pointer");
-        if ($spoiler.data("spoiler-state") === "blurred") {
-          applyBlur($spoiler, partialBlur);
-        }
-      })
-      .on("mouseout", function() {
-        if ($spoiler.data("spoiler-state") === "blurred") {
-          applyBlur($spoiler, maxBlur);
-        }
-      })
-      .on("click", function(e) {
-        if ($spoiler.data("spoiler-state") === "blurred") {
-          $spoiler.data("spoiler-state", "revealed").css("cursor", "auto");
-          applyBlur($spoiler, noBlur);
-          e.preventDefault();
-        } else {
-          if (e.target && e.target.tagName !== "A") {
-            $spoiler.data("spoiler-state", "blurred").css("cursor", "pointer");
-            applyBlur($spoiler, partialBlur);
-            e.preventDefault();
-          }
-        }
-      });
+    applyBlur($spoiler);
+
+    $spoiler.on("click", function(e) {
+      if ($spoiler.data("spoiler-state") === "blurred") {
+        $spoiler.data("spoiler-state", "revealed");
+        $spoiler.removeClass("spoiler-blurred");
+        e.preventDefault();
+      } else {
+        $spoiler.data("spoiler-state", "blurred");
+        $spoiler.addClass("spoiler-blurred");
+      }
+    });
   };
 
   $.fn.spoil = function(options) {
-    var opts = $.extend(DEFAULTS, options || {});
     return this.each(function() {
-      applySpoilers($(this), opts);
+      applySpoilers($(this));
     });
   };
 })(jQuery);
diff --git a/assets/stylesheets/discourse_spoiler_alert.css b/assets/stylesheets/discourse_spoiler_alert.css
deleted file mode 100644
index 21c55b5..0000000
--- a/assets/stylesheets/discourse_spoiler_alert.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.spoiled .lightbox .meta {
-  display: none;
-}
-
-.spoiled svg {
-  vertical-align: middle;
-}
-
-.spoiled img {
-  -webkit-transform: translateZ(0); // Safari jitter fix
-}
diff --git a/assets/stylesheets/discourse_spoiler_alert.scss b/assets/stylesheets/discourse_spoiler_alert.scss
new file mode 100644
index 0000000..4c3b7e8
--- /dev/null
+++ b/assets/stylesheets/discourse_spoiler_alert.scss
@@ -0,0 +1,28 @@
+.spoiled {
+  -webkit-transform: translateZ(0); // Safari jitter fix
+  cursor: auto;
+  .lightbox .meta {
+    display: none;
+  }
+  svg {
+    vertical-align: middle;
+  }
+}
+
+.spoiler-blurred {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  filter: blur(0.5em);
+  img {
+    filter: blur(1em);
+  }
+  .discourse-no-touch & {
+    &:hover {
+      filter: blur(0.18em);
+      img {
+        filter: blur(0.5em);
+      }
+    }
+  }
+}

GitHub sha: 56377370

This commit appears in #39 which was approved by ZogStriP and jjaffeux. It was merged by awesomerobot.