User:Ilmari Karonen/ifdthumbnails.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// Add thumbnails to IfD pages; see the talk page for documentation.

if (/^(Wikipedia:((Files|Images_and_media)_for_deletion|Possibly_unfree_(files|images))|Commons:Deletion_requests)(\/|$)/.test(mw.config.get('wgPageName'))) {
    var hTag = (mw.config.get('wgDBname') == "commonswiki" ? "h3" : "h4");

    mw.util.addCSS(
        "a.ifd-thumbnail { display: block; float: right; }\n" +
        "a.ifd-thumbnail img { border: 1px solid #ccc; margin: 0 0 0.5em 1em; }\n" +
        hTag + ", div.delh { clear: right; }\n"
    );

    var createThumbnails = function() {
        // compile a list of images being discussed and save the heading node for each
        var headings = document.getElementsByTagName(hTag);
        var images = [];
        var imageLocations = {};
        for (var i = 0; i < headings.length; i++) {
            var links = headings[i].getElementsByTagName("a");
            for (var j = 0; j < links.length; j++) {
                if (!/^(Image|File):/i.test(links[j].title) || /(^|\s)new(\s|$)/.test(links[j].className))
                    continue;
                images.push(links[j].title);
                imageLocations[links[j].title] = headings[i];
                break;
            }
        }
        if (!images.length) return;  // nothing to do :-/
        headings = null;  // free DOM nodeList, we're done with it

        // make an API request to find URLs for each image
        var showThumbnails = function (result) {
            // parse JSON output
            if (result.error)
                return; // alert("API error " + result.error.code + ": " + result.error.info);
            if (!result.query || !result.query.pages)
                return; // alert("Unexpected API result:\n" + ajax_result.responseText);

            // hopefully we don't get any normalization, but just in case...
            if (result.query.normalized) {
                var norm = result.query.normalized;
                for (var i = 0; i < norm.length; i++) {
                    imageLocations[norm[i].to] = imageLocations[norm[i].from];
                }
            }

            // now loop over the result and insert thumbs
            var pages = result.query.pages;
            for (var id in pages) {
                var title = pages[id].title;
                if (!title) continue;  // should not happen

                if (pages[id].imagerepository && pages[id].imagerepository == "shared")
                    continue;  // don't show thumbnails for Commons images (which may show up on IfD after a local copy has been deleted)

                var info = pages[id].imageinfo;
                if (!info || !info.length) continue;  // can happen if the image has been deleted
                info = info[0];
                if (!info.thumburl || !info.thumbwidth || !info.thumbheight || !info.descriptionurl) continue;  // should not happen

                var heading = imageLocations[title];
                if (!heading) continue;  // should not happen

                var img = document.createElement("img");
                img.src = info.thumburl;
                img.width = info.thumbwidth;
                img.height = info.thumbheight;
                img.alt = title;

                var link = document.createElement("a");
                link.href = info.descriptionurl;
                link.title = title;
                link.className = 'ifd-thumbnail';
                link.appendChild(img);

                heading.parentNode.insertBefore(link, heading.nextSibling);
            }
        };
        
        var queryPrefix = mw.config.get('wgServer') + mw.config.get('wgScriptPath') + "/api.php?format=json&action=query&maxage=3600&prop=imageinfo&iiprop=url&iiurlwidth=80&iiurlheight=80&titles=";
        var batchSize = 50;
        for (var i = 0; i < images.length; i += batchSize)
            $.getJSON(queryPrefix + encodeURIComponent(images.slice(i,i+batchSize).join("|"))).then(showThumbnails);
    };
    $(createThumbnails);
}