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 Vish, 2024
*/
$(document).ready(function() {
// Create overlay div and apply styles
function createOverlay(parent) {
var image = parent.find('img');
var overlayHeight = image.length ? image.height() : parent.height();
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: ''
});
});
}
// 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);
});
// Use MutationObserver to handle lazy-loaded images
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
$(mutation.addedNodes).each(function() {
var parent = $(this).closest('.thumbinner,.gallerybox').has('.nsfwelement').find('.image').parent();
if (parent.length) {
parent.css({
position: 'relative' // Ensure parent is positioned
}).find('img').css({
visibility: 'hidden'
});
createOverlay(parent);
}
});
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
