nodebb-plugin-pdf-secure 1.2.11 → 1.2.13

package/lib/controllers.js

@@ -37,11 +37,9 @@ Controllers.servePdfBinary = async function (req, res) {
 		return res.status(400).json({ error: 'Missing nonce' });
 	}
 
-	if (!req.uid) {
-		return res.status(401).json({ error: 'Not authenticated' });
-	}
+	const uid = req.uid || 0; // Guest uid = 0
 
-	const data = nonceStore.validate(nonce, req.uid);
+	const data = nonceStore.validate(nonce, uid);
 	if (!data) {
 		return res.status(403).json({ error: 'Invalid or expired nonce' });
 	}

package/library.js

@@ -54,14 +54,14 @@ plugin.init = async (params) => {
 		next();
 	});
 
-	// PDF binary endpoint (nonce-validated)
-	router.get('/api/v3/plugins/pdf-secure/pdf-data', middleware.ensureLoggedIn, controllers.servePdfBinary);
+	// PDF binary endpoint (nonce-validated, guests allowed)
+	router.get('/api/v3/plugins/pdf-secure/pdf-data', controllers.servePdfBinary);
 
 	// Admin page route
 	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/pdf-secure', controllers.renderAdminPage);
 
-	// Viewer page route (fullscreen Mozilla PDF.js viewer)
-	router.get('/plugins/pdf-secure/viewer', middleware.ensureLoggedIn, (req, res) => {
+	// Viewer page route (fullscreen Mozilla PDF.js viewer, guests allowed)
+	router.get('/plugins/pdf-secure/viewer', (req, res) => {
 		const { file } = req.query;
 		if (!file) {
 			return res.status(400).send('Missing file parameter');
@@ -81,7 +81,7 @@ plugin.init = async (params) => {
 		// Generate nonce + key HERE (in viewer route)
 		// This way the key is ONLY embedded in HTML, never in a separate API response
 		const isPremium = true;
-		const nonceData = nonceStore.generate(req.uid, safeName, isPremium);
+		const nonceData = nonceStore.generate(req.uid || 0, safeName, isPremium);
 
 		// Serve the viewer template with comprehensive security headers
 		res.set({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.2.11",
+  "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 {
@@ -1287,10 +1292,12 @@
                 display: block !important;
                 min-width: unset;
                 box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
+                pointer-events: none;
             }
 
             .toolDropdown.visible {
                 transform: translateY(0);
+                pointer-events: auto;
             }
 
             /* Responsive dropzone */
@@ -1454,10 +1461,12 @@
                 display: block !important;
                 min-width: unset;
                 box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
+                pointer-events: none;
             }
 
             .toolDropdown.visible {
                 transform: translateY(0);
+                pointer-events: auto;
             }
 
             /* Selection toolbar & toast above bottom bar */
@@ -1520,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>
@@ -2267,7 +2281,7 @@
             });
 
             eventBus.on('pagerendered', (evt) => {
-                if (annotationMode) injectAnnotationLayer(evt.pageNumber);
+                injectAnnotationLayer(evt.pageNumber);
 
                 // Rotation is handled natively by PDF.js via pagesRotation
             });
@@ -2350,7 +2364,17 @@
             const dropdownBackdrop = document.getElementById('dropdownBackdrop');
             const overflowDropdown = document.getElementById('overflowDropdown');
 
+            // Swipe-to-dismiss controller (declared before closeAllDropdowns which references it)
+            let swipeAbortController = null;
+
             function closeAllDropdowns() {
+                // Clean up swipe listeners
+                if (swipeAbortController) { swipeAbortController.abort(); swipeAbortController = null; }
+                // Reset inline transform from swipe gesture
+                [highlightDropdown, drawDropdown, shapesDropdown, overflowDropdown].forEach(dd => {
+                    dd.style.transform = '';
+                    dd.style.transition = '';
+                });
                 highlightDropdown.classList.remove('visible');
                 drawDropdown.classList.remove('visible');
                 shapesDropdown.classList.remove('visible');
@@ -2374,10 +2398,52 @@
                     // Show backdrop on mobile/tablet portrait
                     if (useBottomSheet) {
                         dropdownBackdrop.classList.add('visible');
+                        setupBottomSheetSwipe(dropdown);
                     }
                 }
             }
 
+            // Bottom sheet swipe-to-dismiss (uses AbortController to prevent listener accumulation)
+            function setupBottomSheetSwipe(dropdown) {
+                // Abort previous swipe listeners if any
+                if (swipeAbortController) swipeAbortController.abort();
+                swipeAbortController = new AbortController();
+                const signal = swipeAbortController.signal;
+
+                let startY = 0, currentY = 0, isDragging = false;
+
+                dropdown.addEventListener('touchstart', (e) => {
+                    const rect = dropdown.getBoundingClientRect();
+                    const touchY = e.touches[0].clientY;
+                    if (touchY - rect.top > 40 && dropdown.scrollTop > 0) return;
+                    startY = touchY;
+                    currentY = startY;
+                    isDragging = true;
+                    dropdown.style.transition = 'none';
+                }, { signal });
+
+                dropdown.addEventListener('touchmove', (e) => {
+                    if (!isDragging) return;
+                    currentY = e.touches[0].clientY;
+                    const dy = currentY - startY;
+                    if (dy > 0) {
+                        dropdown.style.transform = `translateY(${dy}px)`;
+                        e.preventDefault();
+                    }
+                }, { passive: false, signal });
+
+                dropdown.addEventListener('touchend', () => {
+                    if (!isDragging) return;
+                    isDragging = false;
+                    const dy = currentY - startY;
+                    dropdown.style.transition = '';
+                    if (dy > 80) {
+                        closeAllDropdowns();
+                    }
+                    dropdown.style.transform = '';
+                }, { signal });
+            }
+
             // Backdrop click closes dropdowns
             dropdownBackdrop.addEventListener('click', () => {
                 closeAllDropdowns();
@@ -2881,7 +2947,7 @@
                 const scaleY = vb.scaleY;
 
                 if (currentTool === 'eraser') {
-                    eraseAt(svg, x, y, scaleX);
+                    eraseAt(svg, x, y, scaleX, coords.clientX, coords.clientY);
                     // Performance: Don't save here - isDrawing is true, stopDraw will save on mouseup
                     return;
                 }
@@ -2982,7 +3048,7 @@
                 const scaleX = vb.scaleX;
 
                 if (currentTool === 'eraser') {
-                    eraseAt(svg, x, y, scaleX);
+                    eraseAt(svg, x, y, scaleX, coords.clientX, coords.clientY);
                     // Performance: Don't save on every mousemove - let mouseup handle it
                     return;
                 }
@@ -3390,13 +3456,12 @@
                 });
             }
 
-            function eraseAt(svg, x, y, scale = 1) {
-                const hitRadius = 15 * scale; // Scale hit radius with viewBox
-                // Erase paths, text, and shape elements (rect, ellipse, line)
-                svg.querySelectorAll('path, text, rect, ellipse, line').forEach(el => {
-                    const bbox = el.getBBox();
-                    if (x >= bbox.x - hitRadius && x <= bbox.x + bbox.width + hitRadius &&
-                        y >= bbox.y - hitRadius && y <= bbox.y + bbox.height + hitRadius) {
+            function eraseAt(svg, x, y, scale = 1, clientX, clientY) {
+                // Use elementsFromPoint for rotation-aware hit testing
+                const annotationTags = new Set(['path', 'text', 'rect', 'ellipse', 'line']);
+                const elements = document.elementsFromPoint(clientX, clientY);
+                elements.forEach(el => {
+                    if (el.closest('.annotationLayer') === svg && annotationTags.has(el.tagName)) {
                         el.remove();
                     }
                 });
@@ -4322,12 +4387,16 @@
             // ERGONOMIC FEATURES
             // ==========================================
 
-            // Fullscreen toggle function
+            // Fullscreen toggle function (with webkit fallback for iOS Safari)
             function toggleFullscreen() {
-                if (document.fullscreenElement) {
-                    document.exitFullscreen();
+                const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+                if (fsEl) {
+                    if (document.exitFullscreen) document.exitFullscreen();
+                    else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
                 } else {
-                    document.documentElement.requestFullscreen().catch(() => { });
+                    const el = document.documentElement;
+                    if (el.requestFullscreen) el.requestFullscreen().catch(() => {});
+                    else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
                 }
             }
 
@@ -4335,7 +4404,8 @@
             function updateFullscreenIcon() {
                 const icon = document.getElementById('fullscreenIcon');
                 const btn = document.getElementById('fullscreenBtn');
-                if (document.fullscreenElement) {
+                const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+                if (fsEl) {
                     icon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
                     btn.classList.add('active');
                 } else {
@@ -4345,31 +4415,12 @@
             }
 
             document.addEventListener('fullscreenchange', updateFullscreenIcon);
+            document.addEventListener('webkitfullscreenchange', updateFullscreenIcon);
 
             // Fullscreen button click
             document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
 
-            // Double-click on page for fullscreen
-            let lastClickTime = 0;
-            container.addEventListener('click', (e) => {
-                const now = Date.now();
-                if (now - lastClickTime < 300) {
-                    toggleFullscreen();
-                }
-                lastClickTime = now;
-            });
 
-            // Auto-fullscreen when viewer loads inside iframe
-            if (window.self !== window.top && window.PDF_SECURE_CONFIG) {
-                // We're inside an iframe - request fullscreen on first user interaction
-                const autoFullscreen = () => {
-                    document.documentElement.requestFullscreen().catch(() => { });
-                    container.removeEventListener('click', autoFullscreen);
-                    container.removeEventListener('touchstart', autoFullscreen);
-                };
-                container.addEventListener('click', autoFullscreen, { once: true });
-                container.addEventListener('touchstart', autoFullscreen, { once: true });
-            }
 
             // Mouse wheel zoom with Ctrl
             container.addEventListener('wheel', (e) => {
@@ -4453,17 +4504,25 @@
                 setupResponsiveToolbar();
             });
 
-            // Also handle resize for orientation changes
+            // Also handle resize for orientation changes (debounced)
+            let resizeTimer;
             window.addEventListener('resize', () => {
-                setupResponsiveToolbar();
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(setupResponsiveToolbar, 150);
             });
 
             // ==========================================
-            // 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;
@@ -4471,11 +4530,40 @@
                 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 && !currentTool) {
+                if (e.touches.length === 2) {
+                    // Cancel any active drawing and clean up
+                    if (isDrawing && currentDrawingPage) {
+                        if (currentPath && currentPath.parentNode) currentPath.remove();
+                        currentPath = null;
+                        pathSegments = [];
+                        if (drawRAF) { cancelAnimationFrame(drawRAF); drawRAF = null; }
+                        isDrawing = false;
+                        currentSvg = null;
+                        currentDrawingPage = null;
+                    }
                     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 });
@@ -4484,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
             // ==========================================