nodebb-plugin-pdf-secure 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "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

@@ -67,6 +67,36 @@
 			}
 		}
 
+		// Fullscreen toggle request from iframe viewer
+		if (event.data && event.data.type === 'pdf-secure-fullscreen-toggle') {
+			var sourceIframe = document.querySelector('.pdf-secure-iframe');
+			// Find the specific iframe that sent the message
+			document.querySelectorAll('.pdf-secure-iframe').forEach(function (f) {
+				if (f.contentWindow === event.source) sourceIframe = f;
+			});
+			if (!sourceIframe) return;
+
+			var fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+			if (fsEl) {
+				if (document.exitFullscreen) document.exitFullscreen();
+				else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+			} else {
+				if (sourceIframe.requestFullscreen) sourceIframe.requestFullscreen().catch(function () { });
+				else if (sourceIframe.webkitRequestFullscreen) sourceIframe.webkitRequestFullscreen();
+			}
+		}
+
+		// Fullscreen state query from iframe
+		if (event.data && event.data.type === 'pdf-secure-fullscreen-query') {
+			var fsActive = !!(document.fullscreenElement || document.webkitFullscreenElement);
+			if (event.source) {
+				event.source.postMessage({
+					type: 'pdf-secure-fullscreen-state',
+					isFullscreen: fsActive
+				}, event.origin);
+			}
+		}
+
 		// Viewer asking for cached buffer
 		if (event.data && event.data.type === 'pdf-secure-cache-request') {
 			const { filename } = event.data;
@@ -93,6 +123,21 @@
 		}
 	});
 
+	// Forward fullscreen state changes to all viewer iframes
+	function notifyFullscreenChange() {
+		var fsActive = !!(document.fullscreenElement || document.webkitFullscreenElement);
+		document.querySelectorAll('.pdf-secure-iframe').forEach(function (f) {
+			if (f.contentWindow) {
+				f.contentWindow.postMessage({
+					type: 'pdf-secure-fullscreen-state',
+					isFullscreen: fsActive
+				}, window.location.origin);
+			}
+		});
+	}
+	document.addEventListener('fullscreenchange', notifyFullscreenChange);
+	document.addEventListener('webkitfullscreenchange', notifyFullscreenChange);
+
 	async function processQueue() {
 		if (isLoading || loadQueue.length === 0) return;
 
@@ -278,6 +323,7 @@
 			iframe.src = config.relative_path + '/plugins/pdf-secure/viewer?file=' + encodeURIComponent(filename);
 			iframe.setAttribute('frameborder', '0');
 			iframe.setAttribute('allowfullscreen', 'true');
+			iframe.setAttribute('allow', 'fullscreen');
 
 			// Store resolver for postMessage callback
 			currentResolver = function () {

package/static/viewer.html

@@ -52,8 +52,8 @@
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
-            /* Prevent scroll chaining out of iframe */
-            overscroll-behavior: contain;
+            /* Prevent scroll chaining and browser overscroll gestures (e.g. pull-to-exit-fullscreen) */
+            overscroll-behavior: none;
         }
 
         /* Print Protection - hide everything when printing */
@@ -626,8 +626,8 @@
             overflow: auto;
             background: #525659;
             z-index: 1;
-            /* Prevent scroll chaining to parent/iframe on touch devices */
-            overscroll-behavior: contain;
+            /* Prevent scroll chaining and overscroll gestures on touch devices */
+            overscroll-behavior: none;
             -webkit-overflow-scrolling: touch;
         }
 
@@ -1532,7 +1532,7 @@
 
             /* Let our JS handle pinch-to-zoom, but allow browser pan-y for scroll */
             #viewerContainer {
-                touch-action: pan-x pan-y;
+                touch-action: manipulation;
             }
         }
     </style>
@@ -2253,8 +2253,10 @@
             }
 
             // Events
+            let initialScale = 1;
             eventBus.on('pagesinit', () => {
                 pdfViewer.currentScaleValue = 'page-width';
+                initialScale = pdfViewer.currentScale;
                 document.getElementById('pageCount').textContent = `/ ${pdfViewer.pagesCount}`;
             });
 
@@ -2698,17 +2700,89 @@
                 svg.addEventListener('mouseleave', () => stopDraw(pageNum), { signal });
 
                 // Touch support for tablets
+                // Uses direction detection: predominantly vertical = scroll, otherwise = draw
+                let touchDrawDecided = false;
+                let touchDrawing = false;
+                let touchStartX = 0;
+                let touchStartYDraw = 0;
+
                 svg.addEventListener('touchstart', (e) => {
-                    // Prevent default to avoid scroll while drawing/selecting
-                    if (currentTool) e.preventDefault();
-                    startDraw(e, pageNum);
+                    if (!currentTool || e.touches.length !== 1) return;
+
+                    // Eraser and select need immediate response
+                    if (currentTool === 'eraser' || currentTool === 'select') {
+                        e.preventDefault();
+                        startDraw(e, pageNum);
+                        touchDrawing = true;
+                        touchDrawDecided = true;
+                        return;
+                    }
+
+                    // For pen/highlight/shape: wait to decide scroll vs draw
+                    touchDrawDecided = false;
+                    touchDrawing = false;
+                    touchStartX = e.touches[0].clientX;
+                    touchStartYDraw = e.touches[0].clientY;
                 }, { passive: false, signal });
+
                 svg.addEventListener('touchmove', (e) => {
-                    if (currentTool) e.preventDefault();
-                    draw(e);
+                    if (!currentTool || e.touches.length !== 1) return;
+
+                    if (touchDrawing) {
+                        // Already decided: drawing
+                        e.preventDefault();
+                        draw(e);
+                        return;
+                    }
+
+                    if (touchDrawDecided) return; // decided scroll, let it through
+
+                    const dx = e.touches[0].clientX - touchStartX;
+                    const dy = e.touches[0].clientY - touchStartYDraw;
+
+                    if (Math.abs(dx) + Math.abs(dy) > 10) {
+                        touchDrawDecided = true;
+
+                        if (Math.abs(dy) > Math.abs(dx) * 2) {
+                            // Predominantly vertical → scroll (don't prevent default)
+                            return;
+                        }
+                        // Horizontal or diagonal → drawing
+                        e.preventDefault();
+                        // Start draw from ORIGINAL touch position (not current 10px-offset position)
+                        const syntheticStart = {
+                            currentTarget: svg,
+                            touches: [{ clientX: touchStartX, clientY: touchStartYDraw }],
+                            preventDefault: () => {}
+                        };
+                        startDraw(syntheticStart, pageNum);
+                        // Then immediately draw to current position for continuity
+                        draw(e);
+                        touchDrawing = true;
+                    }
                 }, { passive: false, signal });
-                svg.addEventListener('touchend', () => stopDraw(pageNum), { signal });
-                svg.addEventListener('touchcancel', () => stopDraw(pageNum), { signal });
+
+                svg.addEventListener('touchend', (e) => {
+                    if (!touchDrawDecided && currentTool && currentTool !== 'eraser' && currentTool !== 'select') {
+                        // Tap without moving > 10px → draw a dot at touch position
+                        const syntheticStart = {
+                            currentTarget: svg,
+                            touches: [{ clientX: touchStartX, clientY: touchStartYDraw }],
+                            preventDefault: () => {}
+                        };
+                        startDraw(syntheticStart, pageNum);
+                        stopDraw(pageNum);
+                    } else if (touchDrawing) {
+                        stopDraw(pageNum);
+                    }
+                    touchDrawDecided = false;
+                    touchDrawing = false;
+                }, { signal });
+                svg.addEventListener('touchcancel', () => {
+                    if (touchDrawing) stopDraw(pageNum);
+                    touchDrawDecided = false;
+                    touchDrawing = false;
+                }, { signal });
 
                 svg.classList.toggle('active', annotationMode);
             }
@@ -2904,7 +2978,7 @@
                 // Save current state to undo stack with rotation
                 if (!undoStacks.has(pageNum)) undoStacks.set(pageNum, []);
                 const stack = undoStacks.get(pageNum);
-                stack.push({ html: svg.innerHTML, rotation: pdfViewer.pagesRotation || 0 });
+                stack.push({ html: getCleanSvgInnerHTML(svg), rotation: pdfViewer.pagesRotation || 0 });
                 if (stack.length > MAX_HISTORY) stack.shift();
 
                 // Clear redo stack
@@ -4387,25 +4461,34 @@
             // ERGONOMIC FEATURES
             // ==========================================
 
-            // Fullscreen toggle function (with webkit fallback for iOS Safari)
+            // Fullscreen: track state (parent-managed when in iframe)
+            let isFullscreen = false;
+            const inIframe = window.self !== window.top;
+
             function toggleFullscreen() {
-                const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
-                if (fsEl) {
-                    if (document.exitFullscreen) document.exitFullscreen();
-                    else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+                if (inIframe) {
+                    // In iframe: ask parent to fullscreen the iframe element
+                    // Parent manages fullscreen → more stable on tablets
+                    window.parent.postMessage({ type: 'pdf-secure-fullscreen-toggle' }, '*');
                 } else {
-                    const el = document.documentElement;
-                    if (el.requestFullscreen) el.requestFullscreen().catch(() => {});
-                    else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
+                    // Standalone: use local fullscreen
+                    const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+                    if (fsEl) {
+                        if (document.exitFullscreen) document.exitFullscreen();
+                        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+                    } else {
+                        const el = document.documentElement;
+                        if (el.requestFullscreen) el.requestFullscreen().catch(() => { });
+                        else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
+                    }
                 }
             }
 
-            // Update fullscreen button icon
+            // Update fullscreen button icon based on state
             function updateFullscreenIcon() {
                 const icon = document.getElementById('fullscreenIcon');
                 const btn = document.getElementById('fullscreenBtn');
-                const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
-                if (fsEl) {
+                if (isFullscreen) {
                     icon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
                     btn.classList.add('active');
                 } else {
@@ -4414,8 +4497,23 @@
                 }
             }
 
-            document.addEventListener('fullscreenchange', updateFullscreenIcon);
-            document.addEventListener('webkitfullscreenchange', updateFullscreenIcon);
+            // Listen for fullscreen state from parent (iframe mode)
+            window.addEventListener('message', (event) => {
+                if (event.data && event.data.type === 'pdf-secure-fullscreen-state') {
+                    isFullscreen = event.data.isFullscreen;
+                    updateFullscreenIcon();
+                }
+            });
+
+            // Local fullscreen events (standalone mode)
+            document.addEventListener('fullscreenchange', () => {
+                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement);
+                updateFullscreenIcon();
+            });
+            document.addEventListener('webkitfullscreenchange', () => {
+                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement);
+                updateFullscreenIcon();
+            });
 
             // Fullscreen button click
             document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
@@ -4541,6 +4639,7 @@
                 if (e.touches.length === 2) {
                     // Cancel any active drawing and clean up
                     if (isDrawing && currentDrawingPage) {
+                        const savePage = currentDrawingPage;
                         if (currentPath && currentPath.parentNode) currentPath.remove();
                         currentPath = null;
                         pathSegments = [];
@@ -4548,6 +4647,7 @@
                         isDrawing = false;
                         currentSvg = null;
                         currentDrawingPage = null;
+                        saveAnnotations(savePage);
                     }
                     isPinching = true;
                     pinchStartDistance = getTouchDistance(e.touches);
@@ -4584,19 +4684,38 @@
                 }
             }, { passive: false });
 
+            let pinchJustEnded = false;
+
             container.addEventListener('touchend', (e) => {
                 if (isPinching && e.touches.length < 2) {
                     isPinching = false;
 
+                    // Prevent double-tap false positive right after pinch ends
+                    pinchJustEnded = true;
+                    setTimeout(() => { pinchJustEnded = false; }, 400);
+
                     // Remove CSS transform
                     viewerDiv.style.transform = '';
                     viewerDiv.style.willChange = '';
                     viewerDiv.style.transformOrigin = '';
 
-                    // Apply actual scale (triggers PDF re-render only once)
+                    // Apply actual scale with scroll position preservation
                     const finalScale = Math.min(Math.max(pinchStartScale * pinchVisualRatio, 0.5), 5.0);
                     if (Math.abs(finalScale - pdfViewer.currentScale) > 0.01) {
+                        const scrollRatio = finalScale / pdfViewer.currentScale;
+                        const midRect = container.getBoundingClientRect();
+                        const viewCenterX = midRect.width / 2;
+                        const viewCenterY = midRect.height / 2;
+                        const oldScrollLeft = container.scrollLeft;
+                        const oldScrollTop = container.scrollTop;
+
                         pdfViewer.currentScale = finalScale;
+
+                        // Adjust scroll after PDF.js re-render to keep view centered
+                        requestAnimationFrame(() => {
+                            container.scrollLeft = (oldScrollLeft + viewCenterX) * scrollRatio - viewCenterX;
+                            container.scrollTop = (oldScrollTop + viewCenterY) * scrollRatio - viewCenterY;
+                        });
                     }
                     pinchVisualRatio = 1;
                 }
@@ -4612,6 +4731,54 @@
                 }
             });
 
+            // ==========================================
+            // DOUBLE-TAP TO ZOOM (Tablet)
+            // ==========================================
+            let lastTapTime = 0;
+            let lastTapX = 0;
+            let lastTapY = 0;
+
+            container.addEventListener('touchend', (e) => {
+                // Skip during pinch, multi-touch, annotation mode, or right after pinch ends
+                if (isPinching || e.touches.length !== 0 || pinchJustEnded) return;
+                if (annotationMode && currentTool) return;
+
+                const now = Date.now();
+                const touch = e.changedTouches[0];
+                const dx = touch.clientX - lastTapX;
+                const dy = touch.clientY - lastTapY;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+
+                if (now - lastTapTime < 300 && dist < 30) {
+                    // Double-tap detected
+                    e.preventDefault();
+
+                    if (pdfViewer.currentScaleValue === 'page-width' ||
+                        Math.abs(pdfViewer.currentScale - initialScale) < 0.01) {
+                        // Zoom in 2x, centered on tap point
+                        const rect = container.getBoundingClientRect();
+                        const tapX = touch.clientX - rect.left;
+                        const tapY = touch.clientY - rect.top;
+
+                        pdfViewer.currentScale = initialScale * 2;
+
+                        // Scroll to keep tap point centered
+                        container.scrollLeft = (tapX + container.scrollLeft) * 2 - tapX;
+                        container.scrollTop = (tapY + container.scrollTop) * 2 - tapY;
+                    } else {
+                        // Reset to page-width
+                        pdfViewer.currentScaleValue = 'page-width';
+                    }
+
+                    lastTapTime = 0;
+                    return;
+                }
+
+                lastTapTime = now;
+                lastTapX = touch.clientX;
+                lastTapY = touch.clientY;
+            });
+
             // ==========================================
             // TOUCH SCROLL BOUNDARY (Prevent exit on tablet)
             // ==========================================
@@ -4620,6 +4787,9 @@
             (function initTouchScrollBoundary() {
                 if (!isTouch()) return;
 
+                // Ensure html element also blocks overscroll
+                document.documentElement.style.overscrollBehavior = 'none';
+
                 let touchStartY = 0;
 
                 container.addEventListener('touchstart', (e) => {
@@ -4628,8 +4798,8 @@
                     }
                 }, { passive: true });
 
+                // Container-level boundary prevention
                 container.addEventListener('touchmove', (e) => {
-                    // Skip if pinching
                     if (isPinching || e.touches.length !== 1) return;
 
                     const touchY = e.touches[0].clientY;
@@ -4638,11 +4808,38 @@
                     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();
                     }
+                    touchStartY = touchY;
                 }, { passive: false });
+
+                // Document-level capture handler: catch overscroll gestures
+                // that escape the container (e.g. browser pull-to-exit-fullscreen)
+                let docTouchStartY = 0;
+                document.addEventListener('touchstart', (e) => {
+                    if (e.touches.length === 1) {
+                        docTouchStartY = e.touches[0].clientY;
+                    }
+                }, { passive: true, capture: true });
+
+                document.addEventListener('touchmove', (e) => {
+                    if (e.touches.length !== 1) return;
+
+                    // Only prevent when in fullscreen (isFullscreen works in both iframe and standalone)
+                    if (!isFullscreen) return;
+
+                    const touchY = e.touches[0].clientY;
+                    const deltaY = docTouchStartY - touchY;
+                    const atTop = container.scrollTop <= 0;
+                    const atBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
+
+                    // Block pull-down at top and pull-up at bottom in fullscreen
+                    if ((atTop && deltaY < 0) || (atBottom && deltaY > 0)) {
+                        e.preventDefault();
+                    }
+                    docTouchStartY = touchY;
+                }, { passive: false, capture: true });
             })();
 
             // ==========================================