MediaWiki:Timeless.js - Revision history

Eldrin at 20:33, 17 January 2026

2026-01-17T20:33:55Z

← Older revision		Revision as of 20:33, 17 January 2026
Line 16:		Line 16:
	// [[File:Name.png\|...]]		// [[File:Name.png\|...]]
	// [[Image:Name.png]] (alias)		// [[Image:Name.png]] (alias)
	~~var m = val.match(/^\s\[\[\s(File\|Image)\s:\s([^\]\|]+)(?:\\|[^\]])?\]\]\s$/i);~~
	~~if (m) {~~
	~~val = "File:" + m[2].trim();~~
	~~} else {~~
	// Strip trailing ]] / leading [[ if someone pastes partial		// Strip trailing ]] / leading [[ if someone pastes partial
	val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");		val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");
Line 31:		Line 28:
	// Ensure File:		// Ensure File:
	if (!/^File:/i.test(val)) val = "File:" + val.trim();		if (!/^File:/i.test(val)) val = "File:" + val.trim();
	}

	return val;		return val;

Eldrin at 20:33, 17 January 2026

2026-01-17T20:33:19Z

← Older revision		Revision as of 20:33, 17 January 2026
Line 7:		Line 7:
	}		}

	function normalizeToFileTitle(val) {		function normalizeToFileTitle(val) {
	if (!val) return "";		if (!val) return "";
	val = ("" + val).trim();		val = ("" + val).trim();
	if (!val) return "";		if (!val) return "";

	// ~~Strip~~ [[...]] ~~and pipes~~		// Handle full wikilink formats:
	if (val.~~startsWith~~("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");		// [[File:Name.png]]
	~~if (val.includes("\|")) val = val.split("\|")[0]~~;		// [[File:Name.png\|...]]
			// [[Image:Name.png]] (alias)
			var m = val.match(/^\s\[\[\s(File\|Image)\s:\s([^\]\|]+)(?:\\|[^\]])?\]\]\s$/i);
			if (m) {
			val = "File:" + m[2].trim();
			} else {
			// Strip trailing ]] / leading [[ if someone pastes partial
			val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");

	if (!/^File:/i.test(val)) val = "File:" + val;		// If still contains pipe, keep left side
	~~return val~~;		if (val.includes("\|")) val = val.split("\|")[0].trim();

			// Convert Image: to File:
			val = val.replace(/^Image:/i, "File:");

			// Ensure File:
			if (!/^File:/i.test(val)) val = "File:" + val.trim();
	}		}

			return val;
			}


	function fileTitleToThumbUrl(fileTitle) {		function fileTitleToThumbUrl(fileTitle) {

Eldrin at 20:19, 17 January 2026

2026-01-17T20:19:06Z

← Older revision		Revision as of 20:19, 17 January 2026
Line 1:		Line 1:
	(function () {		(function () {
	function normalizeRoot(root) {		function normalizeRoot(root) {
	~~// Page Forms / mw.hook sometimes passes non-DOM objects.~~
	if (root && (root.nodeType === 1 \|\| root.nodeType === 9) && typeof root.querySelector === "function") {		if (root && (root.nodeType === 1 \|\| root.nodeType === 9) && typeof root.querySelector === "function") {
	return root; ~~// Element (1) or Document (9)~~		return root;
	}		}
	return document;		return document;
Line 13:		Line 12:
	if (!val) return "";		if (!val) return "";

	// ~~Allow pasting~~ [[~~File:...\|~~...]]		// Strip [[...]] and pipes
	if (val.startsWith("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");		if (val.startsWith("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");
	if (val.includes("\|")) val = val.split("\|")[0];		if (val.includes("\|")) val = val.split("\|")[0];
Line 24:		Line 23:
	var name = fileTitle.replace(/^File:/i, "");		var name = fileTitle.replace(/^File:/i, "");
	return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";		return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";
			}

			function ensurePreviewDiv(input) {
			var existing = document.getElementById("pf-image-preview");
			if (existing) return existing;

			var div = document.createElement("div");
			div.id = "pf-image-preview";
			div.style.width = "64px";
			div.style.height = "64px";
			div.style.border = "1px solid #333";
			div.style.marginTop = "6px";
			div.style.display = "flex";
			div.style.alignItems = "center";
			div.style.justifyContent = "center";
			div.style.fontSize = "11px";
			div.style.textAlign = "center";
			div.style.backgroundRepeat = "no-repeat";
			div.style.backgroundPosition = "center";
			div.style.backgroundSize = "contain";
			div.style.color = "#aaa";
			div.textContent = "No image";

			input.parentNode.appendChild(div);
			return div;
	}		}

Line 30:		Line 54:

	var input = root.querySelector("input.pf-item-image");		var input = root.querySelector("input.pf-item-image");
	if (!input~~) {~~		if (!input) return;
	~~input =~~
	~~root.querySelector('input[name="image"]') \|\|~~
	~~root.querySelector('input[name$="[image]"]');~~
	}

	~~var img = document.getElementById("pf-image-preview");~~
	~~var txt = document.getElementById("pf-image-preview-text");~~
	~~if (!input \|\| !img \|\| !txt~~) return;

	~~function setEmpty(msgHtml) {~~		var preview = ensurePreviewDiv(input);
	~~img.style.display~~ = ~~"none";~~
	~~img.removeAttribute~~(~~"src"~~);
	~~txt.style.display = "";~~
	~~txt.innerHTML = msgHtml;~~
	}

	function update() {		function update() {
	var fileTitle = normalizeToFileTitle(input.value);		var fileTitle = normalizeToFileTitle(input.value);
	if (!fileTitle) ~~return setEmpty(~~"~~<i>~~No image ~~selected.</i>~~");		if (!fileTitle) {
			preview.style.backgroundImage = "";
			preview.textContent = "No image";
			return;
			}

	var url = fileTitleToThumbUrl(fileTitle);		var url = fileTitleToThumbUrl(fileTitle);

	~~img~~.onload = function () {		// Test image existence using background image load trick
	~~img~~.style.~~display~~ = "";		var test = new Image();
	~~txt.style~~.~~display~~ = "~~none~~";		test.onload = function () {
			preview.style.backgroundImage = "url('" + url + "')";
			preview.textContent = "";
	};		};
	~~img~~.onerror = function () {		test.onerror = function () {
	~~setEmpty(~~"~~<i>Image not~~ found~~.</i>~~");		preview.style.backgroundImage = "";
			preview.textContent = "Not found";
	};		};
			test.src = url;
	~~img~~.src = url;
	}		}

Line 71:		Line 88:
	function run(root) {		function run(root) {
	setTimeout(function () { hookItemImagePreview(root); }, 150);		setTimeout(function () { hookItemImagePreview(root); }, 150);
			setTimeout(function () { hookItemImagePreview(root); }, 600);
	}		}

Line 76:		Line 94:
	mw.hook("wikipage.content").add(run);		mw.hook("wikipage.content").add(run);
	}		}
	document.addEventListener("DOMContentLoaded", function () { run(document); });		document.addEventListener("DOMContentLoaded", function () {
			run(document);
			});
	})();		})();

Eldrin at 20:17, 17 January 2026

2026-01-17T20:17:14Z

← Older revision		Revision as of 20:17, 17 January 2026
Line 1:		Line 1:
	(function () {		(function () {
			function normalizeRoot(root) {
			// Page Forms / mw.hook sometimes passes non-DOM objects.
			if (root && (root.nodeType === 1 \|\| root.nodeType === 9) && typeof root.querySelector === "function") {
			return root; // Element (1) or Document (9)
			}
			return document;
			}

	function normalizeToFileTitle(val) {		function normalizeToFileTitle(val) {
	if (!val) return "";		if (!val) return "";
	val = val.trim();		val = ("" + val).trim();
	if (!val) return "";		if (!val) return "";

	// Allow ~~users to paste~~ [[File:...\|...]]		// Allow pasting [[File:...\|...]]
	if (val.startsWith("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");		if (val.startsWith("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");
	if (val.includes("\|")) val = val.split("\|")[0];		if (val.includes("\|")) val = val.split("\|")[0];

	~~// Ensure File:~~
	if (!/^File:/i.test(val)) val = "File:" + val;		if (!/^File:/i.test(val)) val = "File:" + val;

	return val;		return val;
	}		}

	function fileTitleToThumbUrl(fileTitle) {		function fileTitleToThumbUrl(fileTitle) {
	~~// Works without knowing upload path~~
	var name = fileTitle.replace(/^File:/i, "");		var name = fileTitle.replace(/^File:/i, "");
	return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";		return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";
Line 22:		Line 27:

	function hookItemImagePreview(root) {		function hookItemImagePreview(root) {
	root = root ~~\|\| document~~;		root = normalizeRoot(root);

	~~// Primary: class we set in the form~~
	var input = root.querySelector("input.pf-item-image");		var input = root.querySelector("input.pf-item-image");

	~~// Fallbacks (in case PageForms didn't apply class)~~
	if (!input) {		if (!input) {
	input =		input =
Line 68:		Line 70:

	function run(root) {		function run(root) {
	~~// Delay helps on Special:FormEdit where inputs may appear after initial render~~
	setTimeout(function () { hookItemImagePreview(root); }, 150);		setTimeout(function () { hookItemImagePreview(root); }, 150);
	}		}

Eldrin at 20:16, 17 January 2026

2026-01-17T20:16:20Z

← Older revision		Revision as of 20:16, 17 January 2026
Line 1:		Line 1:
	~~/* All JavaScript here will be loaded for users of the Timeless skin */~~
	~~console.log("Timeless.js loaded");~~
	(function () {		(function () {
	function normalizeToFileTitle(val) {		function normalizeToFileTitle(val) {
Line 7:		Line 5:
	if (!val) return "";		if (!val) return "";

	// Allow "File:~~Something~~.~~png~~" ~~or just~~ "~~Something~~.~~png~~"		// Allow users to paste [[File:...\|...]]
			if (val.startsWith("[[")) val = val.replace(/^\[\[\s/, "").replace(/\s\]\]$/, "");
			if (val.includes("\|")) val = val.split("\|")[0];

			// Ensure File:
	if (!/^File:/i.test(val)) val = "File:" + val;		if (!/^File:/i.test(val)) val = "File:" + val;

	return val;		return val;
	}		}

	function fileTitleToThumbUrl(fileTitle) {		function fileTitleToThumbUrl(fileTitle) {
	// ~~MediaWiki thumb URL via Special:Redirect (works~~ without knowing upload path)		// Works without knowing upload path
	~~// Example: /wiki/Special:Redirect/file/Some.png?width=64~~
	var name = fileTitle.replace(/^File:/i, "");		var name = fileTitle.replace(/^File:/i, "");
	return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";		return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";
	}		}

	function ~~hookPageFormsImagePreview~~() {		function hookItemImagePreview(root) {
	// ~~Page Forms inputs usually end up as <input name="...">~~		root = root \|\| document;
	var input =
	~~document~~.querySelector('input~~[name="~~image"]') \|\|		// Primary: class we set in the form
	~~document~~.querySelector('input[name="~~Item[~~image]"]') \|\|		var input = root.querySelector("input.pf-item-image");
	~~document~~.querySelector('input[name$="[image]"]');
			// Fallbacks (in case PageForms didn't apply class)
			if (!input) {
			input =
			root.querySelector('input[name="image"]') \|\|
			root.querySelector('input[name$="[image]"]');
			}

	var img = document.getElementById("pf-image-preview");		var img = document.getElementById("pf-image-preview");
	var txt = document.getElementById("pf-image-preview-text");		var txt = document.getElementById("pf-image-preview-text");
	if (!input \|\| !img \|\| !txt) return;		if (!input \|\| !img \|\| !txt) return;

			function setEmpty(msgHtml) {
			img.style.display = "none";
			img.removeAttribute("src");
			txt.style.display = "";
			txt.innerHTML = msgHtml;
			}

	function update() {		function update() {
	var fileTitle = normalizeToFileTitle(input.value);		var fileTitle = normalizeToFileTitle(input.value);
	if (!fileTitle) {		if (!fileTitle) return setEmpty("<i>No image selected.</i>");
	~~img.style.display = "none";~~
	~~txt.style.display = "";~~
	~~txt.innerHTML =~~ "<i>No image selected.</i>";
	~~img.removeAttribute("src~~");
	~~return;~~
	}

	var url = fileTitleToThumbUrl(fileTitle);		var url = fileTitleToThumbUrl(fileTitle);

	img.onload = function () {		img.onload = function () {
	img.style.display = "";		img.style.display = "";
Line 46:		Line 56:
	};		};
	img.onerror = function () {		img.onerror = function () {
	~~img.style.display = "none";~~		setEmpty("<i>Image not found.</i>");
	~~txt.style.display = "";~~
	~~txt.innerHTML =~~ "<i>Image not found.</i>";
	};		};

	img.src = url;		img.src = url;
	}		}

	~~// Update while typing + when autocomplete fills~~
	input.addEventListener("input", update);		input.addEventListener("input", update);
	input.addEventListener("change", update);		input.addEventListener("change", update);
			update();
			}

	// ~~Initial~~		function run(root) {
	~~update~~();		// Delay helps on Special:FormEdit where inputs may appear after initial render
			setTimeout(function () { hookItemImagePreview(root); }, 150);
	}		}

	mw.hook("wikipage.content").add(function () {		if (window.mw && mw.hook) {
	~~// Run on formedit pages~~		mw.hook("wikipage.content").add(run);
	~~hookPageFormsImagePreview~~();		}
	});		document.addEventListener("DOMContentLoaded", function () { run(document); });
	})();		})();

Eldrin at 20:13, 17 January 2026

2026-01-17T20:13:18Z

← Older revision		Revision as of 20:13, 17 January 2026
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Timeless skin */		/* All JavaScript here will be loaded for users of the Timeless skin */
	console.log("Timeless.js loaded")		console.log("Timeless.js loaded");
	(function () {		(function () {
	function normalizeToFileTitle(val) {		function normalizeToFileTitle(val) {

Eldrin at 20:13, 17 January 2026

2026-01-17T20:13:14Z

← Older revision		Revision as of 20:13, 17 January 2026
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Timeless skin */		/* All JavaScript here will be loaded for users of the Timeless skin */
			console.log("Timeless.js loaded")
	(function () {		(function () {
	function normalizeToFileTitle(val) {		function normalizeToFileTitle(val) {

Eldrin: Created page with "/* All JavaScript here will be loaded for users of the Timeless skin */ (function () { function normalizeToFileTitle(val) { if (!val) return ""; val = val.trim(); if (!val) return ""; // Allow "File:Something.png" or just "Something.png" if (!/^File:/i.test(val)) val = "File:" + val; return val; } function fileTitleToThumbUrl(fileTitle) { // MediaWiki thumb URL via Special:Redirect (works without knowing upload path) // Example: /w..."

2026-01-17T20:10:04Z

Created page with "All JavaScript here will be loaded for users of the Timeless skin: (function () { function normalizeToFileTitle(val) { if (!val) return ""; val = val.trim(); if (!val) return ""; // Allow "File:Something.png" or just "Something.png" if (!/^File:/i.test(val)) val = "File:" + val; return val; } function fileTitleToThumbUrl(fileTitle) { // MediaWiki thumb URL via Special:Redirect (works without knowing upload path) // Example: /w..."

New page

/* All JavaScript here will be loaded for users of the Timeless skin */
(function () {
function normalizeToFileTitle(val) {
if (!val) return "";
val = val.trim();
if (!val) return "";

// Allow "File:Something.png" or just "Something.png"
if (!/^File:/i.test(val)) val = "File:" + val;
return val;
}

function fileTitleToThumbUrl(fileTitle) {
// MediaWiki thumb URL via Special:Redirect (works without knowing upload path)
// Example: /wiki/Special:Redirect/file/Some.png?width=64
var name = fileTitle.replace(/^File:/i, "");
return mw.util.getUrl("Special:Redirect/file/" + name) + "?width=64";
}

function hookPageFormsImagePreview() {
// Page Forms inputs usually end up as <input name="...">
var input =
document.querySelector('input[name="image"]') ||
document.querySelector('input[name="Item[image]"]') ||
document.querySelector('input[name$="[image]"]');

var img = document.getElementById("pf-image-preview");
var txt = document.getElementById("pf-image-preview-text");
if (!input || !img || !txt) return;

function update() {
var fileTitle = normalizeToFileTitle(input.value);
if (!fileTitle) {
img.style.display = "none";
txt.style.display = "";
txt.innerHTML = "<i>No image selected.</i>";
img.removeAttribute("src");
return;
}

var url = fileTitleToThumbUrl(fileTitle);
img.onload = function () {
img.style.display = "";
txt.style.display = "none";
};
img.onerror = function () {
img.style.display = "none";
txt.style.display = "";
txt.innerHTML = "<i>Image not found.</i>";
};
img.src = url;
}

// Update while typing + when autocomplete fills
input.addEventListener("input", update);
input.addEventListener("change", update);

// Initial
update();
}

mw.hook("wikipage.content").add(function () {
// Run on formedit pages
hookPageFormsImagePreview();
});
})();