MediaWiki:Gadget-DeferredDisplay.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 11:29, 26 July 2024 by Vish (talk | contribs)
Jump to navigation Jump to search

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.
/**
 * Deferred display of {{tl|nsfw}}-tagged images.
 * jshint validation
 * @author Dschwen, 2013 / Vish, 2023
 */

$(document).ready(function() {
    function applyNSFWOverlay(container) {
        container.css({
            backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            display: 'block'
        }).find('img').css({
            visibility: 'hidden'
        }).one('click', function(e) {
            $(this).css('visibility', '');
            $(this).parent().css('backgroundImage', '');
            e.preventDefault();
        });
    }

    function processNSFWImages() {
        // Select and process images
        $('img[alt*=NSFWTAG]').parent().add($('.thumbinner,.gallerybox').has('.nsfwelement').find('.image').parent()).each(function() {
            applyNSFWOverlay($(this));
        });
    }

    processNSFWImages();

    // Set up a MutationObserver to handle lazy-loaded images
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
                var img = $(mutation.target);
                if (img.is('img[alt*=NSFWTAG]')) {
                    applyNSFWOverlay(img.parent());
                }
            }
        });
    });

    // Observe changes in the document
    observer.observe(document.body, {
        attributes: true,
        subtree: true,
        attributeFilter: ['src']
    });
});