75 lines
4.5 KiB
PHP
75 lines
4.5 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Glas-Karte im Startseiten-Hero: die nächsten Termine des Vereins als
|
||
|
|
* automatisch wechselnder Slider. Props:
|
||
|
|
* $items aus upcoming_highlights() (app/helpers.php) — Spiele und
|
||
|
|
* Vereins-Events chronologisch gemischt, je Eintrag type/label/href/
|
||
|
|
* link_text plus die rohen Daten für die Innenvariante
|
||
|
|
*
|
||
|
|
* Zwei Innenvarianten, eine Karte: 'spiel' rendert match-feature (Heim über
|
||
|
|
* Gast mit Wappen, wie im Matchcenter-Band), 'event' rendert event-feature
|
||
|
|
* (Datums-Chip + Titel + Ort). Die Beschriftung („Nächstes Spiel · 1. Mannschaft")
|
||
|
|
* kommt fertig aus dem Helper; die Meta-Zeile von match-feature bleibt in der
|
||
|
|
* Karte per CSS aus, damit Mannschaft/Liga nicht zweimal dastehen.
|
||
|
|
*
|
||
|
|
* Antrieb ist der generische assets/js/carousel.js (dieselben data-Hooks wie
|
||
|
|
* banner-slider): Crossfade, Fortschrittsring im aktiven Indikator, Pause-Taste
|
||
|
|
* (WCAG 2.2.2), Pause bei Hover/Fokus, kein Autoplay bei prefers-reduced-motion.
|
||
|
|
* Ohne JS ist nur der nächste Termin sichtbar und verlinkt (die weiteren Folien
|
||
|
|
* tragen hidden, die Steuerung bleibt verborgen, weil sie funktionslos wäre).
|
||
|
|
*
|
||
|
|
* Die Karten-Wurzel ist bewusst ein div und nicht selbst der Link: die
|
||
|
|
* Steuer-Buttons liegen in der Karte, verschachtelte interaktive Elemente wären
|
||
|
|
* ungültig. Verlinkt ist deshalb der Inhalt jeder Folie.
|
||
|
|
*/
|
||
|
|
$items = $items ?? [];
|
||
|
|
if ($items === []) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$total = count($items);
|
||
|
|
?>
|
||
|
|
<div class="hero__upcoming"<?= $total > 1 ? ' data-carousel aria-roledescription="Karussell" aria-label="Nächste Termine"' : '' ?>>
|
||
|
|
<ul class="hero__upcoming-track" id="hero-upcoming-track" data-carousel-track aria-live="off">
|
||
|
|
<?php foreach ($items as $i => $item): ?>
|
||
|
|
<li class="hero__upcoming-slide"<?= $total > 1 ? ' data-carousel-slide role="group" aria-roledescription="Folie" aria-label="' . ($i + 1) . ' von ' . $total . '"' : '' ?><?= $i === 0 ? '' : ' hidden' ?>>
|
||
|
|
<a class="hero__upcoming-link" href="<?= e($item['href']) ?>">
|
||
|
|
<p class="hero__upcoming-label"><?= e($item['label']) ?></p>
|
||
|
|
<?php if ($item['type'] === 'spiel'): ?>
|
||
|
|
<?php component('match-feature', [
|
||
|
|
'match' => $item['match'],
|
||
|
|
'team_name' => $item['team_name'],
|
||
|
|
'league' => $item['league'],
|
||
|
|
]); ?>
|
||
|
|
<?php else: ?>
|
||
|
|
<?php component('event-feature', ['event' => $item['event']]); ?>
|
||
|
|
<?php endif; ?>
|
||
|
|
<span class="visually-hidden"><?= e($item['link_text']) ?></span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ul>
|
||
|
|
<?php if ($total > 1): ?>
|
||
|
|
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); carousel.js blendet sie ein. */ ?>
|
||
|
|
<div class="hero__upcoming-controls" data-carousel-controls hidden>
|
||
|
|
<div class="hero__upcoming-indicators" role="group" aria-label="Termin wählen">
|
||
|
|
<?php foreach ($items as $i => $item): ?>
|
||
|
|
<button class="hero__upcoming-dot" type="button" data-carousel-dot aria-controls="hero-upcoming-track" aria-label="Termin <?= ($i + 1) ?> von <?= $total ?>: <?= e($item['label']) ?>">
|
||
|
|
<span class="hero__upcoming-progress" data-carousel-progress aria-hidden="true"></span>
|
||
|
|
</button>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
<?php /* Pause/Play — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
|
||
|
|
<?php /* Kein btn--sm: dessen 44px kommen über ::after, die Fläche würde
|
||
|
|
in dieser Reihe den letzten Indikator überlappen (siehe CLAUDE.md). */ ?>
|
||
|
|
<button class="btn btn--icon hero__upcoming-toggle" type="button" data-carousel-toggle aria-pressed="false" aria-controls="hero-upcoming-track" hidden>
|
||
|
|
<?= icon('pause-fill', 'hero__upcoming-toggle-icon hero__upcoming-toggle-icon--pause') ?>
|
||
|
|
<?= icon('play-fill', 'hero__upcoming-toggle-icon hero__upcoming-toggle-icon--play') ?>
|
||
|
|
<span class="visually-hidden" data-carousel-toggle-label>Automatischen Wechsel pausieren</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|