☰

Imgur: add numbers to gallery images in the old design

Adds numbers to the images in posts, indicating their position in the album, so you can refer to them in comments.

2023-12-09 기준 버전입니다. 최신 버전을 확인하세요.

// ==UserScript==
// @name         Imgur: add numbers to gallery images in the old design
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds numbers to the images in posts, indicating their position in the album, so you can refer to them in comments.
// @author       Corrodias
// @match        https://imgur.com/gallery/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=imgur.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    if (typeof imgur === 'undefined') return; // This is not the old design.

    const mutationObserver = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType === Node.ELEMENT_NODE)
                    processAddedElement(node);
            }
        }
    });

    // Add them to images already loaded.
    for (const image of document.querySelectorAll('.post-image-container')) {
        processAddedElement(image);
    }
    // Add them to any images loaded later.
    mutationObserver.observe(document.querySelector('.post-images'), { childList: true, subtree: true });

    function processAddedElement(node) {
        if (!node.classList.contains('post-image-container')) return;

        let images = getImagesData();
        if (images === null) return; // oops

        let index = images.findIndex(a => a.hash === node.id) + 1;
        let newElement = document.createElement('h1');
        newElement.textContent = `#${index}`;
        node.prepend(newElement);
    }

    function getImagesData() {
        let node = document.querySelector('form.caption-create');
        // The rest of the name past the $ is not always identical.
        for (const propertyKey in node) {
            if (propertyKey.startsWith('__reactInternalInstance$')) {
                let data = node[propertyKey]._currentElement._owner._instance.props.image.album_images;
                return Array.isArray(data) ? data : data.images; // Oddly enough, on a fresh load, it's one type, and when navigating to a new post, it's the other.
            }
        }

        return null;
    }
})();