MediaWiki:Gadget-CodeGenerator.js
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
mw.loader.using(['mediawiki.util']).then(function () {
// --- Globale Variablen ---
const globalVars = {};
const seenVars = new Set();
const variableBlocks = {};
// Leiste oben - Initial versteckt
const bar = document.createElement('div');
bar.id = 'global-var-bar';
bar.style.cssText = `
display: none;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
padding: 16px;
border: 1px solid #a2a9b1;
border-radius: 2px;
background-color: #f8f9fa;
margin-bottom: 16px;
box-shadow: inset 0 0 0 1px #fff;
`;
// Überschrift für die Leiste
const title = document.createElement('div');
title.style.cssText = 'width: 100%; font-weight: bold; margin-bottom: 8px; color: #202122; font-family: sans-serif; font-size: 14px;';
title.textContent = 'Globale Variablen für Code-Blöcke:';
bar.appendChild(title);
document.querySelector('#content').prepend(bar);
const applyAllBtn = document.createElement('button');
applyAllBtn.textContent = 'Auf alle anwenden';
applyAllBtn.style.cssText = `
padding: 6px 12px;
cursor: pointer;
border: 1px solid #36c;
border-radius: 2px;
background: #36c;
color: #fff;
font-weight: bold;
font-size: 13px;
margin-left: auto;
transition: background 0.2s;
`;
applyAllBtn.onmouseover = () => applyAllBtn.style.background = '#447ff5';
applyAllBtn.onmouseout = () => applyAllBtn.style.background = '#36c';
bar.appendChild(applyAllBtn);
function addVarOnce(varName, defaultValue = '') {
// Sobald eine Variable hinzugefügt wird, Leiste anzeigen
bar.style.display = 'flex';
if (seenVars.has(varName)) return;
seenVars.add(varName);
const formattedValue = defaultValue.startsWith('{{') ? defaultValue : `{{${defaultValue}}}`;
globalVars[varName] = formattedValue;
const lbl = document.createElement('label');
lbl.style.cssText = 'display:flex; flex-direction:column; font-size:13px; color:#202122; font-family:sans-serif; font-weight: bold;';
const span = document.createElement('span');
span.textContent = varName;
span.style.marginBottom = '4px';
lbl.appendChild(span);
const inp = document.createElement('input');
inp.type = 'text';
inp.value = formattedValue;
inp.dataset.varId = varName;
inp.style.cssText = `
width: 140px;
padding: 4px 8px;
border: 1px solid #a2a9b1;
border-radius: 2px;
font-family: monospace;
font-size: 13px;
font-weight: normal;
`;
// Fokus-Effekt wie bei MediaWiki
inp.onfocus = () => inp.style.borderColor = '#36c';
inp.onblur = () => inp.style.borderColor = '#a2a9b1';
lbl.appendChild(inp);
inp.addEventListener('input', () => {
globalVars[varName] = inp.value;
});
bar.insertBefore(lbl, applyAllBtn);
}
// --- Hilfsfunktionen (Copy & Highlight) ---
function copyText(text, btn) {
const plainText = text.replace(/<[^>]+>/g, '');
const success = () => {
const originalText = btn.textContent;
btn.textContent = "✅ Kopiert!";
btn.style.background = "#d5fdf4";
btn.style.borderColor = "#14866d";
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = "#eee";
btn.style.borderColor = "#888";
}, 1500);
};
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(plainText).then(success);
} else {
const textarea = document.createElement("textarea");
textarea.value = plainText;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
success();
}
}
function highlightPlaceholdersAndValues(code, replacements) {
let highlighted = code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
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 class="placeholder">.*?<\/span>|[^<]+)/g, segment => {
if (segment.startsWith('<span class="placeholder">')) return segment;
return segment.replace(re, `<span class="value">${val}</span>`);
});
});
return highlighted;
}
// --- Block Initialisierung ---
function updateBlockContent(pre, inputWrapper, varsInBlock) {
const currentValues = {};
let updated = pre.dataset.originalCode;
varsInBlock.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);
}
function initDynamicCodeBlock(pre) {
if (pre.dataset.dynamicInit) return;
pre.dataset.dynamicInit = true;
const originalCode = pre.textContent;
pre.dataset.originalCode = originalCode;
const regex = /{{(\w+)}}/g;
const varsInBlock = [];
let match;
while ((match = regex.exec(originalCode)) !== null) {
if (!varsInBlock.includes(match[1])) varsInBlock.push(match[1]);
}
if (varsInBlock.length === 0) return;
const container = document.createElement('div');
container.style.cssText = 'display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:0; padding:8px 12px; border:1px solid #a2a9b1; border-bottom:none; border-radius:2px 2px 0 0; background:#f8f9fa;';
const inputWrapper = document.createElement('div');
inputWrapper.style.cssText = 'display:flex; flex-wrap:wrap; gap:10px;';
container.appendChild(inputWrapper);
varsInBlock.forEach(v => {
const lbl = document.createElement('label');
lbl.style.cssText = 'display:flex; align-items:center; gap:6px; font-size:12px; font-family:sans-serif; color: #54595d;';
lbl.textContent = v + ':';
const inp = document.createElement('input');
inp.type = 'text';
inp.value = `{{${v}}}`;
inp.dataset.varId = v;
inp.style.cssText = 'width:110px; padding:2px 4px; border:1px solid #a2a9b1; border-radius:2px; font-family:monospace; font-size:12px;';
lbl.appendChild(inp);
inputWrapper.appendChild(lbl);
inp.addEventListener('input', () => updateBlockContent(pre, inputWrapper, varsInBlock));
});
const btn = document.createElement('button');
btn.textContent = '📋 Kopieren';
btn.style.cssText = 'padding:4px 8px; font-size:12px; cursor:pointer; border:1px solid #a2a9b1; border-radius:2px; background:#eee;';
btn.onclick = () => copyText(pre.innerHTML, btn);
container.appendChild(btn);
pre.parentNode.insertBefore(container, pre);
// Den Code-Block selbst etwas stylen, damit er zum Header passt
pre.style.marginTop = '0';
pre.style.borderRadius = '0 0 2px 2px';
pre.innerHTML = highlightPlaceholdersAndValues(originalCode, {});
}
function initStaticCodeBlock(pre) {
if (pre.dataset.staticInit) return;
pre.dataset.staticInit = true;
const container = document.createElement('div');
container.style.position = 'relative';
pre.parentNode.replaceChild(container, pre);
container.appendChild(pre);
const btn = document.createElement('button');
btn.textContent = '📋 Kopieren';
btn.style.cssText = 'position:absolute; top:8px; right:8px; padding:4px 8px; font-size:12px; cursor:pointer; border:1px solid #a2a9b1; border-radius:2px; background:rgba(238,238,238,0.8);';
btn.onclick = () => copyText(pre.textContent, btn);
container.appendChild(btn);
}
// --- Init-Seite ---
function initPage() {
const dynamicBlocks = document.querySelectorAll('pre.dynamic-code');
const staticBlocks = document.querySelectorAll('pre.static-code');
dynamicBlocks.forEach(initDynamicCodeBlock);
staticBlocks.forEach(initStaticCodeBlock);
dynamicBlocks.forEach(pre => {
const regex = /{{(\w+)}}/g;
let match;
while ((match = regex.exec(pre.dataset.originalCode || pre.textContent)) !== null) {
const varName = match[1];
addVarOnce(varName, varName);
if (!variableBlocks[varName]) variableBlocks[varName] = [];
if (!variableBlocks[varName].includes(pre)) variableBlocks[varName].push(pre);
}
});
}
// Start
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initPage);
} else {
initPage();
}
mw.hook('wikipage.content').add(initPage);
// CSS für Syntax-Highlighting
const style = document.createElement('style');
style.textContent = `
.placeholder { color: #d33; font-weight: bold; background: #fee; padding: 0 2px; }
.value { color: #36c; font-weight: bold; background: #eaf3ff; padding: 0 2px; border-radius: 2px; }
pre.dynamic-code, pre.static-code { border: 1px solid #a2a9b1; background-color: #ffffff; padding: 1em; overflow: auto; }
`;
document.head.appendChild(style);
// --- Auf alle anwenden Logik ---
applyAllBtn.onclick = () => {
const allPreBlocks = new Set();
Object.values(variableBlocks).forEach(list => list.forEach(p => allPreBlocks.add(p)));
allPreBlocks.forEach(pre => {
const container = pre.previousSibling;
if (!container || !container.querySelector) return;
const varsInBlock = [];
const regex = /{{(\w+)}}/g;
let match;
while ((match = regex.exec(pre.dataset.originalCode)) !== null) {
if (!varsInBlock.includes(match[1])) varsInBlock.push(match[1]);
}
varsInBlock.forEach(vName => {
const localInp = container.querySelector(`input[data-var-id="${vName}"]`);
if (localInp && globalVars[vName] !== undefined) {
localInp.value = globalVars[vName];
}
});
updateBlockContent(pre, container, varsInBlock);
});
};
});