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

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

    const globalVars = {};       // speichert alle globalen Variablen
    const variableBlocks = {};   // speichert alle Blöcke, 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 oben ---
    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();

    // --- Dynamische Codeblöcke ---
    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;

        // Container für lokale Inputs
        const localContainer = document.createElement('div');
        localContainer.style.display = 'flex';
        localContainer.style.flexWrap = 'wrap';
        localContainer.style.alignItems = 'center';
        localContainer.style.gap = '6px';
        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 (optional)
            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);
        });

        // Scrollbarer Container + Kopierbutton oben rechts
        const wrapper = document.createElement('div');
        wrapper.style.position = 'relative';
        wrapper.style.border = '1px solid #ccc';
        wrapper.style.borderRadius = '6px';
        wrapper.style.overflow = 'auto';
        wrapper.style.background = '#fafafa';
        wrapper.style.paddingTop = '24px';
        wrapper.style.marginBottom = '12px';
        pre.parentNode.insertBefore(wrapper, pre);
        wrapper.appendChild(pre);

        const btn = document.createElement('button');
        btn.textContent = '📋 Kopieren';
        btn.style.position = 'sticky';
        btn.style.top = '2px';
        btn.style.right = '4px';
        btn.style.zIndex = '10';
        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);

        wrapper.appendChild(btn);

        updateAllBlocks();
    }

    // --- Statische Codeblöcke ---
    function initStaticCodeBlock(pre) {
        if (pre.dataset.staticInit) return;
        pre.dataset.staticInit = true;

        const wrapper = document.createElement('div');
        wrapper.style.position = 'relative';
        wrapper.style.border = '1px solid #ccc';
        wrapper.style.borderRadius = '6px';
        wrapper.style.overflow = 'auto';
        wrapper.style.background = '#fafafa';
        wrapper.style.paddingTop = '24px';
        wrapper.style.marginBottom = '12px';
        pre.parentNode.insertBefore(wrapper, pre);
        wrapper.appendChild(pre);

        const btn = document.createElement('button');
        btn.textContent = '📋 Kopieren';
        btn.style.position = 'sticky';
        btn.style.top = '2px';
        btn.style.right = '4px';
        btn.style.zIndex = '10';
        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);

        wrapper.appendChild(btn);
    }

    // --- Aktualisiert alle Blöcke mit einer bestimmten Variable ---
    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;

                // Lokale Inputfelder syncen
                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];
                }
            });
        });

        // Globale Leiste sync
        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];
        });
    }

    // --- Seite initialisieren ---
    function initPage() {
        document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
        document.querySelectorAll('pre.static-code').forEach(initStaticCodeBlock);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPage);
    } else {
        initPage();
    }

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