☰

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.

  1. // ==UserScript==
  2. // @name         Better Reddit Image Previews
  3. // @namespace    https://lawrenzo.com/p/better-reddit-image-previews
  4. // @version      0.6.4
  5. // @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.
  6. // @author       Lawrence Sim
  7. // @license      WTFPL (http://www.wtfpl.net)
  8. // @grant        unsafeWindow
  9. // @match        *://*.reddit.com/*
  10. // @noframes
  11. // ==/UserScript==
  12. 'use strict';
  13. (function() {
  14.     function fixImage(img, fixHeight, useSrc) {
  15.         if(!img || img.getAttribute("ifix")) return;
  16.         if(fixHeight) {
  17.             img.style.height = "100%";
  18.             img.parentElement.style.height = "100%";
  19.         }
  20.         useSrc = useSrc || img.src.replace("preview.redd.it", "i.redd.it");
  21.         img.addEventListener("click", evt => {
  22.             window.open(useSrc);
  23.             evt.stopPropagation();
  24.             evt.preventDefault();
  25.         });
  26.         img.addEventListener("auxclick", evt => {
  27.             if(evt.button === 1) {
  28.                 window.open(useSrc);
  29.                 evt.stopPropagation();
  30.                 evt.preventDefault();
  31.             }
  32.         });
  33.         img.setAttribute("ifix", 1);
  34.     }
  35.     function fixPost(container) {
  36.         container.querySelectorAll("img[alt='Post image']")
  37.             .forEach(img => {
  38.                 let post = img.closest("[data-testid='post-container']"),
  39.                     link = post && post.querySelector("a[data-testid='outbound-link']");
  40.                 fixImage(img, false, link && link.href);
  41.             });
  42.         let gallery = container.querySelector("ul");
  43.         if(gallery) {
  44.             galleryWatcher.observe(gallery, {childList: true, subtree:true});
  45.             gallery.querySelectorAll("li figure img")
  46.                 .forEach(img => fixImage(img, true));
  47.         }
  48.     }
  49.     //-------------------------------------------------------------------------------------
  50.     // post and gallery watchers
  51.     //-------------------------------------------------------------------------------------
  52.     var postWatcher = new MutationObserver(mutated => {
  53.         mutated.forEach(mutant => {
  54.             mutant.addedNodes.forEach(node => node.querySelectorAll && fixPost(node));
  55.         });
  56.     });
  57.     var galleryWatcher = new MutationObserver(mutated => {
  58.         mutated.forEach(mutant => {
  59.             mutant.addedNodes.forEach(node => node.nodeName == "IMG" && fixImage(node, true));
  60.         });
  61.     });
  62.     //-------------------------------------------------------------------------------------
  63.     // processing and reset
  64.     //-------------------------------------------------------------------------------------
  65.     var lastNow = Date.now();
  66.     function processNodes(nodes) {
  67.         if(!nodes) return;
  68.         nodes.forEach(node => {
  69.             if(!node || !node.querySelectorAll) return;
  70.             node.querySelectorAll("div[data-testid='post-container']")
  71.                 .forEach(post => {
  72.                     let ifixNow = post.getAttribute("ifix");
  73.                     if(ifixNow && parseInt(ifixNow) === lastNow) return;
  74.                     let postbg = post.querySelector("[data-click-id='background']");
  75.                     if(postbg) {
  76.                         fixPost(postbg);
  77.                         postWatcher.observe(postbg, {childList:true});
  78.                     }
  79.                     post.setAttribute("ifix", lastNow);
  80.                 });
  81.         });
  82.     }
  83.     function reset(feed) {
  84.         galleryWatcher.disconnect();
  85.         postWatcher.disconnect();
  86.         lastNow = Date.now();
  87.         if(feed) processNodes([feed]);
  88.     }
  89.     //-------------------------------------------------------------------------------------
  90.     // if using reddit watcher
  91.     //-------------------------------------------------------------------------------------
  92.     let redditWatcher = window.redditWatcher || (unsafeWindow && unsafeWindow.redditWatcher);
  93.     if(redditWatcher) {
  94.         processNodes([document.querySelector(".ListingLayout-outerContainer")]);
  95.         redditWatcher.feed.onChange(feed => reset(feed));
  96.         redditWatcher.feed.onUpdate((feed, mutated) => {
  97.             mutated && mutated.forEach(mutant => processNodes(mutant.addedNodes));
  98.         });
  99.         return;
  100.     }
  101.     //-------------------------------------------------------------------------------------
  102.     // if not using reddit watcher, have to create feed watchers
  103.     //-------------------------------------------------------------------------------------
  104.     function getFeedWrapper() {
  105.         let listingLayout = document.querySelector(".ListingLayout-outerContainer"),
  106.             firstPost     = listingLayout && listingLayout.querySelector("div[data-testid='post-container']"),
  107.             feedWrapper   = firstPost && firstPost.parentNode;
  108.         while(feedWrapper && !feedWrapper.nextSibling) {
  109.             if(feedWrapper == listingLayout) return null;
  110.             feedWrapper = feedWrapper.parentNode || null;
  111.         }
  112.         return feedWrapper && feedWrapper.parentNode;
  113.     }
  114.     processNodes([getFeedWrapper()]);
  115.     var feedWatcher = new MutationObserver(mutated => mutated.forEach(mutant => processNodes(mutant.addedNodes))),
  116.         lastFirstPost = null;
  117.     (new MutationObserver(() => {
  118.         let feedWrapper = getFeedWrapper(),
  119.             firstPost = feedWrapper && feedWrapper.children[0];
  120.         if(firstPost !== lastFirstPost) {
  121.             reset(feedWrapper);
  122.             feedWatcher.disconnect();
  123.             feedWatcher.observe(feedWrapper, {childList:true});
  124.             lastFirstPost = firstPost;
  125.         }
  126.     })).observe(document.body, {childList:true, subtree:true});
  127. })();