tsv08kulmbach-website/public/assets/js/persons-tabs.js

(function () {
    'use strict';

    // Tab-Umschaltung der Ansprechpartner-Bereiche (Fußball/Turnen). Ohne JS
    // bleibt die Leiste hidden und beide Sektionen stehen untereinander —
    // reine Progressive Enhancement (gleiches Muster wie news-filter.js).
    // Deep-Links (#kontakt-turnen) aktivieren den passenden Tab.
    function init(root) {
        var bar = root.querySelector('[data-persons-tabs-bar]');
        if (!bar) { return; }

        var buttons = [].slice.call(bar.querySelectorAll('[data-tab-target]'));
        if (buttons.length < 2) { return; }

        var sections = buttons.map(function (btn) {
            return root.querySelector('#' + btn.getAttribute('data-tab-target'));
        });
        if (sections.some(function (s) { return !s; })) { return; }

        // Sichtbare Sektions-Überschriften weichen den Tabs (bleiben für
        // Screenreader/Outline als visually-hidden erhalten).
        root.querySelectorAll('.persons h2').forEach(function (h) {
            h.classList.add('visually-hidden');
        });

        function activate(index, writeHash) {
            buttons.forEach(function (btn, i) {
                btn.setAttribute('aria-pressed', i === index ? 'true' : 'false');
                sections[i].hidden = i !== index;
            });
            // Aktiven Bereich in die URL spiegeln (replaceState statt Hash-
            // Zuweisung: kein Scroll-Sprung, kein History-Eintrag pro Klick) —
            // #kontakt-turnen ist damit direkt teilbar.
            if (writeHash) {
                window.history.replaceState(null, '', '#' + buttons[index].getAttribute('data-tab-target'));
            }
        }

        buttons.forEach(function (btn, i) {
            btn.addEventListener('click', function () { activate(i, true); });
            btn.addEventListener('keydown', function (e) {
                var next = null;
                if (e.key === 'ArrowRight') { next = (i + 1) % buttons.length; }
                if (e.key === 'ArrowLeft')  { next = (i - 1 + buttons.length) % buttons.length; }
                if (e.key === 'Home')       { next = 0; }
                if (e.key === 'End')        { next = buttons.length - 1; }
                if (next !== null) { e.preventDefault(); buttons[next].focus(); }
            });
        });

        // Deep-Link auf eine Sektion (#kontakt-turnen) → passenden Tab öffnen.
        function fromHash() {
            var id = window.location.hash.replace('#', '');
            var index = buttons.findIndex(function (btn) {
                return btn.getAttribute('data-tab-target') === id;
            });
            activate(index >= 0 ? index : 0);
        }

        window.addEventListener('hashchange', fromHash);
        bar.hidden = false;
        fromHash();
    }

    document.querySelectorAll('[data-persons-tabs]').forEach(init);
}());