Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 97d5f447e1 | |||
| 1564d96b01 |
@@ -1,21 +1,19 @@
|
||||
MIT License
|
||||
All rights reserved.
|
||||
|
||||
Copyright (c) 2026 Mummert
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
This source code is publicly visible for informational and deployment purposes only.
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
Permission is NOT granted to:
|
||||
- use this code for any commercial or non-commercial purpose
|
||||
- copy, modify, merge, publish, distribute, sublicense, or sell copies of the Software
|
||||
- use this code in any other project
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
Any use of this code without explicit written permission from the author is strictly prohibited.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
|
||||
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||||
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
DEALINGS IN THE SOFTWARE.
|
||||
|
||||
@@ -6,7 +6,7 @@ This bundle contains the following third-party open source libraries in `public/
|
||||
|
||||
- Project: https://github.com/mozilla/pdf.js
|
||||
- Package: `pdfjs-dist`
|
||||
- Version: `4.9.155`
|
||||
- Version: `5.6.205`
|
||||
- License: Apache-2.0
|
||||
|
||||
## flipbook-js
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
"name": "mummert/flipbook-bundle",
|
||||
"description": "PDF flipbook content element for Contao 5.7 using pdfjs-dist and flipbook-js.",
|
||||
"type": "contao-bundle",
|
||||
"license": "MIT",
|
||||
"license": "proprietary",
|
||||
"keywords": [
|
||||
"contao",
|
||||
"contao-bundle",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set hasPdf = pdfUrl|default('') is not empty %}
|
||||
|
||||
<div
|
||||
class="ce-blatterbares-pdf mod-pdf-flipbook"
|
||||
class="ce-blatterbares-pdf mod-pdf-flipbook is-loading"
|
||||
data-pdf-flipbook-element="1"
|
||||
data-pdf-url="{{ pdfUrl|default('')|e('html_attr') }}"
|
||||
data-initial-pages="{{ initialRenderPages|default(4)|e('html_attr') }}"
|
||||
@@ -12,12 +12,12 @@
|
||||
>
|
||||
<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 class="mod-pdf-flipbook__stage" data-flipbook-stage="1" style="visibility:hidden;opacity:0">
|
||||
<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">
|
||||
<div class="mod-pdf-flipbook__controls" data-flipbook-controls="1" aria-label="Flipbook Navigation" style="visibility:hidden;opacity:0">
|
||||
<button type="button" data-flipbook-prev="1">Zurück</button>
|
||||
<button type="button" data-flipbook-next="1">Weiter</button>
|
||||
</div>
|
||||
@@ -28,6 +28,6 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="/bundles/flipbook/assets/vendor/flipbook.min.css?v=20260414f">
|
||||
<link rel="stylesheet" href="/bundles/flipbook/assets/flipbook-module.css?v=20260414f">
|
||||
<script type="module" src="/bundles/flipbook/assets/flipbook-module.js?v=20260414f"></script>
|
||||
<link rel="stylesheet" href="/bundles/flipbook/assets/vendor/flipbook.min.css?v=20260414j">
|
||||
<link rel="stylesheet" href="/bundles/flipbook/assets/flipbook-module.css?v=20260414j">
|
||||
<script type="module" src="/bundles/flipbook/assets/flipbook-module.js?v=20260414j"></script>
|
||||
|
||||
@@ -13,11 +13,24 @@
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--flipbook-text);
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__status::before {
|
||||
content: '';
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 2px solid rgba(48, 45, 41, 0.25);
|
||||
border-top-color: rgba(48, 45, 41, 0.85);
|
||||
border-radius: 50%;
|
||||
animation: mod-pdf-flipbook-spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__status.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -26,18 +39,29 @@
|
||||
color: #9f1f1f;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__status.is-error::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #e0e0e0;
|
||||
z-index: 1;
|
||||
transition: opacity 1.3s ease 0.5s;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook .c-flipbook {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook .c-flipbook.is-booting,
|
||||
.mod-pdf-flipbook .c-flipbook.is-booting .c-flipbook__page,
|
||||
.mod-pdf-flipbook .c-flipbook.is-booting .c-flipbook__page::before {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook .c-flipbook__page {
|
||||
background: #fefdf9;
|
||||
overflow: hidden;
|
||||
@@ -73,6 +97,7 @@
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.9rem;
|
||||
transition: opacity 1.3s ease 0.5s;
|
||||
}
|
||||
|
||||
.mod-pdf-flipbook__error {
|
||||
@@ -85,3 +110,9 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mod-pdf-flipbook-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,6 +36,8 @@ class PdfFlipbookModule {
|
||||
this.root = root;
|
||||
this.dependencies = dependencies;
|
||||
this.pdfUrl = (root.dataset.pdfUrl || '').trim();
|
||||
this.root.classList.add('is-loading');
|
||||
this.root.classList.remove('is-ready');
|
||||
this.initialPages = Number.isFinite(parsedInitialPages)
|
||||
? Math.min(4, Math.max(2, parsedInitialPages))
|
||||
: 4;
|
||||
@@ -47,6 +49,7 @@ class PdfFlipbookModule {
|
||||
this.loader = root.querySelector('[data-flipbook-loader="1"]');
|
||||
this.stage = root.querySelector('[data-flipbook-stage="1"]');
|
||||
this.bookElement = root.querySelector('[data-flipbook-book="1"]');
|
||||
this.controlsElement = root.querySelector('[data-flipbook-controls="1"]');
|
||||
this.nextButton = this.showNavigation ? root.querySelector('[data-flipbook-next="1"]') : null;
|
||||
this.prevButton = this.showNavigation ? root.querySelector('[data-flipbook-prev="1"]') : null;
|
||||
|
||||
@@ -76,6 +79,7 @@ class PdfFlipbookModule {
|
||||
|
||||
if (!this.pdfUrl) {
|
||||
this.setStatus('Keine PDF-Datei gefunden.', true);
|
||||
this.root.classList.remove('is-loading');
|
||||
|
||||
return;
|
||||
}
|
||||
@@ -94,12 +98,47 @@ class PdfFlipbookModule {
|
||||
this.bindTouchSwipe();
|
||||
this.bindResize();
|
||||
this.queuePages(this.getLazyCandidates());
|
||||
await this.showReadyState();
|
||||
this.setStatus('');
|
||||
} catch {
|
||||
this.setStatus('PDF konnte nicht geladen werden.', true);
|
||||
this.root.classList.remove('is-loading');
|
||||
}
|
||||
}
|
||||
|
||||
async showReadyState() {
|
||||
await new Promise((resolve) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
window.requestAnimationFrame(resolve);
|
||||
});
|
||||
});
|
||||
|
||||
if (this.bookElement) {
|
||||
this.bookElement.classList.remove('is-booting');
|
||||
}
|
||||
|
||||
this.root.classList.remove('is-loading');
|
||||
this.root.classList.add('is-ready');
|
||||
|
||||
if (this.stage) {
|
||||
this.stage.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
if (this.controlsElement) {
|
||||
this.controlsElement.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
if (this.stage) {
|
||||
this.stage.style.opacity = '1';
|
||||
}
|
||||
|
||||
if (this.controlsElement) {
|
||||
this.controlsElement.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadPdf() {
|
||||
const loadingTask = this.dependencies.pdfjsLib.getDocument({
|
||||
url: this.pdfUrl,
|
||||
@@ -178,6 +217,8 @@ class PdfFlipbookModule {
|
||||
initializeFlipbook() {
|
||||
const startsWithDoubleSpread = this.startMode === 'spread';
|
||||
|
||||
this.bookElement.classList.add('is-booting');
|
||||
|
||||
this.flipbook = new this.dependencies.FlipBook(this.bookElement, {
|
||||
nextButton: this.nextButton,
|
||||
previousButton: this.prevButton,
|
||||
|
||||
Reference in New Issue
Block a user