Skip to content
This repository was archived by the owner on Oct 24, 2023. It is now read-only.

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

Merged
eviltrout merged 1 commit into from
Jan 3, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions assets/javascripts/initializers/spoiler-alert.js.es6
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor Author

@eviltrout eviltrout Jan 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noAPI is no longer used so I thought I'd remove it.

});
withPluginApi("0.5", initializeSpoiler);
}
}
};
55 changes: 18 additions & 37 deletions assets/javascripts/spoiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand Down Expand Up @@ -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');
Copy link
Member

@SamSaffron SamSaffron Jan 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe some color here so you can tell there is an image or a border or something?

Copy link
Contributor Author

@eviltrout eviltrout Jan 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super hard to do without replacing the image element itself with something else, which is what caused the problem in the first place.

Copy link
Member

@SamSaffron SamSaffron Jan 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a bit annoying but we could insert a div after each image and position it absolutely above the white space using the dimensions of the image (removing on click)

} 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) {
Expand Down