nodebb-plugin-pdf-secure 1.2.12 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "Secure PDF viewer plugin for NodeBB - prevents downloading, enables canvas-only rendering with Premium group support",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -73,11 +73,13 @@
 			const cached = pdfBufferCache.get(filename);
 			if (cached && event.source) {
 				// Send cached buffer to viewer (transferable for 0-copy)
+				// Clone once: keep original in cache, transfer the copy
+				const copy = cached.slice(0);
 				event.source.postMessage({
 					type: 'pdf-secure-cache-response',
 					filename: filename,
-					buffer: cached
-				}, event.origin, [cached.slice(0)]);  // Clone buffer since we keep original
+					buffer: copy
+				}, event.origin, [copy]);
 				console.log('[PDF-Secure] Cache: Hit -', filename);
 			} else if (event.source) {
 				// No cache, viewer will fetch normally

package/static/viewer.html

@@ -52,6 +52,8 @@
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
+            /* Prevent scroll chaining out of iframe */
+            overscroll-behavior: contain;
         }
 
         /* Print Protection - hide everything when printing */
@@ -624,6 +626,9 @@
             overflow: auto;
             background: #525659;
             z-index: 1;
+            /* Prevent scroll chaining to parent/iframe on touch devices */
+            overscroll-behavior: contain;
+            -webkit-overflow-scrolling: touch;
         }
 
         #viewerContainer.withSidebar {
@@ -1524,6 +1529,11 @@
                 width: 56px;
                 height: 56px;
             }
+
+            /* Let our JS handle pinch-to-zoom, but allow browser pan-y for scroll */
+            #viewerContainer {
+                touch-action: pan-x pan-y;
+            }
         }
     </style>
 </head>
@@ -4502,11 +4512,17 @@
             });
 
             // ==========================================
-            // PINCH-TO-ZOOM (Touch devices)
+            // PINCH-TO-ZOOM (Touch devices) - Smooth CSS Transform
             // ==========================================
             let pinchStartDistance = 0;
             let pinchStartScale = 1;
             let isPinching = false;
+            let pinchMidX = 0;
+            let pinchMidY = 0;
+            let pinchVisualRatio = 1;
+
+            // The viewer div that holds PDF pages
+            const viewerDiv = document.getElementById('viewer');
 
             function getTouchDistance(touches) {
                 const dx = touches[0].clientX - touches[1].clientX;
@@ -4514,11 +4530,17 @@
                 return Math.sqrt(dx * dx + dy * dy);
             }
 
+            function getTouchMidpoint(touches) {
+                return {
+                    x: (touches[0].clientX + touches[1].clientX) / 2,
+                    y: (touches[0].clientY + touches[1].clientY) / 2
+                };
+            }
+
             container.addEventListener('touchstart', (e) => {
                 if (e.touches.length === 2) {
                     // Cancel any active drawing and clean up
                     if (isDrawing && currentDrawingPage) {
-                        // Remove incomplete path
                         if (currentPath && currentPath.parentNode) currentPath.remove();
                         currentPath = null;
                         pathSegments = [];
@@ -4530,6 +4552,18 @@
                     isPinching = true;
                     pinchStartDistance = getTouchDistance(e.touches);
                     pinchStartScale = pdfViewer.currentScale;
+                    pinchVisualRatio = 1;
+
+                    // Get midpoint relative to container
+                    const mid = getTouchMidpoint(e.touches);
+                    const rect = container.getBoundingClientRect();
+                    pinchMidX = mid.x - rect.left + container.scrollLeft;
+                    pinchMidY = mid.y - rect.top + container.scrollTop;
+
+                    // Prepare for CSS transform - use will-change for GPU acceleration
+                    viewerDiv.style.willChange = 'transform';
+                    viewerDiv.style.transformOrigin = pinchMidX + 'px ' + pinchMidY + 'px';
+
                     e.preventDefault();
                 }
             }, { passive: false });
@@ -4538,18 +4572,79 @@
                 if (isPinching && e.touches.length === 2) {
                     const dist = getTouchDistance(e.touches);
                     const ratio = dist / pinchStartDistance;
-                    const newScale = Math.min(Math.max(pinchStartScale * ratio, 0.5), 5.0);
-                    pdfViewer.currentScale = newScale;
+                    // Clamp the target scale
+                    const targetScale = pinchStartScale * ratio;
+                    const clampedScale = Math.min(Math.max(targetScale, 0.5), 5.0);
+                    pinchVisualRatio = clampedScale / pinchStartScale;
+
+                    // Apply CSS transform for instant smooth visual feedback (no re-render)
+                    viewerDiv.style.transform = 'scale(' + pinchVisualRatio + ')';
+
                     e.preventDefault();
                 }
             }, { passive: false });
 
             container.addEventListener('touchend', (e) => {
-                if (e.touches.length < 2) {
+                if (isPinching && e.touches.length < 2) {
                     isPinching = false;
+
+                    // Remove CSS transform
+                    viewerDiv.style.transform = '';
+                    viewerDiv.style.willChange = '';
+                    viewerDiv.style.transformOrigin = '';
+
+                    // Apply actual scale (triggers PDF re-render only once)
+                    const finalScale = Math.min(Math.max(pinchStartScale * pinchVisualRatio, 0.5), 5.0);
+                    if (Math.abs(finalScale - pdfViewer.currentScale) > 0.01) {
+                        pdfViewer.currentScale = finalScale;
+                    }
+                    pinchVisualRatio = 1;
                 }
             });
 
+            container.addEventListener('touchcancel', (e) => {
+                if (isPinching) {
+                    isPinching = false;
+                    viewerDiv.style.transform = '';
+                    viewerDiv.style.willChange = '';
+                    viewerDiv.style.transformOrigin = '';
+                    pinchVisualRatio = 1;
+                }
+            });
+
+            // ==========================================
+            // TOUCH SCROLL BOUNDARY (Prevent exit on tablet)
+            // ==========================================
+            // On touch devices, prevent scroll from escaping the container
+            // when at the top/bottom boundary. Only fullscreen button should exit.
+            (function initTouchScrollBoundary() {
+                if (!isTouch()) return;
+
+                let touchStartY = 0;
+
+                container.addEventListener('touchstart', (e) => {
+                    if (e.touches.length === 1) {
+                        touchStartY = e.touches[0].clientY;
+                    }
+                }, { passive: true });
+
+                container.addEventListener('touchmove', (e) => {
+                    // Skip if pinching
+                    if (isPinching || e.touches.length !== 1) return;
+
+                    const touchY = e.touches[0].clientY;
+                    const deltaY = touchStartY - touchY; // positive = scrolling down
+
+                    const atTop = container.scrollTop <= 0;
+                    const atBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
+
+                    // Prevent overscroll at boundaries
+                    if ((atTop && deltaY < 0) || (atBottom && deltaY > 0)) {
+                        e.preventDefault();
+                    }
+                }, { passive: false });
+            })();
+
             // ==========================================
             // CONTEXT MENU TOUCH HANDLING
             // ==========================================