Imgur: add numbers to gallery images in the old design

Greasy Fork is available in English.

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.

换行

// ==UserScript==
// @name         Imgur: add numbers to gallery images in the old design
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @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();

        let index = (images === null || images.length === 0) ? 1 : 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;
                if (data === undefined) return null; // If there's only one image, sometimes this property doesn't exist.
                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;
    }
})();