MediaWiki:Gadget-DeferredDisplay.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Deferred display of {{tl|nsfw}}-tagged images.
 * @author Vish, 2024
 */

$(document).ready(function() {
    // Hide images immediately
    $('img[alt*=NSFWTAG]').css('opacity', '0');
    $('.image[title*=NSFWTAG]').find('img').css('opacity', '0');
    
    // Create overlay div and apply styles
    function createOverlay(parent) {
        parent.css({
            display: 'block'
        });
        var image = parent.find('img');

        // Use the `height` attribute or fallback to CSS
        var overlayHeight = image.attr('height') || image.css('height') || '100%';
        
        var overlay = $('<div>').css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: overlayHeight,
            backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'contain',
            backgroundColor: 'black',
            cursor: 'pointer',
            zIndex: 1 // Ensure overlay is on top
        }).appendTo(parent);

        overlay.one('click', function(e) {
            e.preventDefault();
            $(this).remove();
            parent.css({
                backgroundImage: '',
                backgroundRepeat: '',
                backgroundPosition: '',
                backgroundSize: '',
                display: ''
            }).find('img').css({
                visibility: '',
                opacity: '100%'
            });
        });

        console.log('Overlay created with height:', overlayHeight);
    }

    // Wrap non-thumb images and add overlay
    $('img[alt*=NSFWTAG]').parent().add($('.thumb')
        .has('.nsfwelement').find('.image').parent())
        .each(function() {
            var parent = $(this);
            parent.css({
                position: 'relative', // Ensure parent is positioned
            }).find('img').css({
                visibility: 'hidden'
            });

            createOverlay(parent);
        });

    // Add overlay to elements with NSFWTAG in title attribute within .image
    $('.image[title*=NSFWTAG]').each(function() {
        var parent = $(this).closest('.thumb');
        if (parent.find('img[alt*=NSFWTAG]').length === 0) { // Only apply if no img with NSFWTAG is found
            parent.css({
                position: 'relative', // Ensure parent is positioned
            });

            createOverlay(parent);
        }
    });
});