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

function highlightPlaceholders(code) {
    return code.replace(/{{(\w+)}}/g, '<span class="placeholder">{{$1}}</span>');
}

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;

    // Wrap code in <code>
    let codeEl;
    if (!pre.querySelector('code')) {
        codeEl = document.createElement('code');
        codeEl.style.display = 'block';
        codeEl.style.whiteSpace = 'pre';
        codeEl.innerHTML = highlightPlaceholders(originalCode);
        pre.textContent = '';
        pre.appendChild(codeEl);
    } else {
        codeEl = pre.querySelector('code');
    }

    // Container für Inputs
    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}}}`;
        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', () => {
            let updated = originalCode;
            vars.forEach(varName => {
                const val = container.querySelector(`input[data-var-id="${varName}"]`).value;
                updated = updated.replace(new RegExp(`{{${varName}}}`, 'g'), val);
            });
            codeEl.innerHTML = highlightPlaceholders(updated);
        });

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

    // Kopierbutton
    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(codeEl.textContent, btn);

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

// CSS Highlight
const style = document.createElement('style');
style.textContent = `
.placeholder { color: #d14; font-weight: bold; }
`;
document.head.appendChild(style);