diff --git a/contao/dca/tl_content.php b/contao/dca/tl_content.php
index de0c3cd..02f9ab9 100644
--- a/contao/dca/tl_content.php
+++ b/contao/dca/tl_content.php
@@ -2,7 +2,7 @@
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']['palettes']['blatterbares_pdf'] = '{type_legend},type,headline;{flipbook_legend},flipbookPdfSrc,flipbookInitialPages,flipbookStartMode,flipbookShowNavigation,flipbookPlaySound;{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'],
@@ -39,3 +39,11 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['flipbookShowNavigation'] = [
'eval' => ['tl_class' => 'w50 m12'],
'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => '1'],
];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['flipbookPlaySound'] = [
+ 'label' => &$GLOBALS['TL_LANG']['tl_content']['flipbookPlaySound'],
+ 'exclude' => true,
+ 'inputType' => 'checkbox',
+ 'eval' => ['tl_class' => 'w50 m12'],
+ 'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => '1'],
+];
diff --git a/contao/languages/de/tl_content.php b/contao/languages/de/tl_content.php
index ab84d4c..f7d31d6 100644
--- a/contao/languages/de/tl_content.php
+++ b/contao/languages/de/tl_content.php
@@ -16,3 +16,4 @@ $GLOBALS['TL_LANG']['tl_content']['flipbookStartModeOptions'] = [
'spread' => 'als Doppelseite starten',
];
$GLOBALS['TL_LANG']['tl_content']['flipbookShowNavigation'] = ['Navigation anzeigen', 'Zeigt Vor-/Zurueck-Buttons unter dem Flipbook an.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookPlaySound'] = ['Blättersound abspielen', 'Spielt beim Blättern einen Sound ab.'];
diff --git a/contao/languages/en/tl_content.php b/contao/languages/en/tl_content.php
index f59c0f2..db5fbb6 100644
--- a/contao/languages/en/tl_content.php
+++ b/contao/languages/en/tl_content.php
@@ -16,3 +16,4 @@ $GLOBALS['TL_LANG']['tl_content']['flipbookStartModeOptions'] = [
'spread' => 'Start with double-page spread',
];
$GLOBALS['TL_LANG']['tl_content']['flipbookShowNavigation'] = ['Show navigation', 'Displays previous/next buttons below the flipbook.'];
+$GLOBALS['TL_LANG']['tl_content']['flipbookPlaySound'] = ['Play page-turn sound', 'Plays a sound effect while turning pages.'];
diff --git a/contao/templates/content_element/blatterbares_pdf.html.twig b/contao/templates/content_element/blatterbares_pdf.html.twig
index 1377f9f..5e37380 100644
--- a/contao/templates/content_element/blatterbares_pdf.html.twig
+++ b/contao/templates/content_element/blatterbares_pdf.html.twig
@@ -7,6 +7,7 @@
data-initial-pages="{{ initialRenderPages|default(4)|e('html_attr') }}"
data-start-mode="{{ startMode|default('center')|e('html_attr') }}"
data-show-navigation="{{ showNavigation ? '1' : '0' }}"
+ data-play-turn-sound="{{ ((playTurnSound is defined) ? playTurnSound : true) ? '1' : '0' }}"
tabindex="0"
>
PDF wird geladen ...
@@ -27,6 +28,6 @@
{% endif %}
-
-
-
+
+
+
diff --git a/public/assets/audio/turn.mp3 b/public/assets/audio/turn.mp3
new file mode 100644
index 0000000..9236a75
Binary files /dev/null and b/public/assets/audio/turn.mp3 differ
diff --git a/public/assets/flipbook-module.css b/public/assets/flipbook-module.css
index e2a5f23..003a323 100644
--- a/public/assets/flipbook-module.css
+++ b/public/assets/flipbook-module.css
@@ -31,6 +31,7 @@
width: 100%;
margin: 0 auto;
background: #e0e0e0;
+ z-index: 1;
}
.mod-pdf-flipbook .c-flipbook {
@@ -67,6 +68,8 @@
}
.mod-pdf-flipbook__controls {
+ position: relative;
+ z-index: 20;
display: flex;
gap: 0.6rem;
margin-top: 0.9rem;
diff --git a/public/assets/flipbook-module.js b/public/assets/flipbook-module.js
index 7a33b2c..c8c2d36 100644
--- a/public/assets/flipbook-module.js
+++ b/public/assets/flipbook-module.js
@@ -2,6 +2,7 @@ const MODULE_SELECTOR = '[data-pdf-flipbook-element="1"]';
const PDF_MODULE_URL = '/bundles/flipbook/assets/vendor/pdf.min.mjs';
const PDF_WORKER_URL = '/bundles/flipbook/assets/vendor/pdf.worker.min.mjs';
const FLIPBOOK_MODULE_URL = '/bundles/flipbook/assets/vendor/flipbook.esm.min.js';
+const TURN_SOUND_URL = '/bundles/flipbook/assets/audio/turn.mp3';
const INIT_MARKER = 'pdfFlipbookInitialized';
const BOOTSTRAP_MARKER = '__mummertPdfFlipbookBootstrapBound';
@@ -39,6 +40,7 @@ class PdfFlipbookModule {
? Math.min(4, Math.max(2, parsedInitialPages))
: 4;
this.showNavigation = root.dataset.showNavigation === '1';
+ this.playTurnSoundEnabled = root.dataset.playTurnSound !== '0';
this.startMode = (root.dataset.startMode === 'spread' || root.dataset.startMode === 'cover')
? 'spread'
: 'center';
@@ -57,6 +59,7 @@ class PdfFlipbookModule {
this.renderInProgress = false;
this.resizeTimer = null;
this.touchStart = null;
+ this.turnSound = this.playTurnSoundEnabled ? this.createTurnSound() : null;
this.aspectRatio = 1.4142;
this.pageWidth = 0;
this.pageHeight = 0;
@@ -185,11 +188,30 @@ class PdfFlipbookModule {
width: '100%',
height: `${this.pageHeight}px`,
onPageTurn: () => {
+ this.playTurnSound();
this.queuePages(this.getLazyCandidates());
},
});
}
+ createTurnSound() {
+ const audio = new Audio(TURN_SOUND_URL);
+ audio.preload = 'auto';
+
+ return audio;
+ }
+
+ playTurnSound() {
+ if (!this.playTurnSoundEnabled || !this.turnSound) {
+ return;
+ }
+
+ this.turnSound.currentTime = 0;
+
+ this.turnSound.play().catch(() => {
+ });
+ }
+
bindKeyboard() {
this.root.addEventListener('pointerdown', () => {
this.root.focus();
diff --git a/src/Controller/ContentElement/BlatterbaresPdfController.php b/src/Controller/ContentElement/BlatterbaresPdfController.php
index 62f2537..7932d70 100644
--- a/src/Controller/ContentElement/BlatterbaresPdfController.php
+++ b/src/Controller/ContentElement/BlatterbaresPdfController.php
@@ -19,6 +19,7 @@ class BlatterbaresPdfController extends AbstractContentElementController
{
$template->set('pdfUrl', $this->resolvePdfUrl($model));
$template->set('showNavigation', '1' === (string) ($model->flipbookShowNavigation ?? '1'));
+ $template->set('playTurnSound', '1' === (string) ($model->flipbookPlaySound ?? '1'));
$template->set('initialRenderPages', $this->normalizeInitialRenderPages((string) ($model->flipbookInitialPages ?? '4')));
$template->set('startMode', $this->normalizeStartMode((string) ($model->flipbookStartMode ?? 'center')));