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.
当前为 2022-03-07 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Better Reddit Image Previews
// @namespace    https://lawrenzo.com/p/better-reddit-image-previews
// @version      0.3.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() {
    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 feedWatcher    = null,
        postWatcher    = null,
        galleryWatcher = null;
    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) postWatcher.observe(postbg, {childList:true});
                    post.setAttribute("ifix", 1);
                });
        });
    }
    function resetFeedWatcher(feedWrapper) {
        if(feedWatcher) feedWatcher.disconnect();
        feedWatcher = new MutationObserver(mutated => {
            mutated.forEach(mutant => processNodes(mutant.addedNodes))
        });
        feedWatcher.observe(feedWrapper, {childList:true});
    }
    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.filter(node => node.nodeName == "IMG")
                                 .forEach(node => fixImage(node, true));
            });
        });
    }
    var lastFeedWrapper = null;
    (new MutationObserver(() => {
        let listingLayout = document.querySelector(".ListingLayout-outerContainer"),
            firstPost     = listingLayout && listingLayout.querySelector("div[data-testid='post-container']"),
            feedWrapper   = firstPost && firstPost.parentNode.parentNode.parentNode;
        if(feedWrapper && feedWrapper !== lastFeedWrapper) {
            resetGalleryWatcher();
            resetPostWatcher();
            processNodes([feedWrapper]);
            resetFeedWatcher(feedWrapper);
            lastFeedWrapper = feedWrapper;
        }
    })).observe(document.body, {childList:true, subtree:true});
})();
欢迎访问Greasy Fork镜像
