// ========== PDF.js Worker Setup ========== setTimeout(() => { if (window.pdfjsLib) { pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.min.mjs"; } }, 100); // ========== Fitinsref Flipbook Logic ========== setTimeout(() => { 'use strict'; // ===== KONFIGURATION: Hier PDF-URL anpassen ===== const PDF_URL = "https://onecdn.io/media/shwhitepaperbroschure-15a336ad-9a94-4698-a6fa-f397bbb16cbc.pdf"; // ================================================ const container = document.getElementById('fitinsref-flipbook'); if (!container) return; // DOM Elemente const loader = document.getElementById('firf-loader'); const loaderProgress = document.getElementById('firf-loader-progress'); const btnPrev = document.getElementById('firf-prev'); const btnNext = document.getElementById('firf-next'); const btnFs = document.getElementById('firf-fullscreen'); const pageNumEl = document.getElementById('firf-page-num'); const pageCountEl = document.getElementById('firf-page-count'); const stage = document.getElementById('firf-stage'); const spread = document.getElementById('firf-spread'); const curl = document.getElementById('firf-curl'); const leftCanvas = document.getElementById('firf-canvas-left'); const rightCanvas = document.getElementById('firf-canvas-right'); const leftLinks = document.getElementById('firf-links-left'); const rightLinks = document.getElementById('firf-links-right'); const pageLeft = document.getElementById('firf-page-left'); const pageRight = document.getElementById('firf-page-right'); // Hilfsfunktionen const isMobile = () => window.matchMedia('(max-width: 900px)').matches; // Kontextmenü deaktivieren container.addEventListener('contextmenu', e => e.preventDefault()); // State let pdfDoc = null; let totalPages = 0; let currentLeft = 1; let rendering = false; let currentZoom = 1; let lastTap = 0; // Ctrl+Zoom verhindern container.addEventListener('wheel', (e) => { if (e.ctrlKey) e.preventDefault(); }, { passive: false }); // Tastaturnavigation container.tabIndex = 0; container.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'PageDown') next(); if (e.key === 'ArrowLeft' || e.key === 'PageUp') prev(); }); // ===== Zoom Funktionen ===== function setZoom(zoom) { currentZoom = Math.max(1, Math.min(3, zoom)); // Limit 1x - 3x spread.style.transform = `scale(${currentZoom})`; if (currentZoom > 1) { spread.classList.add('zoomed'); stage.style.overflow = 'auto'; } else { spread.classList.remove('zoomed'); stage.style.overflow = 'hidden'; } } function resetZoom() { setZoom(1); stage.scrollTo(0, 0); } // ===== Pinch-to-Zoom für Mobile ===== let initialDistance = 0; let initialZoom = 1; function getDistance(touch1, touch2) { const dx = touch2.clientX - touch1.clientX; const dy = touch2.clientY - touch1.clientY; return Math.sqrt(dx * dx + dy * dy); } stage.addEventListener('touchstart', (e) => { if (e.touches.length === 2) { // Pinch-Zoom Start initialDistance = getDistance(e.touches[0], e.touches[1]); initialZoom = currentZoom; e.preventDefault(); } }, { passive: false }); stage.addEventListener('touchmove', (e) => { if (e.touches.length === 2) { // Pinch-Zoom e.preventDefault(); const currentDistance = getDistance(e.touches[0], e.touches[1]); const scale = currentDistance / initialDistance; setZoom(initialZoom * scale); } }, { passive: false }); // ===== Double-Tap to Zoom ===== stage.addEventListener('touchend', (e) => { const currentTime = new Date().getTime(); const tapLength = currentTime - lastTap; if (tapLength < 300 && tapLength > 0) { // Double-Tap erkannt e.preventDefault(); if (currentZoom > 1) { resetZoom(); } else { setZoom(2); } } lastTap = currentTime; }); // ===== Vollbild ===== function toggleFullscreen() { if (!document.fullscreenElement) { container.requestFullscreen?.(); } else { document.exitFullscreen?.(); } resetZoom(); setTimeout(() => resizeAndRender(), 100); } // ===== Optimierte Scale-Berechnung ===== function computeScale(viewport, pageContainer) { const containerRect = pageContainer.getBoundingClientRect(); const availableWidth = containerRect.width * 0.95; const availableHeight = containerRect.height * 0.95; const pageWidth = viewport.width; const pageHeight = viewport.height; const scaleWidth = availableWidth / pageWidth; const scaleHeight = availableHeight / pageHeight; return Math.min(scaleWidth, scaleHeight); } // ===== Seite rendern mit HiDPI Support ===== async function renderPage(pageNumber, canvas, linkLayer, pageContainer) { const page = await pdfDoc.getPage(pageNumber); const pixelRatio = window.devicePixelRatio || 1; const baseViewport = page.getViewport({ scale: 1.0 }); const displayScale = computeScale(baseViewport, pageContainer); const renderScale = displayScale * pixelRatio; const viewport = page.getViewport({ scale: renderScale }); canvas.width = Math.floor(viewport.width); canvas.height = Math.floor(viewport.height); canvas.style.width = Math.floor(viewport.width / pixelRatio) + 'px'; canvas.style.height = Math.floor(viewport.height / pixelRatio) + 'px'; const context = canvas.getContext('2d', { alpha: false }); await page.render({ canvasContext: context, viewport: viewport }).promise; // Links Layer leeren while (linkLayer.firstChild) { linkLayer.removeChild(linkLayer.firstChild); } // Canvas-Position für Link-Offset const canvasRect = canvas.getBoundingClientRect(); const containerRect = pageContainer.getBoundingClientRect(); const offsetX = canvasRect.left - containerRect.left; const offsetY = canvasRect.top - containerRect.top; // Links mit Display-Viewport const displayViewport = page.getViewport({ scale: displayScale }); const annotations = await page.getAnnotations(); annotations.forEach((ann) => { if (!ann || ann.subtype !== 'Link') return; const rect = window.pdfjsLib.Util.normalizeRect(ann.rect); const [x1, y1, x2, y2] = displayViewport.convertToViewportRectangle(rect); const left = Math.min(x1, x2) + offsetX; const top = Math.min(y1, y2) + offsetY; const width = Math.abs(x2 - x1); const height = Math.abs(y2 - y1); const a = document.createElement('a'); a.href = ann.url || '#'; a.target = '_blank'; a.rel = 'noopener'; a.style.left = left + 'px'; a.style.top = top + 'px'; a.style.width = width + 'px'; a.style.height = height + 'px'; a.setAttribute('aria-label', 'Link'); a.title = ann.url || 'Link öffnen'; linkLayer.appendChild(a); }); } // ===== Spread rendern (Broschüren-Modus) - BUG BEHOBEN ===== async function renderSpread() { if (!pdfDoc || rendering) return; rendering = true; const leftPageNum = Math.max(1, Math.min(totalPages, currentLeft)); let rightPageNum = null; // Broschüren-Logik: Seite 1 alleine, danach Doppelseiten if (currentLeft === 1) { // Nur Deckblatt rightPageNum = null; pageRight.style.display = 'none'; } else if (!isMobile()) { // Doppelseite ab Seite 2 rightPageNum = leftPageNum + 1; if (rightPageNum <= totalPages) { pageRight.style.display = ''; } else { rightPageNum = null; pageRight.style.display = 'none'; } } else { // Mobile: immer nur eine Seite pageRight.style.display = 'none'; } // Linke Seite immer rendern pageLeft.style.display = ''; await renderPage(leftPageNum, leftCanvas, leftLinks, pageLeft); // Rechte Seite nur wenn vorhanden if (rightPageNum && rightPageNum <= totalPages) { await renderPage(rightPageNum, rightCanvas, rightLinks, pageRight); } // Seitenzahl anzeigen if (isMobile()) { pageNumEl.textContent = String(leftPageNum); } else { pageNumEl.textContent = rightPageNum ? String(leftPageNum) + '-' + String(rightPageNum) : String(leftPageNum); } rendering = false; } // ===== Navigation (Broschüren-Modus) ===== function next() { if (!pdfDoc || rendering) return; resetZoom(); // Zoom zurücksetzen beim Blättern if (isMobile()) { if (currentLeft < totalPages) { currentLeft += 1; flipAnim('right'); renderSpread(); } } else { if (currentLeft === 1) { // Von Deckblatt zu Seite 2-3 currentLeft = 2; flipAnim('right'); renderSpread(); } else if (currentLeft + 2 <= totalPages) { // Normale Doppelseiten currentLeft += 2; flipAnim('right'); renderSpread(); } } } function prev() { if (!pdfDoc || rendering) return; resetZoom(); // Zoom zurücksetzen beim Blättern if (isMobile()) { if (currentLeft > 1) { currentLeft -= 1; flipAnim('left'); renderSpread(); } } else { if (currentLeft === 2) { // Zurück zum Deckblatt currentLeft = 1; flipAnim('left'); renderSpread(); } else if (currentLeft > 2) { // Normale Doppelseiten currentLeft -= 2; flipAnim('left'); renderSpread(); } } } // ===== Flip Animation ===== function flipAnim(direction) { curl.style.opacity = 0.75; curl.style.transition = 'none'; curl.style.transformOrigin = direction === 'right' ? 'right center' : 'left center'; curl.style.transform = `translateX(${direction === 'right' ? '0' : '-100%'})`; requestAnimationFrame(() => { curl.style.transition = 'transform .35s ease, opacity .35s ease'; curl.style.transform = `translateX(${direction === 'right' ? '-100%' : '0'})`; curl.addEventListener('transitionend', () => { curl.style.opacity = 0; }, { once: true }); }); } // ===== Resize ===== function resizeAndRender() { if (!rendering) { resetZoom(); renderSpread(); } } // ===== Touch/Swipe (nur wenn nicht gezoomt) ===== let touchStartX = 0; let touchStartY = 0; stage.addEventListener('touchstart', (e) => { if (e.touches?.length === 1 && currentZoom <= 1) { touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; } }, { passive: true }); stage.addEventListener('touchend', (e) => { if (currentZoom > 1) return; // Kein Swipe beim Zoomen const endX = e.changedTouches?.[0]?.clientX || touchStartX; const endY = e.changedTouches?.[0]?.clientY || touchStartY; const dx = endX - touchStartX; const dy = endY - touchStartY; // Nur horizontale Swipes zählen if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) { dx < 0 ? next() : prev(); } }, { passive: true }); // ===== Event Listeners ===== btnNext.addEventListener('click', next); btnPrev.addEventListener('click', prev); btnFs.addEventListener('click', toggleFullscreen); window.addEventListener('resize', () => { clearTimeout(window.resizeTimer); window.resizeTimer = setTimeout(resizeAndRender, 150); }); document.addEventListener('fullscreenchange', () => { setTimeout(resizeAndRender, 100); }); // Druck/Speichern blockieren document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && ['p', 's'].includes(e.key.toLowerCase())) { e.preventDefault(); e.stopPropagation(); } }, true); // ===== PDF laden ===== async function load() { if (!window.pdfjsLib) { console.error('PDF.js library not available'); loaderProgress.textContent = 'Fehler'; return; } try { const loadingTask = window.pdfjsLib.getDocument({ url: PDF_URL, disableStream: false, disableAutoFetch: false }); loadingTask.onProgress = function (progress) { if (progress.total > 0) { const percent = Math.round((progress.loaded / progress.total) * 100); loaderProgress.textContent = percent + '%'; } }; pdfDoc = await loadingTask.promise; totalPages = pdfDoc.numPages; pageCountEl.textContent = String(totalPages); currentLeft = 1; loaderProgress.textContent = '100%'; setTimeout(() => { loader.classList.add('hidden'); }, 300); await renderSpread(); } catch (err) { console.error('PDF load error:', err); loaderProgress.textContent = 'Fehler'; setTimeout(() => { loader.classList.add('hidden'); stage.innerHTML = '

Die PDF konnte nicht geladen werden.
Bitte überprüfen Sie die URL und CORS-Einstellungen.

'; }, 1000); } } load(); }, 200);