MediaWiki:Gadget-CodeHelper.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

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

    const globalVars = {}; // speichert globale Variablen

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

    // --- Dynamic Code Block ---
    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;

        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.flexWrap = 'wrap';
        container.style.alignItems = 'center';
        container.style.gap = '6px';
        container.style.marginBottom = '6px';
        container.style.padding = '6px';
        container.style.border = '1px solid #ddd';
        container.style.borderRadius = '6px';
        container.style.background = '#f5f5f5';

        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 = globalVars[v] ?? v; // globale Variable übernehmen
            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';

            inp.addEventListener('input', () => {
                globalVars[v] = inp.value; // global speichern
                updateAllBlocks(v);
            });

            lbl.appendChild(inp);
            container.appendChild(lbl);
        });

        const btn = document.createElement('button');
        btn.textContent = '📋 Kopieren';
        btn.style.marginLeft = 'auto';
        btn.style.padding = '4px 8px';
        btn.style.fontSize = '12px';
        btn.style.cursor = 'pointer';
        btn.style.border = '1px solid #888';
        btn.style.borderRadius = '4px';
        btn.style.background = '#eee';

        btn.onclick = function () {
            copyText(pre.textContent, btn);
        };

        container.appendChild(btn);
        pre.parentNode.insertBefore(container, pre);

        function updateBlock() {
            let updated = originalCode;
            vars.forEach(v => {
                const val = globalVars[v] ?? container.querySelector(`input[data-var-id="${v}"]`).value;
                updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);
            });
            pre.textContent = updated;
        }

        container.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', updateBlock);
        });

        updateBlock();
    }

    // --- Static Code Block ---
    function initStaticCodeBlock(pre) {
        if (pre.dataset.staticInit) return;
        pre.dataset.staticInit = true;

        const btn = document.createElement('button');
        btn.textContent = '📋 Kopieren';
        btn.style.margin = '4px 0';
        btn.style.padding = '4px 8px';
        btn.style.fontSize = '12px';
        btn.style.cursor = 'pointer';
        btn.style.border = '1px solid #888';
        btn.style.borderRadius = '4px';
        btn.style.background = '#eee';

        btn.onclick = function () {
            copyText(pre.textContent, btn);
        };

        pre.parentNode.insertBefore(btn, pre);
    }

    // --- Global Updates ---
    function updateAllBlocks(varName) {
        document.querySelectorAll('pre.dynamic-code').forEach(pre => {
            if (!pre.dataset.dynamicInit) return;
            const container = pre.previousSibling;
            let updated = pre.textContent;
            updated = pre.textContent.replace(new RegExp(`{{${varName}}}`, 'g'), globalVars[varName]);
            pre.textContent = updated;
            // Input im Block synchronisieren
            if (container) {
                const inp = container.querySelector(`input[data-var-id="${varName}"]`);
                if (inp && inp.value !== globalVars[varName]) inp.value = globalVars[varName];
            }
        });
    }

    // --- Initialisierung ---
    document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
    document.querySelectorAll('pre.static-code').forEach(initStaticCodeBlock);

    mw.hook('wikipage.content').add(function (content) {
        content.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
        content.querySelectorAll('pre.static-code').forEach(initStaticCodeBlock);
    });

});