MediaWiki:Gadget-DeferredDisplay.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 07:40, 28 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 to add overlay
    function addOverlay($element) {
        var $overlay = $('<div>')
            .css({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center center',
                zIndex: 10,
                cursor: 'pointer'
            })
            .addClass('nsfw-overlay')
            .one('click', function() {
                $(this).remove();
                $element.css('visibility', 'visible');
            });

        $element.css('visibility', 'hidden').parent().css('position', 'relative').append($overlay);
    }

    // Wrap non-thumb images and add overlay
    $('img[alt*=NSFWTAG]').each(function() {
        addOverlay($(this));
    });

    // Wrap thumb images and add overlay
    $('.thumbinner, .gallerybox').has('.nsfwelement').each(function() {
        var $image = $(this).find('img.image-lazy-loaded');
        if ($image.length) {
            addOverlay($image);
        }
    });
});