fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Turnen: Tab-Navigation für Gruppen mit vielen Trainingszeiten

Browse Source 
group-schedule um eine Tab-Leiste (group-tabs) erweitert: bei Disziplinen mit
vielen Gruppen (z. B. Eltern-Kind-Turnen) werden die Gruppen als Tabs gruppiert
statt endlos gestapelt. JS (group-tabs.js) als progressive enhancement — ohne JS
bleiben alle Panels sichtbar. Begleitend Feinschliff an group-card/-list/schedule-row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
Felix Schneider
2026-06-20 20:48:39 +02:00
parent 1552f974aa
commit b40f36aee6
4 changed files with 208 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/assets/js/group-tabs.js Normal file
View File

@@ -0,0 +1,31 @@
(function () {
'use strict';
function init(el) {
const buttons = [...el.querySelectorAll('[role="tab"]')];
const panels = [...el.querySelectorAll('[role="tabpanel"]')];
// Alle außer dem ersten verstecken
panels.forEach(function (p, i) { if (i > 0) p.hidden = true; });
buttons.forEach(function (btn, i) {
btn.addEventListener('click', function () { activate(i); });
btn.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { e.preventDefault(); activate((i + 1) % buttons.length); }
if (e.key === 'ArrowLeft') { e.preventDefault(); activate((i - 1 + buttons.length) % buttons.length); }
if (e.key === 'Home') { e.preventDefault(); activate(0); }
if (e.key === 'End') { e.preventDefault(); activate(buttons.length - 1); }
});
});
function activate(index) {
buttons.forEach(function (b, i) {
b.setAttribute('aria-selected', i === index ? 'true' : 'false');
});
panels.forEach(function (p, i) { p.hidden = i !== index; });
buttons[index].focus();
}
}
document.querySelectorAll('[data-group-tabs]').forEach(init);
}());