Spaces:

Jaimodiji
/

Report-Generator

Sleeping

App Files Files Community

t commited on Jan 17

Commit

7d3748e

1 Parent(s): 6fb2610

fix: switch to bullseye base to resolve wkhtmltox dependencies

Browse files

Files changed (1) hide show

templates/pdfjs_viewer.html +179 -43

templates/pdfjs_viewer.html CHANGED Viewed

@@ -2,11 +2,11 @@
 <html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>{{ pdf_title }}</title>
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <!-- Bootstrap CSS (only for Toast styling, scoped to avoid breaking layout) -->
     <style>
         /* Mozilla PDF.js Viewer Visual Replication */
         :root {
@@ -27,6 +27,7 @@
         * {
             box-sizing: border-box;
             user-select: none;
         }
         body {
@@ -40,6 +41,8 @@
             display: flex;
             flex-direction: column;
             color: var(--text-color);
         }
         #outerContainer {
@@ -67,7 +70,7 @@
             flex: 1;
             overflow-y: auto;
             padding: 10px;
-            position: relative; /* Ensure offsetTop works reliably */
         }
         #sidebarContent::-webkit-scrollbar { width: 10px; }
@@ -97,7 +100,7 @@
         .thumbnail-canvas {
             display: block;
-            width: 100px; /* Fixed width for thumbnails */
             height: auto;
         }
@@ -195,6 +198,9 @@
             right: 0; bottom: 0; left: 0;
             background-color: var(--body-bg);
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
         }
         #viewerContainer::-webkit-scrollbar { width: 14px; height: 14px; }
@@ -208,6 +214,9 @@
             align-items: center;
             padding: 20px 0;
             position: relative;
         }
         .page {
@@ -246,7 +255,7 @@
         }
         .toast {
-            background-color: #2b3035; /* Bootstrap dark toast bg */
             color: #fff;
             border-radius: 0.375rem;
             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
@@ -466,6 +475,124 @@
             toast: document.getElementById('cacheToast')
         };
         // ==========================================
         // INDEXED DB CACHE
         // ==========================================
@@ -500,10 +627,7 @@
                     if (!record) return null;
-                    // Unpack if wrapped (new format) or use raw (legacy)
                     const data = record.data || record;
-                    // If it's the new format, update timestamp (async fire-and-forget)
                     if (record.data) {
                         this.touch(url, record);
                     }
@@ -530,7 +654,6 @@
                     const tx = db.transaction(this.storeName, 'readwrite');
                     const store = tx.objectStore(this.storeName);
-                    // Calculate usage and collect entries for eviction
                     let currentSize = 0;
                     const entries = [];
@@ -539,11 +662,10 @@
                         req.onsuccess = (e) => {
                             const cursor = e.target.result;
                             if (cursor) {
-                                // Skip if it's the current file (we are overwriting anyway)
                                 if (cursor.key !== url) {
                                     const val = cursor.value;
                                     const itemSize = (val.data || val).byteLength || 0;
-                                    const itemTime = val.timestamp || 0; // Legacy = 0 (evict first)
                                     currentSize += itemSize;
                                     entries.push({ key: cursor.key, size: itemSize, timestamp: itemTime });
                                 }
@@ -555,11 +677,8 @@
                         req.onerror = () => resolve();
                     });
-                    // Evict if needed
                     if (currentSize + newSize > this.MAX_TOTAL_SIZE) {
-                        // Sort oldest first
                         entries.sort((a, b) => a.timestamp - b.timestamp);
                         while (entries.length > 0 && (currentSize + newSize > this.MAX_TOTAL_SIZE)) {
                             const entry = entries.shift();
                             store.delete(entry.key);
@@ -568,7 +687,6 @@
                         }
                     }
-                    // Save new record
                     const record = { data: data, timestamp: Date.now() };
                     store.put(record, url);
@@ -592,7 +710,7 @@
             elements.toast.classList.remove('show');
         }
-        window.hideToast = hideToast; // Expose for close button
         // ==========================================
         // LOADING
@@ -609,10 +727,9 @@
                 let isCached = !!data;
                 if (isCached) {
-                    showToast(); // Show toast if cached
                 }
-                // Config for fonts to prevent warnings
                 const params = {
                     cMapUrl: 'https://cdn.jsdelivr.net/npm/pdf.js@3.11.174/dist/cmaps/',
                     cMapPacked: true,
@@ -635,9 +752,7 @@
                 state.pdfDoc = await loadingTask.promise;
                 if (!isCached) {
-                    // Save to cache for next time
                     state.pdfDoc.getData().then(pdfData => {
-                        // Limit cache to 100MB per file
                         if (pdfData.byteLength <= 100 * 1024 * 1024) {
                             PDFCache.put(config.url, pdfData);
                         } else {
@@ -664,8 +779,9 @@
             elements.viewer.innerHTML = '';
             state.pages = [];
-            // Get last viewed page for this PDF
-            const lastPage = PageMemory.getLastPage(config.pdfIdentifier);
             for (let i = 1; i <= state.pdfDoc.numPages; i++) {
                 const pageDiv = document.createElement('div');
@@ -673,6 +789,7 @@
                 pageDiv.setAttribute('data-page-number', i);
                 pageDiv.id = `pageContainer${i}`;
                 pageDiv.style.width = '612px';
                 pageDiv.style.height = '792px';
@@ -681,9 +798,13 @@
             }
             setupIntersectionObserver();
-            generateThumbnails();
-            // Scroll to last viewed page after a short delay
             if (lastPage > 1) {
                 setTimeout(() => scrollToPage(lastPage), 100);
             }
@@ -716,7 +837,6 @@
                     if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
                         const pageNum = parseInt(entry.target.getAttribute('data-page-number'));
                         updateUIState(pageNum);
-                        // Save current page to localStorage
                         PageMemory.saveLastPage(config.pdfIdentifier, pageNum);
                     }
                 });
@@ -783,7 +903,6 @@
                 imgContainer.className = 'thumbnail-image-container';
                 imgContainer.id = `thumb-img-${i}`;
-                // Placeholder dimensions until render
                 imgContainer.style.width = '100px';
                 imgContainer.style.height = '130px';
@@ -796,14 +915,11 @@
                 elements.sidebarContent.appendChild(thumbContainer);
             }
-            // Render thumbnails lazily when sidebar is open or idle
-            // For now, render them sequentially to avoid UI freeze
             renderThumbnailsQueue();
         }
         async function renderThumbnailsQueue() {
              for (let i = 1; i <= state.pdfDoc.numPages; i++) {
-                 // Check if we should render (could add visibility check here)
                  await renderSingleThumbnail(i);
              }
         }
@@ -811,7 +927,7 @@
         async function renderSingleThumbnail(i) {
             try {
                 const page = await state.pdfDoc.getPage(i);
-                const viewport = page.getViewport({ scale: 0.2 }); // Small scale
                 const canvas = document.createElement('canvas');
                 canvas.className = 'thumbnail-canvas';
                 canvas.height = viewport.height;
@@ -837,8 +953,6 @@
             if (num < 1 || num > state.pdfDoc.numPages) return;
             const pageDiv = document.getElementById(`pageContainer${num}`);
             if (pageDiv) {
-                // FIXED: Use scrollTop instead of scrollIntoView to prevent layout breaking
-                // Calculate offset relative to the container
                 elements.container.scrollTop = pageDiv.offsetTop;
             }
         }
@@ -853,17 +967,14 @@
             if (thumb) {
                 thumb.classList.add('selected');
-                // Manual Scroll Logic for Sidebar (Replaces scrollIntoView)
                 const thumbTop = thumb.offsetTop;
                 const thumbHeight = thumb.clientHeight;
                 const containerHeight = elements.sidebarContent.clientHeight;
                 const containerScroll = elements.sidebarContent.scrollTop;
-                // If above visible area
                 if (thumbTop < containerScroll) {
                     elements.sidebarContent.scrollTop = thumbTop - 10;
                 }
-                // If below visible area
                 else if (thumbTop + thumbHeight > containerScroll + containerHeight) {
                     elements.sidebarContent.scrollTop = thumbTop + thumbHeight - containerHeight + 10;
                 }
@@ -895,18 +1006,41 @@
         });
         if (elements.zoomIn) elements.zoomIn.addEventListener('click', () => {
-            let current = parseFloat(elements.scaleSelect.value) || 1.0;
-            const newScale = (current + 0.25).toString();
-            elements.scaleSelect.value = newScale;
-            config.scale += 0.25;
             config.currentScaleValue = config.scale.toString();
             initViewer();
         });
         if (elements.zoomOut) elements.zoomOut.addEventListener('click', () => {
-             if (config.scale <= 0.5) return;
-             config.scale -= 0.25;
              config.currentScaleValue = config.scale.toString();
              initViewer();
         });
@@ -923,13 +1057,15 @@
             link.click();
         });
         // Start loading
         if (typeof pdfjsLib !== 'undefined') {
             loadPDF();
         } else {
-            // Wait for script load if needed (though position at end of body usually avoids this)
             window.addEventListener('load', loadPDF);
         }
     </script>
 </body>
-</html>

 <html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>{{ pdf_title }}</title>
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <!-- Inline Styles -->
     <style>
         /* Mozilla PDF.js Viewer Visual Replication */
         :root {
         * {
             box-sizing: border-box;
             user-select: none;
+            -webkit-user-select: none;
         }
         body {
             display: flex;
             flex-direction: column;
             color: var(--text-color);
+            /* Prevent native pull-to-refresh and other touch behaviors */
+            overscroll-behavior: none;
         }
         #outerContainer {
             flex: 1;
             overflow-y: auto;
             padding: 10px;
+            position: relative;
         }
         #sidebarContent::-webkit-scrollbar { width: 10px; }
         .thumbnail-canvas {
             display: block;
+            width: 100px;
             height: auto;
         }
             right: 0; bottom: 0; left: 0;
             background-color: var(--body-bg);
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
+            /* Important for touch handling */
+            touch-action: pan-x pan-y;
+            -webkit-overflow-scrolling: touch;
         }
         #viewerContainer::-webkit-scrollbar { width: 14px; height: 14px; }
             align-items: center;
             padding: 20px 0;
             position: relative;
+            /* Enhance hardware acceleration for smoother pinch */
+            will-change: transform;
+            transform-origin: top center;
         }
         .page {
         }
         .toast {
+            background-color: #2b3035;
             color: #fff;
             border-radius: 0.375rem;
             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
             toast: document.getElementById('cacheToast')
         };
+        // ==========================================
+        // PINCH TO ZOOM MODULE
+        // ==========================================
+        const PinchZoom = {
+            state: {
+                active: false,
+                startDist: 0,
+                startScale: 1,
+                lastRatio: 1
+            },
+            init() {
+                // Attach listeners to the container to capture gestures anywhere on the viewer
+                elements.container.addEventListener('touchstart', this.onStart.bind(this), { passive: false });
+                elements.container.addEventListener('touchmove', this.onMove.bind(this), { passive: false });
+                elements.container.addEventListener('touchend', this.onEnd.bind(this));
+            },
+            getDistance(e) {
+                return Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY
+                );
+            },
+            getCenter(e) {
+                return {
+                    x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
+                    y: (e.touches[0].clientY + e.touches[1].clientY) / 2
+                };
+            },
+            onStart(e) {
+                if (e.touches.length === 2) {
+                    e.preventDefault(); // Prevent native browser zoom/pan
+                    this.state.active = true;
+                    this.state.startDist = this.getDistance(e);
+                    this.state.startScale = config.scale;
+                    this.state.lastRatio = 1;
+                    // Calculate transform origin based on finger position relative to viewer
+                    const center = this.getCenter(e);
+                    const rect = elements.viewer.getBoundingClientRect();
+                    // The viewer might be scrolled, getBoundingClientRect handles that
+                    const originX = center.x - rect.left;
+                    const originY = center.y - rect.top;
+                    // Set transform origin so we zoom into the space between fingers
+                    elements.viewer.style.transformOrigin = `${originX}px ${originY}px`;
+                    elements.viewer.style.transition = 'none';
+                }
+            },
+            onMove(e) {
+                if (this.state.active && e.touches.length === 2) {
+                    e.preventDefault();
+                    const dist = this.getDistance(e);
+                    const ratio = dist / this.state.startDist;
+                    this.state.lastRatio = ratio;
+                    // Apply temporary visual scale using CSS transform
+                    // This is performant (60fps) compared to re-rendering canvas
+                    elements.viewer.style.transform = `scale(${ratio})`;
+                }
+            },
+            onEnd(e) {
+                if (this.state.active && e.touches.length < 2) {
+                    this.state.active = false;
+                    // Calculate new final scale
+                    let newScale = this.state.startScale * this.state.lastRatio;
+                    // Clamp scale to reasonable limits (0.25x to 5.0x)
+                    newScale = Math.max(0.25, Math.min(newScale, 5.0));
+                    // Reset CSS transform
+                    elements.viewer.style.transform = 'none';
+                    elements.viewer.style.transformOrigin = 'center top';
+                    // Apply new scale to config
+                    config.scale = newScale;
+                    config.currentScaleValue = newScale.toString();
+                    // Update UI Dropdown
+                    this.updateScaleDropdown(newScale);
+                    // Re-render PDF at new resolution (crisp text)
+                    initViewer();
+                }
+            },
+            updateScaleDropdown(scaleVal) {
+                // Check if value exists in dropdown
+                const rounded = Math.round(scaleVal * 100) / 100;
+                let exists = false;
+                // Try to find exact match
+                for(let option of elements.scaleSelect.options) {
+                    if (Math.abs(parseFloat(option.value) - scaleVal) < 0.05) {
+                        elements.scaleSelect.value = option.value;
+                        exists = true;
+                        break;
+                    }
+                }
+                // If no match, add custom option
+                if (!exists) {
+                    const opt = document.createElement('option');
+                    opt.value = scaleVal;
+                    opt.textContent = `${Math.round(scaleVal * 100)}%`;
+                    elements.scaleSelect.appendChild(opt);
+                    elements.scaleSelect.value = scaleVal;
+                }
+            }
+        };
         // ==========================================
         // INDEXED DB CACHE
         // ==========================================
                     if (!record) return null;
                     const data = record.data || record;
                     if (record.data) {
                         this.touch(url, record);
                     }
                     const tx = db.transaction(this.storeName, 'readwrite');
                     const store = tx.objectStore(this.storeName);
                     let currentSize = 0;
                     const entries = [];
                         req.onsuccess = (e) => {
                             const cursor = e.target.result;
                             if (cursor) {
                                 if (cursor.key !== url) {
                                     const val = cursor.value;
                                     const itemSize = (val.data || val).byteLength || 0;
+                                    const itemTime = val.timestamp || 0;
                                     currentSize += itemSize;
                                     entries.push({ key: cursor.key, size: itemSize, timestamp: itemTime });
                                 }
                         req.onerror = () => resolve();
                     });
                     if (currentSize + newSize > this.MAX_TOTAL_SIZE) {
                         entries.sort((a, b) => a.timestamp - b.timestamp);
                         while (entries.length > 0 && (currentSize + newSize > this.MAX_TOTAL_SIZE)) {
                             const entry = entries.shift();
                             store.delete(entry.key);
                         }
                     }
                     const record = { data: data, timestamp: Date.now() };
                     store.put(record, url);
             elements.toast.classList.remove('show');
         }
+        window.hideToast = hideToast;
         // ==========================================
         // LOADING
                 let isCached = !!data;
                 if (isCached) {
+                    showToast();
                 }
                 const params = {
                     cMapUrl: 'https://cdn.jsdelivr.net/npm/pdf.js@3.11.174/dist/cmaps/',
                     cMapPacked: true,
                 state.pdfDoc = await loadingTask.promise;
                 if (!isCached) {
                     state.pdfDoc.getData().then(pdfData => {
                         if (pdfData.byteLength <= 100 * 1024 * 1024) {
                             PDFCache.put(config.url, pdfData);
                         } else {
             elements.viewer.innerHTML = '';
             state.pages = [];
+            // Get last viewed page for this PDF to restore scroll position
+            // If just loaded, use storage. If zoomed, use current state.pageNum
+            const lastPage = state.pageNum > 1 ? state.pageNum : PageMemory.getLastPage(config.pdfIdentifier);
             for (let i = 1; i <= state.pdfDoc.numPages; i++) {
                 const pageDiv = document.createElement('div');
                 pageDiv.setAttribute('data-page-number', i);
                 pageDiv.id = `pageContainer${i}`;
+                // Initial size guess (letter) until rendered
                 pageDiv.style.width = '612px';
                 pageDiv.style.height = '792px';
             }
             setupIntersectionObserver();
+            if (!state.thumbnailsRendered) {
+                generateThumbnails();
+                state.thumbnailsRendered = true;
+            }
+            // Restore scroll position
             if (lastPage > 1) {
                 setTimeout(() => scrollToPage(lastPage), 100);
             }
                     if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
                         const pageNum = parseInt(entry.target.getAttribute('data-page-number'));
                         updateUIState(pageNum);
                         PageMemory.saveLastPage(config.pdfIdentifier, pageNum);
                     }
                 });
                 imgContainer.className = 'thumbnail-image-container';
                 imgContainer.id = `thumb-img-${i}`;
                 imgContainer.style.width = '100px';
                 imgContainer.style.height = '130px';
                 elements.sidebarContent.appendChild(thumbContainer);
             }
             renderThumbnailsQueue();
         }
         async function renderThumbnailsQueue() {
              for (let i = 1; i <= state.pdfDoc.numPages; i++) {
                  await renderSingleThumbnail(i);
              }
         }
         async function renderSingleThumbnail(i) {
             try {
                 const page = await state.pdfDoc.getPage(i);
+                const viewport = page.getViewport({ scale: 0.2 });
                 const canvas = document.createElement('canvas');
                 canvas.className = 'thumbnail-canvas';
                 canvas.height = viewport.height;
             if (num < 1 || num > state.pdfDoc.numPages) return;
             const pageDiv = document.getElementById(`pageContainer${num}`);
             if (pageDiv) {
                 elements.container.scrollTop = pageDiv.offsetTop;
             }
         }
             if (thumb) {
                 thumb.classList.add('selected');
                 const thumbTop = thumb.offsetTop;
                 const thumbHeight = thumb.clientHeight;
                 const containerHeight = elements.sidebarContent.clientHeight;
                 const containerScroll = elements.sidebarContent.scrollTop;
                 if (thumbTop < containerScroll) {
                     elements.sidebarContent.scrollTop = thumbTop - 10;
                 }
                 else if (thumbTop + thumbHeight > containerScroll + containerHeight) {
                     elements.sidebarContent.scrollTop = thumbTop + thumbHeight - containerHeight + 10;
                 }
         });
         if (elements.zoomIn) elements.zoomIn.addEventListener('click', () => {
+            let current = parseFloat(elements.scaleSelect.value);
+            if(isNaN(current)) current = config.scale;
+            const newScale = (Math.floor(current * 4) + 1) / 4; // Step to next 0.25 increment
+            // Check if current was page-fit or similar
+            if(isNaN(parseFloat(elements.scaleSelect.value))) {
+                config.scale = config.scale + 0.25;
+            } else {
+                config.scale = newScale;
+            }
             config.currentScaleValue = config.scale.toString();
+            // Sync Dropdown
+            PinchZoom.updateScaleDropdown(config.scale);
             initViewer();
         });
         if (elements.zoomOut) elements.zoomOut.addEventListener('click', () => {
+             if (config.scale <= 0.25) return;
+             let current = parseFloat(elements.scaleSelect.value);
+             if(isNaN(current)) current = config.scale;
+             const newScale = (Math.ceil(current * 4) - 1) / 4; // Step to prev 0.25 increment
+             if(isNaN(parseFloat(elements.scaleSelect.value))) {
+                 config.scale = Math.max(0.25, config.scale - 0.25);
+             } else {
+                 config.scale = Math.max(0.25, newScale);
+             }
              config.currentScaleValue = config.scale.toString();
+             // Sync Dropdown
+             PinchZoom.updateScaleDropdown(config.scale);
              initViewer();
         });
             link.click();
         });
+        // Initialize Pinch Zoom
+        PinchZoom.init();
         // Start loading
         if (typeof pdfjsLib !== 'undefined') {
             loadPDF();
         } else {
             window.addEventListener('load', loadPDF);
         }
     </script>
 </body>
+</html>