MediaWiki:Gadget-GlobalVariables.js: Unterschied zwischen den Versionen

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

    const globalVars = {};
    const seenVars = new Set();
    const variableBlocks = {};

    // Leiste oben als flex-Container
    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);

    // Button "Auf alle anwenden" rechts
    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'; // <-- hier sitzt er rechts

    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';
        inp.value = defaultValue;
        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);

        // Eingaben sofort in globale Vars übertragen
        inp.addEventListener('input', () => {
            globalVars[varName] = inp.value;
        });

        // Füge Label links ein, Button sitzt automatisch rechts
        bar.insertBefore(lbl, applyAllBtn);
    }

    // Alle dynamischen Codeblöcke 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; // Standardwert = Name selbst
            addVarOnce(varName, defaultValue);

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

    // Button-Event für alle Variablen
    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);

                // lokale Inputs in den Codeblöcken synchronisieren
                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));
});