Cloak-Toggle

by der_robert

HTML

<!-- Beispiel 1: Einfaches Toggle (toggle-Modus, default: versteckt) -->
    <button data-cloak-identifier="basic">Toggle Inhalt</button>
    <div data-cloak-target="basic" data-cloak-show-default="false">
        Basis-Inhalt, standardmäßig versteckt.
    </div>

    <!-- Beispiel 2: Show/Hide explizit -->
    <button data-cloak-identifier="onlyshow" data-cloak-toggle-mode="show">Zeigen</button>
    <button data-cloak-identifier="onlyshow" data-cloak-toggle-mode="hide">Verstecken</button>
    <div data-cloak-target="onlyshow" data-cloak-show-default="false">
        Sichtbar, wenn auf "Zeigen" geklickt.
    </div>

    <!-- Beispiel 3: Mehrere Ziele mit einem Toggle -->
    <button data-cloak-identifier="multi">Alle zeigen/verstecken</button>
    <div data-cloak-target="multi" data-cloak-show-default="false">Ziel 1</div>
    <div data-cloak-target="multi" data-cloak-show-default="false">Ziel 2</div>

    <!-- Beispiel 4: Mehrere Toggles für ein Ziel -->
    <button data-cloak-identifier="multi2">Toggle A</button>
    <button data-cloak-identifier="multi2">Toggle B</button>
    <div data-cloak-target="multi2" data-cloak-show-default="true">
        Ziel kann mit verschiedenen Buttons gesteuert werden.
    </div>

    <!-- Beispiel 5: Standardmäßig sichtbar -->
    <button data-cloak-identifier="visible" data-cloak-toggle-mode="toggle">Verstecken</button>
    <div data-cloak-target="visible" data-cloak-show-default="true">
        Dieses Element ist standardmäßig sichtbar.
    </div>

    <!-- Beispiel 6: Accessibility & Fokus -->
    <button data-cloak-identifier="aria" data-cloak-toggle-mode="show">Show & Focus</button>
    <div data-cloak-target="aria"
         data-cloak-show-default="false"
         data-cloak-aria="true"
         data-cloak-focus="true"
         tabindex="-1">
        Dieses Element erhält nach dem Anzeigen den Fokus und aria-hidden wird angepasst.
    </div>

    <!-- Beispiel 7: Zwei unabhängige...

CSS

[data-cloak-target][data-cloak-show-default="false"],
.cloak-hidden {
    display: none !important;
}
.cloak-show {
    display: block !important;
}

JavaScript

function debugLog(msg) {
        if (window.__cloakDebug) {
            console.log('[cloak]', msg);
        }
    }
    function setCloakState(el, show) {
        // Immer beide Klassen vorher entfernen
        el.classList.remove('cloak-hidden', 'cloak-show');
        if (show) {
            el.classList.add('cloak-show');
            el.setAttribute('data-cloak-show-default', 'true');
            debugLog(`Target [${el.getAttribute('data-cloak-target')}] jetzt SICHTBAR`);
        } else {
            el.classList.add('cloak-hidden');
            el.setAttribute('data-cloak-show-default', 'false');
            debugLog(`Target [${el.getAttribute('data-cloak-target')}] jetzt VERSTECKT`);
        }
    }
    function initCloak() {
        window.__cloakDebug = true;
        const debugToggle = document.getElementById('cloak-debug-toggle');
        if (debugToggle) {
            debugToggle.addEventListener('change', function () {
                window.__cloakDebug = this.checked;
                debugLog('Debug-Modus ist jetzt ' + (window.__cloakDebug ? 'AKTIV' : 'INAKTIV'));
            });
        }

        document.querySelectorAll('[data-cloak-target]').forEach(el => {
            const showDefault = el.getAttribute('data-cloak-show-default') === 'true';
            setCloakState(el, showDefault);
        });

        document.querySelectorAll('[data-cloak-identifier]').forEach(toggle => {
            const key = toggle.getAttribute('data-cloak-identifier');
            const toggleMode = toggle.getAttribute('data-cloak-toggle-mode') || 'toggle';

            debugLog(`Toggle [${key}] (${toggleMode}) registriert`);

            toggle.addEventListener('click', () => {
                debugLog(`Toggle [${key}] ausgelöst, Modus: ${toggleMode}`);
                const targets = document.querySelectorAll(`[data-cloak-target="${key}"]`);
                targets.forEach(target => {
                    let showNow;
     ...