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 li.gallerybox').each(function () {
        var $box = $(this);
        var $caption = $box.find('.gallerytext');
        var captionText = $caption.text().trim().toLowerCase();

        if (captionText.startsWith('spoiler:')) {
            $box.addClass('spoiler-image');
            $caption.html($caption.html().replace('spoiler: ', ''));
        }
    });
    
    $content.find('ul.mw-gallery-slideshow').each(function () {
        var $gallery = $(this);

        function updateImage() {
            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-image') && !current.hasClass('revealed')) {
                $container.addClass('spoiler-image');
            } else {
                $container.removeClass('spoiler-image revealed');
            }
        }

        updateImage();

        var observer = new MutationObserver(function () {
            updateImage();
        });

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


/* Toggles spoilered images between blurred and not blurred upon clicking */
$(function() {
    $('.spoiler-image').on('click', function() {
        $(this).toggleClass('revealed');
    });
});