FIX: Lazily Loading images did not work with spoilers (#33)

FIX: Lazily Loading images did not work with spoilers (#33)

This is the result of using SVG for spoilered images, which is only
necessary for IE11.

While it’s a nice hack, it’s a bunch of extra logic that needn’t be
applied in most browsers, and was causing issues with our image lazy
loading code, so I’ve elected to remove it.

Now, in IE11 the images will be not shown until clicked rather than
blurred, which I think is a decent compromise for a 5+ year old web
browser.

diff --git a/assets/javascripts/initializers/spoiler-alert.js.es6 b/assets/javascripts/initializers/spoiler-alert.js.es6
index 05618c4..46e6b8d 100644
--- a/assets/javascripts/initializers/spoiler-alert.js.es6
+++ b/assets/javascripts/initializers/spoiler-alert.js.es6
@@ -86,9 +86,7 @@ export default {
   initialize(container) {
     const siteSettings = container.lookup("site-settings:main");
     if (siteSettings.spoiler_enabled) {
-      withPluginApi("0.5", initializeSpoiler, {
-        noApi: () => decorateCooked(container, spoil)
-      });
+      withPluginApi("0.5", initializeSpoiler);
     }
   }
 };
diff --git a/assets/javascripts/spoiler.js b/assets/javascripts/spoiler.js
index fc4e286..c8de2b7 100644
--- a/assets/javascripts/spoiler.js
+++ b/assets/javascripts/spoiler.js
@@ -2,7 +2,6 @@
 
   var isIE = /*@cc_on!@*/false || document.documentMode,
       isFirefox = typeof InstallTrigger !== 'undefined',
-      globalIdCounter = 0,
       DEFAULTS = {
         max: { text: 10, link: 10, image: 20 },
         partial: { text: 5, link: 5, image: 6},
@@ -35,55 +34,37 @@
             .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) {
     $("a", $spoiler).addClass("no-track-link");
 
     $("a,pre", $spoiler).each(function(index, linkOrPre) {
-      var value = radius > 0 ? "blur(" + radius + "px)" : "";
-      if (isIE) {
-        $(linkOrPre).css("-ms-filter", "progid:DXImageTransform.Microsoft.Blur(pixelradius="+radius+")");
-      } else {
-        $(linkOrPre).css("filter", value)
-                    .css("-webkit-filter", value);
-      }
+      blurSelector($(linkOrPre), radius);
     });
   };
 
-  function blurImage($spoiler, radius) {
-    // on the first pass, transform images into SVG
-    $("img", $spoiler).each(function(index, image) {
-      var isEmoji = $(this).hasClass('emoji');
-      var transform = function() {
-        var w = isEmoji ? 20 : image.width,
-            h = isEmoji ? 20 : image.height,
-            id = ++globalIdCounter;
-        var svg = "<svg data-spoiler-id='" + id + "' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='" + w + "' height='" + h + "'>" +
-                  "<defs><filter id='blur-" + id + "'><feGaussianBlur id='gaussian-" + id + "' stdDeviation='" + radius + "'></feGaussianBlur></filter></defs>" +
-                  "<image xlink:href='" + image.src + "' filter='url(#blur-" + id + ")' style='filter: url(#blur-" + id + ")' width='" + w + "' height='" + h + "'></image>" +
-                  "</svg>";
-        $(image).replaceWith(svg);
-      };
-      // do we need to wait for the image to load?
-      if (image.naturalWidth === 0 || image.naturalHeight === 0) {
-        image.onload = transform;
-      } else {
-        transform();
-      }
-    });
-
-    // change the blur radius
-    $("svg", $spoiler).each(function(index, svg) {
-      var id = svg.getAttribute("data-spoiler-id");
-      var element = svg.getElementById("gaussian-" + id);
-      if (element) { element.setAttribute("stdDeviation", 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) {
     blurLazyYT($spoiler);
     blurText($spoiler, option.text);
     blurLinkAndPre($spoiler, option.link);
-    blurImage($spoiler, option.image);
+    blurImageIE($spoiler, option.image);
   };
 
   var applySpoilers = function($spoiler, options) {

GitHub
sha: d69c6933