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

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

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

        function success() {
            btn.textContent = "✅ Kopiert!";
            setTimeout(() => btn.textContent = "📋 Kopieren", 1500);
        }
        success();
    }

    // Highlight-Funktion: Platzhalter rot, Werte blau
    function highlightPlaceholders(code, vars, inputWrapper) {
        let highlighted = code;
        vars.forEach(v => {
            const inp = inputWrapper.querySelector(`input[data-var-id="${v}"]`);
            const val = inp ? inp.value : `{{${v}}}`;
            // Wert zuerst ersetzen
            highlighted = highlighted.replace(new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), `<span class="value">${val}</span>`);
            // Platzhalter danach hervorheben
            highlighted = highlighted.replace(new RegExp(`{{${v}}}`, 'g'), `<span class="placeholder">{{${v}}}</span>`);
        });
        return highlighted;
    }

    // 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 Inputs + Kopierbutton
        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}}}`; // Standardwert in Klammern
            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', () => {
                let updated = originalCode;
                vars.forEach(vv => {
                    const val = inputWrapper.querySelector(`input[data-var-id="${vv}"]`).value;
                    updated = updated.replace(new RegExp(`{{${vv}}}`, 'g'), val);
                });
                pre.innerHTML = highlightPlaceholders(updated, vars, inputWrapper);
            });
        });

        // Kopier-Button rechts in Input-Leiste
        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.textContent.replace(/<[^>]+>/g, ''), btn); // HTML entfernen beim Kopieren

        container.appendChild(btn);

        pre.parentNode.insertBefore(container, pre);

        // Initial Highlight
        pre.innerHTML = highlightPlaceholders(originalCode, vars, inputWrapper);
    }

    // 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';

        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);
        container.appendChild(pre);
        pre.parentNode.insertBefore(container, pre);
    }

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

    // CSS für Highlighting
    const style = document.createElement('style');
    style.textContent = `
        .placeholder { color: #d14; font-weight: bold; } /* für {{folder}} */
        .value { color: #1a73e8; font-weight: bold; }    /* für eingegebene Werte, z.B. nginx */
    `;
    document.head.appendChild(style);

});