Jürgen MummertandClaude Opus 5
61d0f998fa
The stylesheets and the module script changed substantially, so the previous value would have left browsers on the cached 1.x assets after an update. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Flipbook Bundle (Contao 5.7)
Contao Inhaltselement zum Darstellen von PDFs als blätterbares Flipbook.
Features
- Reines JavaScript (ES Modules), keine Build-Kette
pdfjs-distfür PDF-Rendering in<canvas>flipbook-jsfür den Blättereffekt- Lazy Rendering: 2–4 Seiten sofort, Rest on-demand
- Automatisches Freigeben weit entfernter Seiten, damit der Speicher auch bei mehrhundertseitigen PDFs beschränkt bleibt
- Optionales Aufteilen von Doppelseiten in linke und rechte Einzelseite
- Optionale Vor-/Zurück-Navigation, optionaler Blättersound
- Tastatursteuerung (Pfeiltasten) und Touch-Swipe
- Responsive Breite mit beibehaltenem Seitenverhältnis
- Frontend-Texte übersetzbar (DE/EN mitgeliefert)
Installation (VCS oder Paket)
composer require mummert/flipbook-bundle
Inhaltselement im Backend
Elementtyp: Blätterbares PDF
Felder:
PDF-Datei(fileTree / UUID)Initial geladene Seiten(2, 3 oder 4)Startmodus(zentriert oder als Doppelseite)Doppelseiten aufteilen(optional)Navigation anzeigen(optional)Blättersound abspielen(optional)
Hinweise
- Das Inhaltselement rendert PDF-Seiten als
<canvas>innerhalb von.c-flipbook__page. - Alle benötigten Open-Source-Dateien liegen lokal im Bundle; es gibt keine Requests an externe CDNs.
- CSS und Modul-Script werden vom Controller über
$GLOBALS['TL_HEAD']registriert und landen damit einmal pro Seite im Head — auch wenn mehrere Flipbooks auf derselben Seite stehen. - Asset-Pfade werden zur Laufzeit aus
import.meta.urlabgeleitet. Das Bundle funktioniert dadurch auch, wenn Contao in einem Unterverzeichnis läuft. vendor/cmaps/undvendor/standard_fonts/werden von PDF.js nur bei Bedarf nachgeladen (CID-Encodings bzw. nicht eingebettete Standard-Fonts).- Siehe
THIRD_PARTY_LICENSES.mdfür Abhängigkeiten undlicenses/für die Lizenztexte.
Barrierefreiheit
Canvas-Inhalte sind für Screenreader und die Seitensuche des Browsers nicht
zugänglich. Das Element gibt deshalb pro Seite ein aria-label aus und blendet
unter dem Flipbook einen Download-Link auf die Original-PDF ein — das ist die
gleichwertige Alternative im Sinne von WCAG. Wird der Link per CSS ausgeblendet,
entfällt diese Gleichwertigkeit.
Geschützte Ordner
Contao liefert Dateien unter files/ nur aus, wenn der Ordner öffentlich
freigegeben ist. Liegt die gewählte PDF in einem geschützten Ordner, lädt das
Flipbook nicht. Der Controller prüft nur, ob die Datei überhaupt auf der Platte
existiert — die Freigabe selbst muss im Dateimanager gesetzt sein.
JavaScript-API
Für AJAX- oder Turbo-getriebene Seiten:
window.MummertPdfFlipbook.scan(); // neue Elemente initialisieren
window.MummertPdfFlipbook.destroyAll(); // Instanzen abbauen, Speicher freigeben
Release
git tag v1.0.0
git push origin v1.0.0