MediaWiki:Common.js: Difference between revisions

Revision as of 18:35, 20 August 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/* Allows images within galleries to be spoiled if "spoiler:" is put at the start of its caption*/
mw.hook('wikipage.content').add(function ($content) {
    $content.find('ul.gallery').each(function () {
        var $gallery = $(this);
        var isWholeGallerySpoiler = $gallery.hasClass('spoiler-image');
        var hasAnySpoiler = isWholeGallerySpoiler;

        $gallery.find('li.gallerybox').each(function () {
            var $box = $(this);
            var captionText = $box.find('.gallerytext').text().trim().toLowerCase();
            var imgSrc = ($box.find('img').attr('src') || '') + ' ' +
                         ($box.find('img').attr('alt') || '');

            var isIndividualSpoiler = captionText.indexOf('spoiler:') === 0;

            if (isWholeGallerySpoiler || isIndividualSpoiler) {
                $box.addClass('spoiler-image');
                hasAnySpoiler = true;

                if (isIndividualSpoiler) {
                    $box.find('.gallerytext').html(function (i, html) {
                        return html.replace('spoiler: ', '');
                    });
                }
            }
        });

        if (hasAnySpoiler) {
            var $btn = $('<button type="button">')
                .text('Reveal all spoilers');

            $btn.on('click', function () {
                $gallery.addClass('spoiler-image revealed');
                $gallery.find('.gallerybox.spoiler-image').addClass('revealed');
                $gallery.find('.mw-gallery-slideshow-img-container img')
                        .css('filter', 'none')
                        .removeClass('spoiler-image');
                $btn.remove();
            });

            $gallery.before($btn);
        }
    });

    function applySpoilerToLargeImage($gallery) {
        if ($gallery.hasClass('spoiler-image revealed')) {
            return;
        }

        var $current = $gallery.find('.gallerybox.slideshow-current');
        if (!$current.length) {
            $current = $gallery.find('.gallerybox').first();
        }

        var $container = $gallery.find('.mw-gallery-slideshow-img-container');
        var $largeImg = $container.find('img');

        if ($current.hasClass('spoiler-image') && !$current.hasClass('revealed')) {
            $largeImg.addClass('spoiler-image')'
        } else {
            $largeImg.removeClass('spoiler-imgage');
            $container.removeClass('spoiler-image');
        }
    }

    $content.find('ul.mw-gallery-slideshow').each(function () {
        var $gallery = $(this);

        applySpoilerToLargeImage($gallery);
        setTimeout(function () { applySpoilerToLargeImage($gallery); }, 150);
        setTimeout(function () { applySpoilerToLargeImage($gallery); }, 500);

        var observer = new MutationObserver(function () {
            applySpoilerToLargeImage($gallery);
        });
        observer.observe($gallery[0], {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['class', 'src']
        });
    });

    $content.on('click', '.gallerybox.spoiler-image', function () {
        $(this).addClass('revealed');
        var $gallery = $(this).closest('ul.gallery');
        applySpoilerToLargeImage($gallery);
    });

    $content.on('click', '.mw-gallery-slideshow-img-container.spoiler-image, .mw-gallery-slideshow-img-container', function (e) {
        if ($(e.target).closest('.oo-ui-buttonElement, button').length) {
            return;
        }

        var $container = $(this).closest('.mw-gallery-slideshow-img-container');
        var $gallery = $container.closest('ul.gallery');
        var $img = $container.find('img');

        if ($container.hasClass('spoiler-image')) {
            e.preventDefault();
            e.stopPropagation();

            $img.removeClass('spoiler-image').css('filter', 'none');
            $container.removeClass('spoiler-image');

            $gallery.find('.gallerybox.slideshow-current').addClass('revealed');

            if ($gallery.hasClass('spoiler-image')) {
                $gallery.addClass('spoiler-image revealed');
                $gallery.find('.gallerybox.spoiler-image').addClass('revealed');
            }
        }
    });
});