MediaWiki:Gadget-DynamicCode.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 () {

    function initDynamicCodeBlock(pre) {

        // Nur einmal initialisieren
        if (pre.dataset.dynamicInit) return;
        pre.dataset.dynamicInit = true;

        const codeText = pre.textContent;

        // Finde alle Platzhalter {{varname}}
        const regex = /{{(\w+)}}/g;
        const vars = [];
        let match;
        while ((match = regex.exec(codeText)) !== null) {
            if (!vars.includes(match[1])) vars.push(match[1]);
        }

        if (vars.length === 0) return; // nichts zu tun

        // Container für Input-Leiste erstellen
        const container = document.createElement('div');
        container.style.marginBottom = '6px';
        container.style.padding = '6px';
        container.style.border = '1px solid #ccc';
        container.style.borderRadius = '4px';
        container.style.background = '#f9f9f9';

        vars.forEach(v => {
            const lbl = document.createElement('label');
            lbl.textContent = v + ': ';
            lbl.style.marginRight = '4px';

            const inp = document.createElement('input');
            inp.type = 'text';
            inp.value = v; // Standardwert = Platzhaltername
            inp.dataset.varId = v;
            inp.style.marginRight = '12px';

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

        pre.parentNode.insertBefore(container, pre);

        // Copy Button
        const btn = document.createElement('button');
        btn.textContent = '📋 Kopieren';
        btn.style.marginTop = '4px';
        btn.style.padding = '4px 8px';
        btn.style.fontSize = '12px';
        btn.style.cursor = 'pointer';

        btn.onclick = function () {
            const textToCopy = pre.textContent;
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(textToCopy).then(() => {
                    btn.textContent = "✅ Kopiert!";
                    setTimeout(() => btn.textContent = "📋 Kopieren", 1500);
                });
            } else {
                const textarea = document.createElement("textarea");
                textarea.value = textToCopy;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand("copy");
                document.body.removeChild(textarea);
                btn.textContent = "✅ Kopiert!";
                setTimeout(() => btn.textContent = "📋 Kopieren", 1500);
            }
        };

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

        // Update Code bei Eingabe
        container.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', () => {
                let updated = codeText;
                vars.forEach(v => {
                    const val = container.querySelector(`input[data-var-id="${v}"]`).value;
                    updated = updated.replace(new RegExp(`{{${v}}}`, 'g'), val);
                });
                pre.textContent = updated;
            });
        });
    }

    // Alle bestehenden Codeblöcke initialisieren
    document.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);

    // Für dynamisch nachgeladene Inhalte
    mw.hook('wikipage.content').add(function (content) {
        content.querySelectorAll('pre.dynamic-code').forEach(initDynamicCodeBlock);
    });

});