tsv08kulmbach-website/app/components/timeline.php

<?php

declare(strict_types=1);

/**
 * Interaktive Vereins-Timeline (Museums-Look). Props:
 *   $events array — Stationen aus data/historie.json (year, text, image?{src,width,height,alt})
 * Bilder werden bewusst in ORIGINALGRÖSSE eingebunden (keine Varianten) —
 * historisches Material bleibt unangetastet.
 * `image` ist optional: zu vielen belegten Ereignissen (Ligaereignisse, Chronik-Funde)
 * gibt es kein Bild, das wir zeigen dürfen — Pressefotos gehören dem Verlag, die Fotos
 * der alten Vereinsseiten sind verloren. Solche Stationen rendern als Notiz auf
 * derselben Sepia-Fläche, ohne <figure>/<figcaption> (ohne Bild trägt das nichts).
 * timeline.js ergänzt Scroll-Reveal + aktive Jahres-Navigation; ohne JS ist
 * alles sichtbar (Initial-Versteckt-Zustand nur unter .js-reveal).
 */

// Anker je Jahr — Duplikate (2x 1972) bekommen einen Suffix, die Jahres-Nav
// führt auf das jeweils erste Vorkommen.
$seen = [];
$prepared = [];
foreach ($events as $event) {
    $slug = 'jahr-' . strtolower(preg_replace('/[^a-zA-Z0-9]+/', '-', $event['year']));
    $first = !isset($seen[$slug]);
    $seen[$slug] = ($seen[$slug] ?? 0) + 1;
    $prepared[] = $event + [
        'id'  => $first ? $slug : $slug . '-' . $seen[$slug],
        'nav' => $slug,
    ];
}
?>
        <section class="section timeline-section" data-timeline>
            <div class="container">
                <nav class="timeline-nav" aria-label="Zeitsprünge">
                    <ol class="timeline-nav__list">
<?php foreach ($prepared as $event): ?>
<?php if ($event['id'] === $event['nav']): ?>
                        <li><a href="#<?= e($event['nav']) ?>"><?= e($event['year']) ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
                    </ol>
                </nav>
                <ol class="timeline">
<?php foreach ($prepared as $i => $event): ?>
                    <li class="timeline__event" id="<?= e($event['id']) ?>" data-nav="<?= e($event['nav']) ?>">
                        <span class="timeline__marker" aria-hidden="true"></span>
                        <article class="timeline__card">
                            <h2 class="timeline__year"><?= e($event['year']) ?></h2>
<?php if (!empty($event['image']['src'])): ?>
                            <figure class="timeline__figure">
                                <img src="<?= e(asset($event['image']['src'])) ?>"
                                    alt="<?= e($event['image']['alt']) ?>"
                                    width="<?= e($event['image']['width']) ?>" height="<?= e($event['image']['height']) ?>"
                                    loading="<?= $i === 0 ? 'eager' : 'lazy' ?>" decoding="async">
                                <figcaption class="timeline__text"><?= e($event['text']) ?></figcaption>
                            </figure>
<?php else: ?>
                            <div class="timeline__figure timeline__figure--note">
                                <p class="timeline__text"><?= e($event['text']) ?></p>
                            </div>
<?php endif; ?>
                        </article>
                    </li>
<?php endforeach; ?>
                </ol>
            </div>
        </section>