MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* 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 && !$gallery.prev('.spoiler-reveal-all').length) {
            var $btn = $('<button type="button">')
                .text('Reveal all spoilers');

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

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

        function updateImage() {
            if ($gallery.hasClass('spoiler-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');

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

        updateImage();

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

    $content.on('click', '.gallerybox.spoiler', function () {
        $(this).addClass('revealed');
    });

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

        var $container = $(this);
        var $gallery = $container.closest('ul.gallery');

        if (!$container.hasClass('revealed')) {
            e.preventDefault();
            e.stopPropagation();

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

            // If the whole gallery was marked as spoiler, reveal everything
            if ($gallery.hasClass('spoiler-image')) {
                $gallery.addClass('spoiler-image revealed');
                $gallery.find('.gallerybox.spoiler-image').addClass('revealed');
            }
        }
    });
});