☰

Old Reddit show image in comments

This script displays images in the comments of old Reddit. It also allows you to expand the image by clicking on it!

Fra og med 26.07.2024. Se den nyeste version.

// ==UserScript==
// @name         Old Reddit show image in comments
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  This script displays images in the comments of old Reddit. It also allows you to expand the image by clicking on it!
// @author       minnie
// @match        https://old.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    // Function to find and replace <a> tags with <img> tags
    function replaceLinks() {
        // Select all <a> tags that are children of <p> elements
        const links = document.querySelectorAll('p > a');
        links.forEach(link => {
            // Check if the link's inner HTML matches '&lt;image&gt;'
            if (link.innerHTML === '&lt;image&gt;') {
                // Create a new <img> element
                const img = document.createElement('img');
                // Set the src attribute of the <img> to the href of the <a>
                img.src = link.href;
                // Apply any styles from the <a> to the <img>
                img.style = link.style.cssText;
                img.style.height = '300px'; // Set height to 300 pixels
                img.style.width = 'auto'; // Set width to auto

                // Replace the <a> with the <img> in the DOM
                link.parentNode.replaceChild(img, link);

                // Add click event listener to expand the image
                img.addEventListener('click', () => {
                    expandImage(img);
                });
            }
        });
    }

    // Function to observe for dynamically added content
    function observeDynamicContent() {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                // Check if there are added nodes and if any is an element node
                if (mutation.addedNodes.length && Array.from(mutation.addedNodes).some(node => node.nodeType === 1)) {
                    replaceLinks();
                }
            });
        });

        // Start observing the document body for added nodes
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // Function to expand image
    function expandImage(image) {
        // Create a new div element for the overlay
        const overlay = document.createElement('div');
        const expandedImage = document.createElement('img');

        expandedImage.src = image.src;
        overlay.id = 'expandedImage';




        // Apply CSS styles to the overlay
        overlay.classList.add("expandedImage");
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.display = 'flex';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.zIndex = '1000';

        expandedImage.style.maxWidth = '90%';
        expandedImage.style.maxHeight = '90%';

        // Append the expanded image to the overlay
        overlay.appendChild(expandedImage);

        // Add custom CSS
        const expandedImageCSS = document.createElement('style');
        const css = `
            div#expandedImage {
                 background-color: rgba(0, 0, 0, 0.7) !important;
                 backdrop-filter: blur(4px);
            }
        `;
        expandedImageCSS.textContent = css;
        document.head.appendChild(expandedImageCSS);

        // Append the overlay to the body
        document.body.appendChild(overlay);

        // Add click event listener to remove the overlay
        overlay.addEventListener('click', () => {
            overlay.remove();
        });
    }

    replaceLinks();
    observeDynamicContent();
})();