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

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

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

    // Leiste oben
    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';
        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);

        // Globale Variable sofort aktualisieren, ohne Klammern zu erzwingen
        inp.addEventListener('input', () => {
            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, '<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;
    }

    // --- Dynamische Codeblöcke ---
    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 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', () => {
                const currentValues = {};
                let updated = pre.dataset.originalCode;
                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-Seite ---
    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];
                addVarOnce(varName, varName);

                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);

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

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

                // Highlight mit allen aktuellen Input-Werten
                const currentValues = {};
                const regex = /{{(\w+)}}/g;
                let match;
                while ((match = regex.exec(pre.dataset.originalCode)) !== 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));
});