MediaWiki:Gadget-CodeHelper.js - Versionsgeschichte

Saya am 14. Februar 2026 um 14:05 Uhr

2026-02-14T14:05:04Z

← Nächstältere Version		Version vom 14. Februar 2026, 14:05 Uhr
Zeile 22:		Zeile 22:

	// --- Highlight-Funktion: Platzhalter rot, Werte blau ---		// --- Highlight-Funktion: Platzhalter rot, Werte blau ---
	function highlightPlaceholdersAndValues(code, replacements) {		function highlightPlaceholdersAndValues(code, replacements) {
	// Platzhalter rot		// Schritt 1: Platzhalter rot markieren
	let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');

	// ~~Werte~~ blau, nur außerhalb von .placeholder		// Schritt 2: Eingabewerte blau markieren, nur außerhalb von placeholder
	Object.keys(replacements).forEach(varName => {		Object.keys(replacements).forEach(varName => {
	const val = replacements[varName];		const val = replacements[varName];
	if (!val) return;		if (!val) return;

	const re = ~~new RegExp(~~val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');		const escapedVal = val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'); // RegExp escape
			const re = new RegExp(escapedVal, 'g');

	highlighted = highlighted.replace(/(?:<\/?span[^>]*>\|[^<]+)/g, ~~match~~ => {		// Wir splitten in Segmente: placeholder vs. normaler Text
	if (~~match~~.startsWith('<span class="placeholder"~~>') \|\| match.startsWith('</span~~>')) return ~~match~~;		highlighted = highlighted.replace(/(<span class="placeholder">.*?<\/span>\|[^<]+)/g, segment => {
	return ~~match~~.replace(re, `<span class="value">${val}</span>`);		if (segment.startsWith('<span class="placeholder">')) return segment; // Platzhalter unverändert
	});		return segment.replace(re, `<span class="value">${val}</span>`);
	});		});
			});

			return highlighted;
			}

	~~return highlighted;~~
	}

	// --- Dynamische Codeblöcke ---		// --- Dynamische Codeblöcke ---

Saya am 14. Februar 2026 um 14:02 Uhr

2026-02-14T14:02:13Z

← Nächstältere Version		Version vom 14. Februar 2026, 14:02 Uhr
Zeile 6:		Zeile 6:
	return;		return;
	}		}

	const textarea = document.createElement("textarea");		const textarea = document.createElement("textarea");
	textarea.value = text;		textarea.value = text;
Zeile 20:		Zeile 21:
	}		}

	// ~~Dynamische~~ Platzhalter + Werte ~~Highlight~~		// --- Highlight-Funktion: Platzhalter rot, Werte blau ---
	function highlightPlaceholdersAndValues(~~text~~, replacements) {		function highlightPlaceholdersAndValues(code, replacements) {
	let ~~html~~ = ~~text~~.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		// Platzhalter rot
	Object.keys(replacements).forEach(~~key~~ => {		let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
	const val = replacements[~~key~~];
			// Werte blau, nur außerhalb von .placeholder
			Object.keys(replacements).forEach(varName => {
			const val = replacements[varName];
	if (!val) return;		if (!val) return;
	~~// Escape für Regex~~
	const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');		const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');
	~~html~~ = ~~html~~.replace(re, `<span class="value">${val}</span>`);
			highlighted = highlighted.replace(/(?:<\/?span[^>]*>\|[^<]+)/g, match => {
			if (match.startsWith('<span class="placeholder">') \|\| match.startsWith('</span>')) return match;
			return match.replace(re, `<span class="value">${val}</span>`);
			});
	});		});
	return ~~html~~;
			return highlighted;
	}		}

			// --- Dynamische Codeblöcke ---
	function initDynamicCodeBlock(pre) {		function initDynamicCodeBlock(pre) {
	if (pre.dataset.dynamicInit) return;		if (pre.dataset.dynamicInit) return;
Zeile 38:		Zeile 48:

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

			// Alle Platzhalter {{varname}} sammeln
	const regex = /{{(\w+)}}/g;		const regex = /{{(\w+)}}/g;
	const vars = [];		const vars = [];
Zeile 64:		Zeile 76:
	container.appendChild(inputWrapper);		container.appendChild(inputWrapper);

	~~const currentValues = {};~~		// Input-Felder für Platzhalter

	vars.forEach(v => {		vars.forEach(v => {
	const lbl = document.createElement('label');		const lbl = document.createElement('label');
Zeile 76:		Zeile 87:
	const inp = document.createElement('input');		const inp = document.createElement('input');
	inp.type = 'text';		inp.type = 'text';
	inp.value = `{{${v}}}`; // Standardwert		inp.value = `{{${v}}}`; // Standardwert in Klammern
	inp.dataset.varId = v;		inp.dataset.varId = v;
	inp.style.width = '120px';		inp.style.width = '120px';
Zeile 88:		Zeile 99:
	inputWrapper.appendChild(lbl);		inputWrapper.appendChild(lbl);

	~~currentValues[v] = inp.value;~~		// Update Code bei Input

	inp.addEventListener('input', () => {		inp.addEventListener('input', () => {
	~~currentValues[v] = inp.value;~~
	let updated = originalCode;		let updated = originalCode;
	vars.forEach(~~key~~ => {		const currentValues = {};
	const val = ~~currentValues~~[~~key~~];		vars.forEach(vv => {
	updated = updated.replace(new RegExp(`{{${~~key~~}}}`, 'g'), val);		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);		pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);
Zeile 101:		Zeile 112:
	});		});

			// Copy-Button rechts
	const btn = document.createElement('button');		const btn = document.createElement('button');
	btn.textContent = '📋 Kopieren';		btn.textContent = '📋 Kopieren';
Zeile 109:		Zeile 121:
	btn.style.borderRadius = '4px';		btn.style.borderRadius = '4px';
	btn.style.background = '#eee';		btn.style.background = '#eee';
	btn.onclick = () => copyText(pre.textContent.replace(/<[^>]+>/g, ''), btn); // HTML entfernen		btn.onclick = () => copyText(pre.textContent.replace(/<[^>]+>/g, ''), btn); // HTML entfernen beim Kopieren

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

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

			// --- Statische Codeblöcke ---
	function initStaticCodeBlock(pre) {		function initStaticCodeBlock(pre) {
	if (pre.dataset.staticInit) return;		if (pre.dataset.staticInit) return;
Zeile 145:		Zeile 158:
	}		}

			// --- Initialisierung ---
	function initPage() {		function initPage() {
	document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);		document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
Zeile 155:		Zeile 169:
	initPage();		initPage();
	}		}

	mw.hook('wikipage.content').add(initPage);		mw.hook('wikipage.content').add(initPage);

	// CSS		// --- CSS für Highlight ---
	const style = document.createElement('style');		const style = document.createElement('style');
	style.textContent = `		style.textContent = `
	.placeholder { color: #d14; font-weight: bold; }		.placeholder { color: #d14; font-weight: bold; } /* rot für {{…}} */
	.value { color: #1a73e8; font-weight: bold; }		.value { color: #1a73e8; font-weight: bold; } /* blau für eingegebene Werte */
	`;		`;
	document.head.appendChild(style);		document.head.appendChild(style);

	});		});

Saya am 14. Februar 2026 um 14:00 Uhr

2026-02-14T14:00:15Z

← Nächstältere Version		Version vom 14. Februar 2026, 14:00 Uhr
Zeile 21:		Zeile 21:

	// Dynamische Platzhalter + Werte Highlight		// Dynamische Platzhalter + Werte Highlight
	function highlightPlaceholdersAndValues(~~code~~, replacements) {		function highlightPlaceholdersAndValues(text, replacements) {
	~~// Schritt 1: Platzhalter rot markieren~~		let html = text.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
	let ~~highlighted~~ = ~~code~~.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		Object.keys(replacements).forEach(key => {
			const val = replacements[key];
	~~// Schritt 2: Werte blau markieren – nur außerhalb von Platzhalter-Span~~		if (!val) return;
	Object.keys(replacements).forEach(~~varName~~ => {		// Escape für Regex
	const val = replacements[~~varName~~];		const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');
	if (!val) return;		html = html.replace(re, `<span class="value">${val}</span>`);

	// Regex ~~für den Wert, escape Sonderzeichen~~
	const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');

	~~// Highlight nur außerhalb von .placeholder~~
	~~highlighted = highlighted.replace(/(?:<\/?span[^>]*>\|[^<]+)/g, match => {~~
	~~// Nur Text ohne Tags bearbeiten~~
	~~if (match.startsWith('<span class~~=~~"placeholder">') \|\| match.startsWith('</span>')) return match;~~
	~~return match~~.replace(re, `<span class="value">${val}</span>`);
	});		});
	});		return html;
			}
	~~return highlighted;~~
	}


	function initDynamicCodeBlock(pre) {		function initDynamicCodeBlock(pre) {

Saya am 14. Februar 2026 um 13:59 Uhr

2026-02-14T13:59:10Z

← Nächstältere Version		Version vom 14. Februar 2026, 13:59 Uhr
Zeile 21:		Zeile 21:

	// Dynamische Platzhalter + Werte Highlight		// Dynamische Platzhalter + Werte Highlight
	function highlightPlaceholdersAndValues(~~text~~, replacements) {		function highlightPlaceholdersAndValues(code, replacements) {
	let ~~html~~ = ~~text~~.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		// Schritt 1: Platzhalter rot markieren
	Object.keys(replacements).forEach(~~key~~ => {		let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
	const val = replacements[~~key~~];
	if (!val) return;		// Schritt 2: Werte blau markieren – nur außerhalb von Platzhalter-Span
	// ~~Escape~~ für ~~Regex~~		Object.keys(replacements).forEach(varName => {
	const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');		const val = replacements[varName];
	~~html~~ = ~~html~~.replace(re, `<span class="value">${val}</span>`);		if (!val) return;

			// Regex für den Wert, escape Sonderzeichen
			const re = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g');

			// Highlight nur außerhalb von .placeholder
			highlighted = highlighted.replace(/(?:<\/?span[^>]*>\|[^<]+)/g, match => {
			// Nur Text ohne Tags bearbeiten
			if (match.startsWith('<span class="placeholder">') \|\| match.startsWith('</span>')) return match;
			return match.replace(re, `<span class="value">${val}</span>`);
	});		});
	return ~~html~~;		});
	}
			return highlighted;
			}


	function initDynamicCodeBlock(pre) {		function initDynamicCodeBlock(pre) {

Saya am 14. Februar 2026 um 13:54 Uhr

2026-02-14T13:54:41Z

Änderungen zeigen

Saya am 14. Februar 2026 um 13:51 Uhr

2026-02-14T13:51:48Z

← Nächstältere Version		Version vom 14. Februar 2026, 13:51 Uhr
Zeile 21:		Zeile 21:
	}		}

	function ~~highlightPlaceholdersAndValues~~(code~~, replacements~~) {		function highlightPlaceholders(code) {
	~~let highlighted =~~ code;		return code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
	~~// Platzhalter rot~~		}
	~~highlighted = highlighted~~.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');

	~~// Ersetzte Werte blau~~
	~~Object.keys(replacements).forEach(varName => {~~
	~~const val = replacements[varName];~~
	~~if (!val) return;~~
	~~const regex = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g'); // escape~~
	~~highlighted = highlighted.replace(regex, `<span class="value">${val}</span>`~~);
	});

	~~return highlighted;~~
	}


	// Dynamische Codeblöcke		// Dynamische Codeblöcke
Zeile 112:		Zeile 99:
	// Update Code bei Input		// Update Code bei Input
	container.querySelectorAll('input').forEach(input => {		container.querySelectorAll('input').forEach(input => {
	~~inp~~.addEventListener('input', () => {		input.addEventListener('input', () => {
	let updated = originalCode;		let updated = originalCode;
	~~const currentValues = {};~~		vars.forEach(v => {
	vars.forEach(v => {		const val = container.querySelector(`input[data-var-id="${v}"]`).value;
	const val = container.querySelector(`input[data-var-id="${v}"]`).value;		updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);
	updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);		});
	~~currentValues[v] = val;~~		pre.innerHTML = highlightPlaceholders(updated);
	});		});
	pre.innerHTML = ~~highlightPlaceholdersAndValues~~(updated~~, currentValues~~);
	});

	});		});
	}		}
Zeile 173:		Zeile 157:
	const style = document.createElement('style');		const style = document.createElement('style');
	style.textContent = `		style.textContent = `
	.placeholder { color: #d14; font-weight: bold; } ~~/* für {{folder}} */~~		.placeholder { color: #d14; font-weight: bold; }
	~~.value { color: #1a73e8; font-weight: bold; } /* für eingegebene Werte, z.B. tower */~~

	`;		`;
	document.head.appendChild(style);		document.head.appendChild(style);

	});		});

Saya am 14. Februar 2026 um 13:51 Uhr

2026-02-14T13:51:14Z

← Nächstältere Version		Version vom 14. Februar 2026, 13:51 Uhr
Zeile 21:		Zeile 21:
	}		}

	function ~~highlightPlaceholders~~(code) {		function highlightPlaceholdersAndValues(code, replacements) {
	~~return~~ code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');		let highlighted = code;
	}		// Platzhalter rot
			highlighted = highlighted.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');

			// Ersetzte Werte blau
			Object.keys(replacements).forEach(varName => {
			const val = replacements[varName];
			if (!val) return;
			const regex = new RegExp(val.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&'), 'g'); // escape
			highlighted = highlighted.replace(regex, `<span class="value">${val}</span>`);
			});

			return highlighted;
			}


	// Dynamische Codeblöcke		// Dynamische Codeblöcke
Zeile 99:		Zeile 112:
	// Update Code bei Input		// Update Code bei Input
	container.querySelectorAll('input').forEach(input => {		container.querySelectorAll('input').forEach(input => {
	~~input~~.addEventListener('input', () => {		inp.addEventListener('input', () => {
	let updated = originalCode;		let updated = originalCode;
	vars.forEach(v => {		const currentValues = {};
	const val = container.querySelector(`input[data-var-id="${v}"]`).value;		vars.forEach(v => {
	updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);		const val = container.querySelector(`input[data-var-id="${v}"]`).value;
	});		updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);
	pre.innerHTML = ~~highlightPlaceholders~~(updated);		currentValues[v] = val;
	});		});
			pre.innerHTML = highlightPlaceholdersAndValues(updated, currentValues);
			});

	});		});
	}		}
Zeile 157:		Zeile 173:
	const style = document.createElement('style');		const style = document.createElement('style');
	style.textContent = `		style.textContent = `
	.placeholder { color: #d14; font-weight: bold; }		.placeholder { color: #d14; font-weight: bold; } /* für {{folder}} */
			.value { color: #1a73e8; font-weight: bold; } /* für eingegebene Werte, z.B. tower */

	`;		`;
	document.head.appendChild(style);		document.head.appendChild(style);

	});		});

Saya am 14. Februar 2026 um 13:43 Uhr

2026-02-14T13:43:22Z

← Nächstältere Version		Version vom 14. Februar 2026, 13:43 Uhr
Zeile 112:		Zeile 112:
	// Statische Codeblöcke		// Statische Codeblöcke
	function initStaticCodeBlock(pre) {		function initStaticCodeBlock(pre) {
	if (pre.dataset.staticInit) return;		if (pre.dataset.staticInit) return;
	pre.dataset.staticInit = true;		pre.dataset.staticInit = true;

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

	~~const btn = document.createElement('button');~~		// Container anstelle des Pre einsetzen
	~~btn.textContent = '📋 Kopieren';~~		pre.parentNode.replaceChild(container, pre);
	~~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);		// Pre in Container einfügen
	~~pre~~.~~parentNode~~.~~insertBefore~~(~~container~~, ~~pre~~);		container.appendChild(pre);
	}
			// Kopier-Button rechts oben
			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);
			}

	function initPage() {		function initPage() {

Saya am 14. Februar 2026 um 13:40 Uhr

2026-02-14T13:40:40Z

Änderungen zeigen

Saya am 14. Februar 2026 um 13:38 Uhr

2026-02-14T13:38:59Z

← Nächstältere Version		Version vom 14. Februar 2026, 13:38 Uhr
Zeile 106:		Zeile 106:

	function initStaticCodeBlock(pre) {		function initStaticCodeBlock(pre) {
	if (pre.dataset.staticInit) return;		if (pre.dataset.staticInit) return;
	pre.dataset.staticInit = true;		pre.dataset.staticInit = true;

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

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

	container.appendChild(btn);		container.appendChild(btn);
	container.appendChild(pre);		container.appendChild(pre); // <pre> hier anhängen
	pre.parentNode.insertBefore(container, pre);
	}		// Jetzt den Container anstelle des originalen <pre> einsetzen
			pre.parentNode.insertBefore(container, pre);
			}

	function initPage() {		function initPage() {