MediaWiki:Gadget-DeferredDisplay.js
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, 2024
*/
$(document).ready(function() {
// Function to apply NSFW overlay
function applyNsfwOverlay($element) {
$element.parent().css({
backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'block'
}).one('click', function(e) {
$(this).css('backgroundImage', '').find('img').css({
visibility: ''
});
e.preventDefault();
}).find('img').css({
visibility: 'hidden'
});
}
// Apply NSFW overlay to images already in the DOM
$('img[alt*=NSFWTAG]').each(function() {
applyNsfwOverlay($(this));
});
// Apply NSFW overlay to thumbnails already in the DOM
$('.thumbinner .nsfwelement').each(function() {
var $thumbInner = $(this).closest('.thumbinner');
$thumbInner.css({
backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'block'
}).one('click', function(e) {
$(this).css('backgroundImage', '').find('img').css({
visibility: ''
});
e.preventDefault();
}).find('img').css({
visibility: 'hidden'
});
});
// Monitor for lazy-loaded images
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
$(mutation.addedNodes).each(function() {
if ($(this).is('img.image-lazy-loaded') && $(this).attr('alt').includes('NSFWTAG')) {
applyNsfwOverlay($(this));
}
if ($(this).find('.nsfwelement').length > 0) {
var $thumbInner = $(this).closest('.thumbinner');
$thumbInner.css({
backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'block'
}).one('click', function(e) {
$(this).css('backgroundImage', '').find('img').css({
visibility: ''
});
e.preventDefault();
}).find('img').css({
visibility: 'hidden'
});
}
});
}
});
});
// Observe changes in the body
observer.observe(document.body, {
childList: true,
subtree: true
});
});
