☰

Better Reddit Image Previews

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.

Versión del día 09/03/2022. Echa un vistazo a la versión más reciente.

// ==UserScript==
// @name         Better Reddit Image Previews
// @namespace    https://lawrenzo.com/p/better-reddit-image-previews
// @version      0.5.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        unsafeWindow
// @match        *://*.reddit.com/*
// ==/UserScript==
'use strict';
(function() {
    //-------------------------------------------------------------------------------------
    // processing and image fixing functions
    //-------------------------------------------------------------------------------------
    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);
                });
        });
    }
    //-------------------------------------------------------------------------------------
    // 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));
            });
        });
    }
    //-------------------------------------------------------------------------------------
    // reset process (fire off to init)
    //-------------------------------------------------------------------------------------
    function reset(feed) {
        resetGalleryWatcher();
        resetPostWatcher();
        if(feed) processNodes([feed]);
    }
    reset(document.querySelector(".ListingLayout-outerContainer"));
    //-------------------------------------------------------------------------------------
    // if using reddit watcher
    //-------------------------------------------------------------------------------------
    let redditWatcher = window.redditWatcher || (unsafeWindow && unsafeWindow.redditWatcher);
    if(redditWatcher) {
        redditWatcher.feed.onChange(feed => reset(feed));
        redditWatcher.feed.onUpdate((feed, mutated) => {
            if(mutated) mutated.forEach(mutant => processNodes(mutant.addedNodes));
        });
        return;
    }
    //-------------------------------------------------------------------------------------
    // if not using reddit watcher, have to create feed watchers
    //-------------------------------------------------------------------------------------
    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});
    }
    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});
})();