feat: refine flipbook start modes and UI behavior

2026-04-13 21:34:29 +02:00
commit 9f9b1c9935
23 changed files with 1007 additions and 0 deletions
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_DCA']['tl_content']['palettes']['blatterbares_pdf'] = '{type_legend},type,headline;{flipbook_legend},flipbookPdfSrc,flipbookInitialPages,flipbookStartMode,flipbookShowNavigation;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},cssID;{invisible_legend:hide},invisible,start,stop';
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['flipbookPdfSrc'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_content']['flipbookPdfSrc'],
+    'exclude' => true,
+    'inputType' => 'fileTree',
+    'eval' => ['fieldType' => 'radio', 'files' => true, 'filesOnly' => true, 'extensions' => 'pdf', 'mandatory' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'binary', 'length' => 16, 'notnull' => false],
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['flipbookInitialPages'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPages'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options' => ['2', '3', '4'],
+    'reference' => &$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPagesOptions'],
+    'eval' => ['mandatory' => true, 'includeBlankOption' => false, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 1, 'default' => '4'],
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['flipbookStartMode'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_content']['flipbookStartMode'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options' => ['center', 'spread'],
+    'reference' => &$GLOBALS['TL_LANG']['tl_content']['flipbookStartModeOptions'],
+    'eval' => ['mandatory' => true, 'includeBlankOption' => false, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 16, 'default' => 'center'],
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['flipbookShowNavigation'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_content']['flipbookShowNavigation'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'eval' => ['tl_class' => 'w50 m12'],
+    'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => '1'],
+];
@@ -0,0 +1,5 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['CTE']['blatterbares_pdf'] = ['Blätterbares PDF', 'Zeigt ein PDF als blätterbares Flipbook mit Lazy-Rendering an.'];
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['tl_content']['flipbook_legend'] = 'Blätterbares PDF';
+$GLOBALS['TL_LANG']['tl_content']['flipbookPdfSrc'] = ['PDF-Datei', 'Bitte waehlen Sie die PDF-Datei aus, die als Flipbook angezeigt werden soll.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPages'] = ['Initial geladene Seiten', 'Anzahl der Seiten, die beim Laden direkt gerendert werden (Rest lazy).'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPagesOptions'] = [
+    '2' => '2 Seiten',
+    '3' => '3 Seiten',
+    '4' => '4 Seiten',
+];
+$GLOBALS['TL_LANG']['tl_content']['flipbookStartMode'] = ['Startmodus', 'Legt fest, ob das Flipbook zentriert oder mit Doppelseite startet.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookStartModeOptions'] = [
+    'center' => 'Zentriert starten',
+    'spread' => 'als Doppelseite starten',
+];
+$GLOBALS['TL_LANG']['tl_content']['flipbookShowNavigation'] = ['Navigation anzeigen', 'Zeigt Vor-/Zurueck-Buttons unter dem Flipbook an.'];
@@ -0,0 +1,5 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['CTE']['blatterbares_pdf'] = ['Flippable PDF', 'Displays a PDF as a page-turning flipbook with lazy rendering.'];
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['tl_content']['flipbook_legend'] = 'Flippable PDF';
+$GLOBALS['TL_LANG']['tl_content']['flipbookPdfSrc'] = ['PDF file', 'Please select the PDF file to display as a flipbook.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPages'] = ['Initially rendered pages', 'Number of pages rendered immediately on load (remaining pages are lazy-rendered).'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookInitialPagesOptions'] = [
+    '2' => '2 pages',
+    '3' => '3 pages',
+    '4' => '4 pages',
+];
+$GLOBALS['TL_LANG']['tl_content']['flipbookStartMode'] = ['Start mode', 'Defines whether the flipbook starts centered or as a double-page spread.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookStartModeOptions'] = [
+    'center' => 'Start centered',
+    'spread' => 'Start with double-page spread',
+];
+$GLOBALS['TL_LANG']['tl_content']['flipbookShowNavigation'] = ['Show navigation', 'Displays previous/next buttons below the flipbook.'];
@@ -0,0 +1,32 @@
+{% set hasPdf = pdfUrl|default('') is not empty %}
+
+<div
+    class="ce-blatterbares-pdf mod-pdf-flipbook"
+    data-pdf-flipbook-element="1"
+    data-pdf-url="{{ pdfUrl|default('')|e('html_attr') }}"
+    data-initial-pages="{{ initialRenderPages|default(4)|e('html_attr') }}"
+    data-start-mode="{{ startMode|default('center')|e('html_attr') }}"
+    data-show-navigation="{{ showNavigation ? '1' : '0' }}"
+    tabindex="0"
+>
+    <div class="mod-pdf-flipbook__status" data-flipbook-loader="1" aria-live="polite">PDF wird geladen ...</div>
+
+    <div class="mod-pdf-flipbook__stage" data-flipbook-stage="1">
+        <div id="flipbook-{{ data.id|default(random()) }}" class="c-flipbook" data-flipbook-book="1"></div>
+    </div>
+
+    {% if showNavigation %}
+        <div class="mod-pdf-flipbook__controls" aria-label="Flipbook Navigation">
+            <button type="button" data-flipbook-prev="1">Zurück</button>
+            <button type="button" data-flipbook-next="1">Weiter</button>
+        </div>
+    {% endif %}
+
+    {% if not hasPdf %}
+        <p class="mod-pdf-flipbook__error">Keine PDF-Datei konfiguriert.</p>
+    {% endif %}
+</div>
+
+<link rel="stylesheet" href="/bundles/flipbook/assets/vendor/flipbook.min.css?v=20260414d">
+<link rel="stylesheet" href="/bundles/flipbook/assets/flipbook-module.css?v=20260414d">
+<script type="module" src="/bundles/flipbook/assets/flipbook-module.js?v=20260414d"></script>