MediaWiki:Gadget-CodeGenerator.js - Versionsgeschichte

Saya am 14. Februar 2026 um 17:24 Uhr

2026-02-14T17:24:45Z

Änderungen zeigen

Saya am 14. Februar 2026 um 17:22 Uhr

2026-02-14T17:22:58Z

Änderungen zeigen

Saya am 14. Februar 2026 um 17:18 Uhr

2026-02-14T17:18:11Z

Änderungen zeigen

Saya am 14. Februar 2026 um 17:17 Uhr

2026-02-14T17:17:01Z

Änderungen zeigen

Saya am 14. Februar 2026 um 17:15 Uhr

2026-02-14T17:15:16Z

Änderungen zeigen

Saya am 14. Februar 2026 um 14:33 Uhr

2026-02-14T14:33:47Z

← Nächstältere Version		Version vom 14. Februar 2026, 14:33 Uhr
Zeile 6:		Zeile 6:
	const variableBlocks = {};		const variableBlocks = {};

			// Leiste oben
	const bar = document.createElement('div');		const bar = document.createElement('div');
	bar.id = 'global-var-bar';		bar.id = 'global-var-bar';
Zeile 47:		Zeile 48:
	const inp = document.createElement('input');		const inp = document.createElement('input');
	inp.type = 'text';		inp.type = 'text';

	~~// Nur beim ersten Laden Klammern setzen~~
	let initialValue = defaultValue.startsWith('{{') ? defaultValue : `{{${defaultValue}}}`;		let initialValue = defaultValue.startsWith('{{') ? defaultValue : `{{${defaultValue}}}`;
	inp.value = initialValue;		inp.value = initialValue;

	inp.dataset.varId = varName;		inp.dataset.varId = varName;
	inp.style.width = '120px';		inp.style.width = '120px';
Zeile 61:		Zeile 59:
	lbl.appendChild(inp);		lbl.appendChild(inp);

			// Globale Variable sofort aktualisieren, ohne Klammern zu erzwingen
	inp.addEventListener('input', () => {		inp.addEventListener('input', () => {
	~~// Nur reiner Wert speichern, keine Klammern mehr ergänzen~~
	globalVars[varName] = inp.value;		globalVars[varName] = inp.value;
	});		});
Zeile 91:		Zeile 89:
	function highlightPlaceholdersAndValues(code, replacements) {		function highlightPlaceholdersAndValues(code, replacements) {
	let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');

	Object.keys(replacements).forEach(varName => {		Object.keys(replacements).forEach(varName => {
	const val = replacements[varName];		const val = replacements[varName];
Zeile 103:		Zeile 100:
	});		});
	});		});

	return highlighted;		return highlighted;
	}		}
Zeile 113:		Zeile 109:

	const originalCode = pre.textContent;		const originalCode = pre.textContent;
			pre.dataset.originalCode = originalCode;

	const regex = /{{(\w+)}}/g;		const regex = /{{(\w+)}}/g;
	const vars = [];		const vars = [];
Zeile 162:		Zeile 160:

	inp.addEventListener('input', () => {		inp.addEventListener('input', () => {
	~~let updated = originalCode;~~
	const currentValues = {};		const currentValues = {};
			let updated = pre.dataset.originalCode;
	vars.forEach(vv => {		vars.forEach(vv => {
	const val = inputWrapper.querySelector(`input[data-var-id="${vv}"]`).value;		const val = inputWrapper.querySelector(`input[data-var-id="${vv}"]`).value;
Zeile 218:		Zeile 216:
	}		}

	// --- Init ---		// --- Init-Seite ---
	function initPage() {		function initPage() {
	document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);		document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
Zeile 229:		Zeile 227:
	while ((match = regex.exec(pre.textContent)) !== null) {		while ((match = regex.exec(pre.textContent)) !== null) {
	const varName = match[1];		const varName = match[1];
	~~const defaultValue = varName;~~		addVarOnce(varName, varName);
	addVarOnce(varName, ~~defaultValue~~);

	if (!variableBlocks[varName]) variableBlocks[varName] = [];		if (!variableBlocks[varName]) variableBlocks[varName] = [];
Zeile 253:		Zeile 250:
	document.head.appendChild(style);		document.head.appendChild(style);

	// ~~Button "~~Auf alle anwenden"		// --- Auf alle anwenden ---
	applyAllBtn.onclick = () => {		applyAllBtn.onclick = () => {
	Object.keys(globalVars).forEach(name => {		Object.keys(globalVars).forEach(name => {
	const val = globalVars[name];		const val = globalVars[name];
	const blocks = variableBlocks[name] \|\| [];		const blocks = variableBlocks[name] \|\| [];
	blocks.forEach(pre => {		blocks.forEach(pre => {
	// ~~Text ersetzen~~		// Basis-Originalcode
	let updated = pre.~~textContent~~.replace(new RegExp(`{{${name}}}`, 'g'), val);		let updated = pre.dataset.originalCode.replace(new RegExp(`{{${name}}}`, 'g'), val);

	// ~~Alle~~ Inputs ~~in diesem~~ Block synchronisieren		// Inputs im Block synchronisieren
	const container = pre.previousSibling;		const container = pre.previousSibling;
	if (container && container.querySelector) {		if (container && container.querySelector) {
	const localInp = container.querySelector(`input[data-var-id="${name}"]`);		const localInp = container.querySelector(`input[data-var-id="${name}"]`);
	if (localInp) localInp.value = val;		if (localInp) localInp.value = val;
	}		}

	// Highlight ~~aktualisieren~~		// Highlight mit allen aktuellen Input-Werten
	const currentValues = {};		const currentValues = {};
	const regex = /{{(\w+)}}/g;		const regex = /{{(\w+)}}/g;
	let match;		let match;
	while ((match = regex.exec(~~updated~~)) !== null) {		while ((match = regex.exec(pre.dataset.originalCode)) !== null) {
	const varName2 = match[1];		const varName2 = match[1];
	const container2 = pre.previousSibling;		const container2 = pre.previousSibling;
	if (container2 && container2.querySelector) {		if (container2 && container2.querySelector) {
	const inp2 = container2.querySelector(`input[data-var-id="${varName2}"]`);		const inp2 = container2.querySelector(`input[data-var-id="${varName2}"]`);
	if (inp2) currentValues[varName2] = inp2.value;		if (inp2) currentValues[varName2] = inp2.value;
			}
	}		}
	}

	pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);		pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);
			});
	});		});
	});		};
	};


	console.log('Globale Variablenleiste initialisiert:', Array.from(seenVars));		console.log('Globale Variablenleiste initialisiert:', Array.from(seenVars));
	});		});

Saya am 14. Februar 2026 um 14:30 Uhr

2026-02-14T14:30:29Z

← Nächstältere Version		Version vom 14. Februar 2026, 14:30 Uhr
Zeile 255:		Zeile 255:
	// Button "Auf alle anwenden"		// Button "Auf alle anwenden"
	applyAllBtn.onclick = () => {		applyAllBtn.onclick = () => {
	Object.keys(globalVars).forEach(name => {		Object.keys(globalVars).forEach(name => {
	const val = globalVars[name];		const val = globalVars[name];
	const blocks = variableBlocks[name] \|\| [];		const blocks = variableBlocks[name] \|\| [];
	blocks.forEach(pre => {		blocks.forEach(pre => {
	~~pre.textContent~~ = pre.textContent.replace(new RegExp(`{{${name}}}`, 'g'), val);		// Text ersetzen
			let updated = pre.textContent.replace(new RegExp(`{{${name}}}`, 'g'), val);

	const container = pre.previousSibling;		// Alle Inputs in diesem Block synchronisieren
	if (container && container.querySelector) {		const container = pre.previousSibling;
	const localInp = container.querySelector(`input[data-var-id="${name}"]`);		if (container && container.querySelector) {
	if (localInp) localInp.value = val;		const localInp = container.querySelector(`input[data-var-id="${name}"]`);
			if (localInp) localInp.value = val;
			}

			// Highlight aktualisieren
			const currentValues = {};
			const regex = /{{(\w+)}}/g;
			let match;
			while ((match = regex.exec(updated)) !== null) {
			const varName2 = match[1];
			const container2 = pre.previousSibling;
			if (container2 && container2.querySelector) {
			const inp2 = container2.querySelector(`input[data-var-id="${varName2}"]`);
			if (inp2) currentValues[varName2] = inp2.value;
	}		}
	});		}

			pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);
	});		});
	};		});
			};


	console.log('Globale Variablenleiste initialisiert:', Array.from(seenVars));		console.log('Globale Variablenleiste initialisiert:', Array.from(seenVars));
	});		});

Saya: Die Seite wurde neu angelegt: „mw.loader.using(['mediawiki.util']).then(function () { // --- Globale Variablen --- const globalVars = {}; const seenVars = new Set(); const variableBlocks = {}; const bar = document.createElement('div'); bar.id = 'global-var-bar'; bar.style.display = 'flex'; bar.style.flexWrap = 'wrap'; bar.style.alignItems = 'center'; bar.style.gap = '8px'; bar.style.padding = '8px'; bar.style.border = '1px solid #bbb';…“

2026-02-14T14:26:09Z

Die Seite wurde neu angelegt: „mw.loader.using(['mediawiki.util']).then(function () { // --- Globale Variablen --- const globalVars = {}; const seenVars = new Set(); const variableBlocks = {}; const bar = document.createElement('div'); bar.id = 'global-var-bar'; bar.style.display = 'flex'; bar.style.flexWrap = 'wrap'; bar.style.alignItems = 'center'; bar.style.gap = '8px'; bar.style.padding = '8px'; bar.style.border = '1px solid #bbb';…“

Neue Seite

mw.loader.using(['mediawiki.util']).then(function () {

// --- Globale Variablen ---
const globalVars = {};
const seenVars = new Set();
const variableBlocks = {};

const bar = document.createElement('div');
bar.id = 'global-var-bar';
bar.style.display = 'flex';
bar.style.flexWrap = 'wrap';
bar.style.alignItems = 'center';
bar.style.gap = '8px';
bar.style.padding = '8px';
bar.style.border = '1px solid #bbb';
bar.style.borderRadius = '6px';
bar.style.background = '#f5f5f5';
bar.style.marginBottom = '12px';
document.querySelector('#content').prepend(bar);

const applyAllBtn = document.createElement('button');
applyAllBtn.textContent = '→ Auf alle anwenden';
applyAllBtn.style.padding = '4px 8px';
applyAllBtn.style.cursor = 'pointer';
applyAllBtn.style.border = '1px solid #888';
applyAllBtn.style.borderRadius = '4px';
applyAllBtn.style.background = '#eee';
applyAllBtn.style.marginLeft = 'auto';
bar.appendChild(applyAllBtn);

function addVarOnce(varName, defaultValue = '') {
if (seenVars.has(varName)) return;
seenVars.add(varName);

globalVars[varName] = defaultValue;

const lbl = document.createElement('label');
lbl.style.display = 'flex';
lbl.style.flexDirection = 'column';
lbl.style.fontSize = '12px';
lbl.style.color = '#333';

const span = document.createElement('span');
span.textContent = varName + ':';
lbl.appendChild(span);

const inp = document.createElement('input');
inp.type = 'text';

// Nur beim ersten Laden Klammern setzen
let initialValue = defaultValue.startsWith('{{') ? defaultValue : `{{${defaultValue}}}`;
inp.value = initialValue;

inp.dataset.varId = varName;
inp.style.width = '120px';
inp.style.padding = '2px 4px';
inp.style.border = '1px solid #ccc';
inp.style.borderRadius = '4px';
inp.style.fontFamily = 'monospace';
inp.style.fontSize = '12px';
lbl.appendChild(inp);

inp.addEventListener('input', () => {
// Nur reiner Wert speichern, keine Klammern mehr ergänzen
globalVars[varName] = inp.value;
});

bar.insertBefore(lbl, applyAllBtn);
}

// --- Copy-Funktion ---
function copyText(text, btn) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text.replace(/<[^>]+>/g, '')).then(() => success());
} else {
const textarea = document.createElement("textarea");
textarea.value = text.replace(/<[^>]+>/g, '');
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
success();
}
function success() {
btn.textContent = "✅ Kopiert!";
setTimeout(() => btn.textContent = "📋 Kopieren", 1500);
}
}

// --- Highlight-Funktion ---
function highlightPlaceholdersAndValues(code, replacements) {
let highlighted = code.replace(/{{(\w+)}}/g, '{{$1}}');

Object.keys(replacements).forEach(varName => {
const val = replacements[varName];
if (!val) return;
const escapedVal = val.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const re = new RegExp(escapedVal, 'g');

highlighted = highlighted.replace(/(.*?<\/span>|[^<]+)/g, segment => {
if (segment.startsWith('')) return segment;
return segment.replace(re, `${val}`);
});
});

return highlighted;
}

// --- Dynamische Codeblöcke ---
function initDynamicCodeBlock(pre) {
if (pre.dataset.dynamicInit) return;
pre.dataset.dynamicInit = true;

const originalCode = pre.textContent;
const regex = /{{(\w+)}}/g;
const vars = [];
let match;
while ((match = regex.exec(originalCode)) !== null) {
if (!vars.includes(match[1])) vars.push(match[1]);
}
if (vars.length === 0) return;

const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexWrap = 'wrap';
container.style.alignItems = 'center';
container.style.justifyContent = 'space-between';
container.style.gap = '6px';
container.style.marginBottom = '4px';
container.style.padding = '4px 6px';
container.style.border = '1px solid #ddd';
container.style.borderRadius = '6px';
container.style.background = '#f5f5f5';

const inputWrapper = document.createElement('div');
inputWrapper.style.display = 'flex';
inputWrapper.style.flexWrap = 'wrap';
inputWrapper.style.gap = '6px';
container.appendChild(inputWrapper);

vars.forEach(v => {
const lbl = document.createElement('label');
lbl.style.display = 'flex';
lbl.style.flexDirection = 'column';
lbl.style.fontSize = '12px';
lbl.style.color = '#333';
lbl.textContent = v;

const inp = document.createElement('input');
inp.type = 'text';
inp.value = `{{${v}}}`;
inp.dataset.varId = v;
inp.style.width = '120px';
inp.style.padding = '2px 4px';
inp.style.border = '1px solid #ccc';
inp.style.borderRadius = '4px';
inp.style.fontFamily = 'monospace';
inp.style.fontSize = '12px';

lbl.appendChild(inp);
inputWrapper.appendChild(lbl);

inp.addEventListener('input', () => {
let updated = originalCode;
const currentValues = {};
vars.forEach(vv => {
const val = inputWrapper.querySelector(`input[data-var-id="${vv}"]`).value;
updated = updated.replace(new RegExp(`{{${vv}}}`, 'g'), val);
currentValues[vv] = val;
});
pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);
});
});

const btn = document.createElement('button');
btn.textContent = '📋 Kopieren';
btn.style.padding = '2px 6px';
btn.style.fontSize = '12px';
btn.style.cursor = 'pointer';
btn.style.border = '1px solid #888';
btn.style.borderRadius = '4px';
btn.style.background = '#eee';
btn.onclick = () => copyText(pre.innerHTML, btn);

container.appendChild(btn);
pre.parentNode.insertBefore(container, pre);

// Initial Highlight
pre.innerHTML = highlightPlaceholdersAndValues(originalCode, {});
}

// --- Statische Codeblöcke ---
function initStaticCodeBlock(pre) {
if (pre.dataset.staticInit) return;
pre.dataset.staticInit = true;

const container = document.createElement('div');
container.style.position = 'relative';
container.style.marginBottom = '6px';

pre.parentNode.replaceChild(container, pre);
container.appendChild(pre);

const btn = document.createElement('button');
btn.textContent = '📋 Kopieren';
btn.style.position = 'absolute';
btn.style.top = '4px';
btn.style.right = '4px';
btn.style.padding = '2px 6px';
btn.style.fontSize = '12px';
btn.style.cursor = 'pointer';
btn.style.border = '1px solid #888';
btn.style.borderRadius = '4px';
btn.style.background = '#eee';
btn.onclick = () => copyText(pre.textContent, btn);

container.appendChild(btn);
}

// --- Init ---
function initPage() {
document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
document.querySelectorAll('pre.static-code').forEach(initStaticCodeBlock);

// Globale Variablen initialisieren
document.querySelectorAll('pre.dynamic-code').forEach(pre => {
const regex = /{{(\w+)}}/g;
let match;
while ((match = regex.exec(pre.textContent)) !== null) {
const varName = match[1];
const defaultValue = varName;
addVarOnce(varName, defaultValue);

if (!variableBlocks[varName]) variableBlocks[varName] = [];
variableBlocks[varName].push(pre);
}
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initPage);
} else {
initPage();
}
mw.hook('wikipage.content').add(initPage);

// --- CSS ---
const style = document.createElement('style');
style.textContent = `
.placeholder { color: #d14; font-weight: bold; }
.value { color: #1a73e8; font-weight: bold; }
`;
document.head.appendChild(style);

// Button "Auf alle anwenden"
applyAllBtn.onclick = () => {
Object.keys(globalVars).forEach(name => {
const val = globalVars[name];
const blocks = variableBlocks[name] || [];
blocks.forEach(pre => {
pre.textContent = pre.textContent.replace(new RegExp(`{{${name}}}`, 'g'), val);

const container = pre.previousSibling;
if (container && container.querySelector) {
const localInp = container.querySelector(`input[data-var-id="${name}"]`);
if (localInp) localInp.value = val;
}
});
});
};

console.log('Globale Variablenleiste initialisiert:', Array.from(seenVars));
});