|
|
| Zeile 1: |
Zeile 1: |
| mw.loader.using(['mediawiki.util']).then(function () {
| | alert('Gadget aktiv!'); |
| | |
| const globalVars = {}; // speichert alle globalen Variablen
| |
| const variableBlocks = {}; // speichert die Blocks, die jede Variable nutzen
| |
| | |
| function copyText(text, btn) {
| |
| if (navigator.clipboard && window.isSecureContext) {
| |
| navigator.clipboard.writeText(text).then(success);
| |
| return;
| |
| }
| |
| | |
| const textarea = document.createElement("textarea");
| |
| textarea.value = text;
| |
| document.body.appendChild(textarea);
| |
| textarea.select();
| |
| document.execCommand("copy");
| |
| document.body.removeChild(textarea);
| |
| success();
| |
| | |
| function success() {
| |
| btn.textContent = "✅ Kopiert!";
| |
| setTimeout(() => btn.textContent = "📋 Kopieren", 1500);
| |
| }
| |
| }
| |
| | |
| // --- Globale Leiste ---
| |
| function createGlobalVarBar() {
| |
| const bar = document.createElement('div');
| |
| bar.id = 'global-var-bar';
| |
| bar.style.display = 'flex';
| |
| bar.style.flexWrap = 'wrap';
| |
| 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);
| |
| | |
| function addOrUpdateVar(name) {
| |
| let lbl = bar.querySelector(`label[data-var-name="${name}"]`);
| |
| if (!lbl) {
| |
| lbl = document.createElement('label');
| |
| lbl.dataset.varName = name;
| |
| lbl.style.display = 'flex';
| |
| lbl.style.flexDirection = 'column';
| |
| lbl.style.fontSize = '12px';
| |
| lbl.style.color = '#333';
| |
| lbl.textContent = name;
| |
| | |
| const inp = document.createElement('input');
| |
| inp.type = 'text';
| |
| inp.value = globalVars[name] ?? name;
| |
| inp.dataset.varId = name;
| |
| 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';
| |
| | |
| inp.addEventListener('input', () => {
| |
| globalVars[name] = inp.value;
| |
| updateAllBlocks(name);
| |
| });
| |
| | |
| lbl.appendChild(inp);
| |
| bar.appendChild(lbl);
| |
| } else {
| |
| const inp = lbl.querySelector('input');
| |
| if (inp.value !== globalVars[name]) inp.value = globalVars[name];
| |
| }
| |
| }
| |
| | |
| return { addOrUpdateVar };
| |
| }
| |
| | |
| const globalBar = createGlobalVarBar();
| |
| | |
| // --- Dynamischer Codeblock ---
| |
| 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;
| |
| | |
| // Copy Button
| |
| const btn = document.createElement('button');
| |
| btn.textContent = '📋 Kopieren';
| |
| btn.style.marginTop = '4px';
| |
| btn.style.padding = '4px 8px';
| |
| 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);
| |
| pre.parentNode.insertBefore(btn, pre);
| |
| | |
| // Lokale Input-Leiste im Block
| |
| const localContainer = document.createElement('div');
| |
| localContainer.style.marginBottom = '4px';
| |
| pre.parentNode.insertBefore(localContainer, pre);
| |
| | |
| vars.forEach(v => {
| |
| globalBar.addOrUpdateVar(v);
| |
| | |
| // Block registrieren
| |
| if (!variableBlocks[v]) variableBlocks[v] = [];
| |
| variableBlocks[v].push(pre);
| |
| | |
| globalVars[v] = globalVars[v] ?? v;
| |
| | |
| // Lokales Input
| |
| const lbl = document.createElement('label');
| |
| lbl.style.marginRight = '6px';
| |
| lbl.style.fontSize = '12px';
| |
| lbl.textContent = v + ': ';
| |
| | |
| const inp = document.createElement('input');
| |
| inp.type = 'text';
| |
| inp.value = globalVars[v];
| |
| inp.dataset.varId = v;
| |
| inp.style.width = '100px';
| |
| inp.style.padding = '2px 4px';
| |
| inp.style.fontFamily = 'monospace';
| |
| inp.style.fontSize = '12px';
| |
| inp.style.marginRight = '8px';
| |
| | |
| inp.addEventListener('input', () => {
| |
| globalVars[v] = inp.value;
| |
| updateAllBlocks(v);
| |
| });
| |
| | |
| lbl.appendChild(inp);
| |
| localContainer.appendChild(lbl);
| |
| });
| |
| | |
| // Initial update
| |
| updateAllBlocks();
| |
| }
| |
| | |
| // --- Statischer Codeblock ---
| |
| function initStaticCodeBlock(pre) {
| |
| if (pre.dataset.staticInit) return;
| |
| pre.dataset.staticInit = true;
| |
| | |
| const btn = document.createElement('button');
| |
| btn.textContent = '📋 Kopieren';
| |
| btn.style.margin = '4px 0';
| |
| btn.style.padding = '4px 8px';
| |
| 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);
| |
| | |
| pre.parentNode.insertBefore(btn, pre);
| |
| }
| |
| | |
| // --- Update aller Blöcke ---
| |
| function updateAllBlocks(varName) {
| |
| Object.keys(variableBlocks).forEach(name => {
| |
| if (varName && name !== varName) return;
| |
| variableBlocks[name].forEach(pre => {
| |
| let updated = pre.textContent;
| |
| updated = updated.replace(new RegExp(`{{${name}}}`, 'g'), globalVars[name]);
| |
| pre.textContent = updated;
| |
| | |
| // Sync lokale Input-Felder
| |
| const container = pre.previousSibling;
| |
| if (container && container.querySelectorAll) {
| |
| const inp = container.querySelector(`input[data-var-id="${name}"]`);
| |
| if (inp && inp.value !== globalVars[name]) inp.value = globalVars[name];
| |
| }
| |
| });
| |
| });
| |
| | |
| // Sync globale Leiste
| |
| Object.keys(globalVars).forEach(name => {
| |
| const inp = document.querySelector(`#global-var-bar input[data-var-id="${name}"]`);
| |
| if (inp && inp.value !== globalVars[name]) inp.value = globalVars[name];
| |
| });
| |
| }
| |
| | |
| // --- Initialisierung ---
| |
| function initPage() {
| |
| document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
| |
| document.querySelectorAll('pre.static-code').forEach(initStaticCodeBlock);
| |
| }
| |
| | |
| initPage();
| |
| mw.hook('wikipage.content').add(initPage);
| |
| | |
| });
| |
