78 lines
3.7 KiB
PHP
78 lines
3.7 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Swipe-Viewer für eine Stadionzeitung-Ausgabe. Props:
|
||
|
|
* $issue Eintrag aus data/stadionzeitung.json (opponent, team_key, status,
|
||
|
|
* images[]{type: 'image'{base,widths,alt} | 'live'{page[,team]}})
|
||
|
|
*
|
||
|
|
* Ohne JS: alle Seiten normal gestapelt (stadionzeitung-seite-Komponente) —
|
||
|
|
* voll lesbar, sequentiell auch per Screenreader. Mit JS
|
||
|
|
* (stadionzeitung-viewer.js) wird der Track zum horizontalen Scroll-Snap-
|
||
|
|
* Swiper, Zähler + Pfeil-Buttons kommen dazu (vorher [hidden], da ohne JS
|
||
|
|
* funktionslos).
|
||
|
|
*
|
||
|
|
* Das Rendern der einzelnen Seiten (Bild wie Live) liegt in
|
||
|
|
* stadionzeitung-seite.php — geteilt mit der Druckfassung
|
||
|
|
* (stadionzeitung-druck.php), damit Bildschirm und Druck nie
|
||
|
|
* auseinanderlaufen. Die Daten der Live-Seiten kommen EINMAL aus
|
||
|
|
* stadionzeitung_live_data() (app/helpers.php): Entwürfe rechnen live,
|
||
|
|
* veröffentlichte Ausgaben lesen ihren eingefrorenen snapshot.
|
||
|
|
*/
|
||
|
|
$issue = $issue ?? [];
|
||
|
|
$images = $issue['images'] ?? [];
|
||
|
|
$total = count($images);
|
||
|
|
if ($images === []) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$opponent = (string) ($issue['opponent'] ?? '');
|
||
|
|
|
||
|
|
// Live-Daten nur laden, wenn die Ausgabe tatsächlich eine Live-Seite enthält.
|
||
|
|
$hasLive = false;
|
||
|
|
foreach ($images as $entry) {
|
||
|
|
if (($entry['type'] ?? 'image') === 'live') {
|
||
|
|
$hasLive = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$liveData = $hasLive ? stadionzeitung_live_data($issue) : [];
|
||
|
|
?>
|
||
|
|
<section class="stadionzeitung-viewer" data-stadionzeitung-viewer aria-roledescription="Bildergalerie" aria-label="<?= e('Stadionzeitung gegen ' . $opponent . ', Seite für Seite') ?>">
|
||
|
|
<ul class="stadionzeitung-viewer__track" data-viewer-track>
|
||
|
|
<?php foreach ($images as $i => $entry): ?>
|
||
|
|
<li class="stadionzeitung-viewer__page" data-viewer-page>
|
||
|
|
<?php component('stadionzeitung-seite', [
|
||
|
|
'entry' => $entry,
|
||
|
|
'issue' => $issue,
|
||
|
|
'data' => $liveData,
|
||
|
|
'eager' => $i === 0,
|
||
|
|
]); ?>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ul>
|
||
|
|
<div class="stadionzeitung-viewer__controls" data-viewer-controls hidden>
|
||
|
|
<button class="btn btn--icon stadionzeitung-viewer__nav-btn" type="button" data-viewer-prev aria-label="Vorherige Seite">
|
||
|
|
<?= icon('chevron-left') ?>
|
||
|
|
</button>
|
||
|
|
<p class="stadionzeitung-viewer__counter" data-viewer-counter aria-live="polite">
|
||
|
|
Seite <span data-viewer-current>1</span> von <?= $total ?>
|
||
|
|
</p>
|
||
|
|
<button class="btn btn--icon stadionzeitung-viewer__nav-btn" type="button" data-viewer-next aria-label="Nächste Seite">
|
||
|
|
<?= icon('chevron-right') ?>
|
||
|
|
</button>
|
||
|
|
<?php /* Vollbild-Lesemodus: am Handy fressen Kopfleiste, Navigation und Fußzeile
|
||
|
|
mehr Platz als die Seite selbst. Beide Icons stehen im Markup, welches
|
||
|
|
sichtbar ist entscheidet CSS am Zustand — so muss das JS kein Markup
|
||
|
|
erzeugen. Zustand über aria-pressed, deshalb bleibt das aria-label
|
||
|
|
unverändert. */ ?>
|
||
|
|
<button class="btn btn--icon stadionzeitung-viewer__full-btn" type="button" data-viewer-full aria-pressed="false" aria-label="Vollbild">
|
||
|
|
<span class="stadionzeitung-viewer__icon--open"><?= icon('arrows-fullscreen') ?></span>
|
||
|
|
<span class="stadionzeitung-viewer__icon--close"><?= icon('x-lg') ?></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<a class="btn btn--outline stadionzeitung-viewer__print" href="<?= e(url('stadionzeitung/' . ($issue['slug'] ?? '')) . '?druck=1') ?>">
|
||
|
|
<?= icon('printer') ?> Druckfassung
|
||
|
|
</a>
|
||
|
|
</section>
|