MediaWiki:Gadget-DeferredDisplay.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 11:15, 7 August 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() {
    // Create overlay div and apply styles
    function createOverlay(parent) {
        var overlay = $('<div>').css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'contain',
            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: ''
            });
        });
    }

    // Wrap non-thumb images and add overlay
    $('img[alt*=NSFWTAG]').parent().add($('.thumbinner,.gallerybox')
        .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);
        });
});