Fixes issues with reddit image previews. Specifically, clicking image preview now links directly to image (instead of thread) and fits height of image previews in carousel so they don't get clipped out.
As of
// ==UserScript==
// @name Better Reddit Image Previews
// @namespace https://lawrenzo.com/p/better-reddit-image-previews
// @version 0.2.1
// @description Fixes issues with reddit image previews. Specifically, clicking image preview now links directly to image (instead of thread) and fits height of image previews in carousel so they don't get clipped out.
// @author Lawrence Sim
// @license WTFPL (http://www.wtfpl.net)
// @grant none
// @match *://*.reddit.com/*
// ==/UserScript==
'use strict';
(function() {
function fixImage(img, fixHeight) {
if(!img || img.getAttribute("ifix")) return;
if(fixHeight) {
img.style.height = "100%";
img.parentElement.style.height = "100%";
}
img.addEventListener("click", evt => {
window.open(img.getAttribute("src").replace("preview.redd.it", "i.redd.it"));
evt.stopPropagation();
evt.preventDefault();
});
img.setAttribute("ifix", 1);
}
var watchGallery = new MutationObserver(mutated => {
mutated[0].target.querySelectorAll("li figure img").forEach(img => fixImage(img, true));
});
function checkPost(mutated) {
mutated[0].addedNodes.forEach(node => {
if(!node.querySelectorAll) return;
node.querySelectorAll("img[alt='Post image']")
.forEach(img => fixImage(img));
let gallery = node.querySelector("ul");
if(gallery) watchGallery.observe(gallery, {childList: true, subtree:true});
node.querySelectorAll("ul li figure img")
.forEach(img => fixImage(img, true));
});
}
var watchPost = new MutationObserver(checkPost);
function processNodes(nodes) {
nodes.forEach(node => {
node.querySelectorAll("div[data-testid='post-container']").forEach(post => {
if(post.getAttribute("ifix")) return;
let postbg = post.querySelector("[data-click-id='background']");
if(postbg) watchPost.observe(postbg, {childList:true});
post.setAttribute("ifix", 1);
});
});
}
var listingLayout = document.querySelector(".ListingLayout-outerContainer");
if(listingLayout) {
processNodes([listingLayout]);
(new MutationObserver(mutated => mutated.forEach(mutant => processNodes(mutant.addedNodes))))
.observe(listingLayout, {childList:true, subtree:true});
}
})();