67 lines
2.8 KiB
JavaScript
67 lines
2.8 KiB
JavaScript
|
(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);
|
||
|
|
}());
|