MediaWiki:Gadget-InvertImages.js - Revision history

ReisuDesign: Created page with "(function () { 'use strict'; // Prevent duplicate initialization if (window.PetitPlanetInvertImagesLoaded) { return; } window.PetitPlanetInvertImagesLoaded = true; // ============================================================ // CONFIG // ============================================================ var JSON_PAGE = 'MediaWiki:Gadget-InvertImages.json'; var DAY_CLASS = 'day-invert-image'; var NIGHT_CLASS = 'night-invert-image'; // ==================..."

2026-10-10T17:17:33Z

Created page with "(function () { 'use strict'; // Prevent duplicate initialization if (window.PetitPlanetInvertImagesLoaded) { return; } window.PetitPlanetInvertImagesLoaded = true; // ============================================================ // CONFIG // ============================================================ var JSON_PAGE = 'MediaWiki:Gadget-InvertImages.json'; var DAY_CLASS = 'day-invert-image'; var NIGHT_CLASS = 'night-invert-image'; // ==================..."

New page

(function () {
'use strict';

// Prevent duplicate initialization
if (window.PetitPlanetInvertImagesLoaded) {
return;
}

window.PetitPlanetInvertImagesLoaded = true;

// ============================================================
// CONFIG
// ============================================================

var JSON_PAGE = 'MediaWiki:Gadget-InvertImages.json';

var DAY_CLASS = 'day-invert-image';
var NIGHT_CLASS = 'night-invert-image';

// ============================================================
// STATE
// ============================================================

var dayImages = new Set();
var nightImages = new Set();

var loaded = false;

// ============================================================
// NORMALIZE FILE NAME
// ============================================================

function normalizeFileName(name) {
if (!name) {
return '';
}

name = String(name);

// Decode URL encoding
try {
name = decodeURIComponent(name);
} catch (e) {
// Ignore decoding errors
}

// Remove File: namespace
name = name.replace(/^File:/i, '');

// MediaWiki treats underscores and spaces equivalently
name = name.replace(/_/g, ' ');

return name.trim();
}

// ============================================================
// GET FILE NAME FROM IMAGE
// ============================================================

function getFileName(img) {
if (!img) {
return null;
}

// --------------------------------------------------------
// 1. MediaWiki's File link
// --------------------------------------------------------

/*
* This is the most reliable method.
*
* Normal wiki images:
*
* <a href="/File:Crab_Icon.png">
* <img ...>
* </a>
*
* Category pages / galleries use the same structure.
*/

var link = img.closest('a.mw-file-description');

if (!link) {
link = img.closest('a');
}

if (link) {

// Check href
var href = link.getAttribute('href');

if (href) {

/*
* Matches:
*
* /File:Crab_Icon.png
* /wiki/File:Crab_Icon.png
* ./File:Crab_Icon.png
*/

var match = href.match(
/(?:^|\/)(?:wiki\/)?File:([^#?]+)/i
);

if (match) {
return normalizeFileName(match[1]);
}
}

// Check title as another MediaWiki fallback
var title = link.getAttribute('title');

if (title && /^File:/i.test(title)) {
return normalizeFileName(title);
}
}

// --------------------------------------------------------
// 2. MediaWiki resource attribute
// --------------------------------------------------------

var resource = img.getAttribute('resource');

if (resource) {

var resourceMatch = resource.match(
/(?:File:|\/File:)([^#?]+)/i
);

if (resourceMatch) {
return normalizeFileName(resourceMatch[1]);
}
}

// --------------------------------------------------------
// 3. File-specific data attributes
// --------------------------------------------------------

var dataAttributes = [
'data-file-name',
'data-filename',
'data-file'
];

for (var i = 0; i < dataAttributes.length; i++) {

var value = img.getAttribute(
dataAttributes[i]
);

if (value) {
return normalizeFileName(value);
}
}

// --------------------------------------------------------
// 4. Image source
// --------------------------------------------------------

var sources = [
img.currentSrc,
img.src,
img.getAttribute('data-src'),
img.getAttribute('data-lazy-src')
];

for (var j = 0; j < sources.length; j++) {

var source = sources[j];

if (!source) {
continue;
}

try {

var url = new URL(
source,
window.location.href
);

var path = url.pathname;

/*
* Thumbnail URL:
*
* /thumb/a/ab/
* Crab_Icon.png/
* 150px-Crab_Icon.png
*/

var thumbMatch = path.match(
/\/thumb\/[^/]+\/[^/]+\/([^/]+)\/[^/]+$/i
);

if (thumbMatch) {
return normalizeFileName(
thumbMatch[1]
);
}

// Last path component
var parts = path.split('/');
var filename = parts[parts.length - 1];

if (filename) {

// Remove thumbnail size prefix
filename = filename.replace(
/^\d+px-/i,
''
);

return normalizeFileName(filename);
}

} catch (e) {
// Ignore invalid URLs
}
}

return null;
}

// ============================================================
// PROCESS ONE IMAGE
// ============================================================

function processImage(img) {

if (!img || img.nodeType !== 1) {
return;
}

if (
!img.tagName ||
img.tagName.toLowerCase() !== 'img'
) {
return;
}

var fileName = getFileName(img);

if (!fileName) {
return;
}

// --------------------------------------------------------
// Determine desired class
// --------------------------------------------------------

var desiredClass = null;

if (nightImages.has(fileName)) {

desiredClass = NIGHT_CLASS;

} else if (dayImages.has(fileName)) {

desiredClass = DAY_CLASS;
}

// --------------------------------------------------------
// Apply desired state
// --------------------------------------------------------

if (desiredClass === NIGHT_CLASS) {

img.classList.add(NIGHT_CLASS);
img.classList.remove(DAY_CLASS);

} else if (desiredClass === DAY_CLASS) {

img.classList.add(DAY_CLASS);
img.classList.remove(NIGHT_CLASS);

} else {

// Not in either JSON list
img.classList.remove(DAY_CLASS);
img.classList.remove(NIGHT_CLASS);
}
}

// ============================================================
// PROCESS ALL IMAGES
// ============================================================

function processAllImages(root) {

root = root || document;

// Root itself
if (
root.nodeType === 1 &&
root.tagName &&
root.tagName.toLowerCase() === 'img'
) {
processImage(root);
}

if (!root.querySelectorAll) {
return;
}

var images = root.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
processImage(images[i]);
}
}

// ============================================================
// LOAD JSON
// ============================================================

function loadJSON() {

var url = mw.util.getUrl(
JSON_PAGE,
{
action: 'raw'
}
);

fetch(url, {
credentials: 'same-origin',
cache: 'no-cache'
})

.then(function (response) {

if (!response.ok) {
throw new Error(
'Failed to load ' +
JSON_PAGE +
' (' +
response.status +
')'
);
}

return response.text();
})

.then(function (text) {

var data;

try {

data = JSON.parse(text);

} catch (e) {

throw new Error(
'Invalid JSON in ' +
JSON_PAGE
);
}

// ----------------------------------------------------
// Day
// ----------------------------------------------------

dayImages.clear();

if (Array.isArray(data.day)) {

data.day.forEach(function (fileName) {

var normalized =
normalizeFileName(fileName);

if (normalized) {
dayImages.add(normalized);
}
});
}

// ----------------------------------------------------
// Night
// ----------------------------------------------------

nightImages.clear();

if (Array.isArray(data.night)) {

data.night.forEach(function (fileName) {

var normalized =
normalizeFileName(fileName);

if (normalized) {
nightImages.add(normalized);
}
});
}

loaded = true;

// Process everything currently rendered
processAllImages(document);

})

.catch(function (error) {

console.error(
'[InvertImages] ' +
error.message
);

});
}

// ============================================================
// DYNAMIC CONTENT / LAZY LOADING
// ============================================================

var observer = new MutationObserver(function (mutations) {

if (!loaded) {
return;
}

for (var i = 0; i < mutations.length; i++) {

var mutation = mutations[i];

// ----------------------------------------------------
// Newly inserted elements
// ----------------------------------------------------

if (mutation.type === 'childList') {

for (
var j = 0;
j < mutation.addedNodes.length;
j++
) {

var node = mutation.addedNodes[j];

if (node.nodeType === 1) {
processAllImages(node);
}
}
}

// ----------------------------------------------------
// Lazy-loaded / changed image
// ----------------------------------------------------

if (
mutation.type === 'attributes' &&
mutation.target &&
mutation.target.tagName &&
mutation.target.tagName.toLowerCase() === 'img'
) {

processImage(mutation.target);
}
}
});

observer.observe(
document.documentElement,
{
childList: true,
subtree: true,
attributes: true,
attributeFilter: [
'src',
'srcset',
'resource',
'data-src',
'data-lazy-src',
'data-file-name',
'data-filename',
'data-file'
]
}
);

// ============================================================
// START
// ============================================================

loadJSON();

})();