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.
Устаревшая версия за
// ==UserScript==
// @name Better Reddit Image Previews
// @namespace https://lawrenzo.com/p/better-reddit-image-previews
// @version 0.4.0
// @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() {
//-------------------------------------------------------------------------------------
// post and gallery watchers
//-------------------------------------------------------------------------------------
var postWatcher = null,
galleryWatcher = null;
function resetPostWatcher() {
if(postWatcher) postWatcher.disconnect();
postWatcher = new MutationObserver(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) {
galleryWatcher.observe(gallery, {childList: true, subtree:true});
gallery.querySelectorAll("li figure img")
.forEach(img => fixImage(img, true));
}
});
});
}
function resetGalleryWatcher() {
if(galleryWatcher) galleryWatcher.disconnect();
galleryWatcher = new MutationObserver(mutated => {
mutated.forEach(mutant => {
mutant.addedNodes.forEach(node => node.nodeName == "IMG" && fixImage(node, true));
});
});
}
//-------------------------------------------------------------------------------------
// processing and image fixing
//-------------------------------------------------------------------------------------
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);
}
function processNodes(nodes) {
nodes.forEach(node => {
if(!node || !node.querySelectorAll) return;
node.querySelectorAll("div[data-testid='post-container']")
.forEach(post => {
if(post.getAttribute("ifix")) return;
let postbg = post.querySelector("[data-click-id='background']");
if(postbg) postWatcher.observe(postbg, {childList:true});
post.setAttribute("ifix", 1);
});
});
}
//-------------------------------------------------------------------------------------
// feed related, only used if not using reddit watcher
//-------------------------------------------------------------------------------------
function getFeedWrapper() {
let listingLayout = document.querySelector(".ListingLayout-outerContainer"),
firstPost = listingLayout && listingLayout.querySelector("div[data-testid='post-container']"),
feedWrapper = firstPost && firstPost.parentNode;
while(feedWrapper && !feedWrapper.nextSibling) {
if(feedWrapper == listingLayout) return null;
feedWrapper = feedWrapper.parentNode || null;
}
return feedWrapper && feedWrapper.parentNode;
}
var feedWatcher = null;
function resetFeedWatcher(feedWrapper) {
if(feedWatcher) feedWatcher.disconnect();
feedWatcher = new MutationObserver(mutated => {
mutated.forEach(mutant => processNodes(mutant.addedNodes))
});
feedWatcher.observe(feedWrapper, {childList:true});
}
//-------------------------------------------------------------------------------------
//
//-------------------------------------------------------------------------------------
function reset(feed) {
resetGalleryWatcher();
resetPostWatcher();
if(feed) processNodes([feed]);
}
if(!window.redditWatcher) {
let lastFirstPost = null;
(new MutationObserver(() => {
let feedWrapper = getFeedWrapper(),
firstPost = feedWrapper && feedWrapper.children[0];
if(firstPost !== lastFirstPost) {
reset(feedWrapper);
resetFeedWatcher(feedWrapper);
lastFirstPost = firstPost;
}
})).observe(document.body, {childList:true, subtree:true});
} else {
reset(document.querySelector(".ListingLayout-outerContainer"));
window.redditWatcher.feed.onChange(feed => reset(feed));
window.redditWatcher.feed.onUpdate((feed, mutated) => {
if(mutated) mutated.forEach(mutant => processNodes(mutant.addedNodes));
});
}
})();