58 lines
2.5 KiB
PHP
58 lines
2.5 KiB
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.
|
||
|
|
* 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>
|
||
|
|
<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>
|
||
|
|
</article>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</section>
|