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