nodebb-plugin-pdf-secure 1.2.16 → 1.2.18

package/package.json

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

@@ -194,7 +194,9 @@
 		iframe.style.top = '0';
 		iframe.style.left = '0';
 		iframe.style.width = '100vw';
+		iframe.style.width = '100dvw';   // Override: dynamic viewport (excludes browser chrome)
 		iframe.style.height = '100vh';
+		iframe.style.height = '100dvh';  // Override: dynamic viewport (excludes address bar on mobile)
 		iframe.style.zIndex = '2147483647';
 
 		// Lock body scroll

package/static/viewer-app.js

@@ -2417,12 +2417,22 @@
     // ERGONOMIC FEATURES
     // ==========================================
 
-    // Fullscreen toggle function
+
+    // Fullscreen state (tracks both native and simulated fullscreen)
+    let isFullscreen = false;
+
+    // Fullscreen toggle function — delegates to parent iframe handler via postMessage
     function toggleFullscreen() {
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
+        if (window.self !== window.top) {
+            // Inside iframe: ask parent to handle fullscreen
+            window.parent.postMessage({ type: 'pdf-secure-fullscreen-toggle' }, '*');
         } else {
-            document.documentElement.requestFullscreen().catch(() => { });
+            // Standalone mode: use native fullscreen
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            } else {
+                document.documentElement.requestFullscreen().catch(() => { });
+            }
         }
     }
 
@@ -2430,7 +2440,7 @@
     function updateFullscreenIcon() {
         const icon = document.getElementById('fullscreenIcon');
         const btn = document.getElementById('fullscreenBtn');
-        if (document.fullscreenElement) {
+        if (isFullscreen) {
             icon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
             btn.classList.add('active');
         } else {
@@ -2439,32 +2449,36 @@
         }
     }
 
-    document.addEventListener('fullscreenchange', updateFullscreenIcon);
-
-    // Fullscreen button click
-    document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
+    // Apply fullscreen CSS class and touch restrictions
+    function applyFullscreenTouchRestrictions() {
+        document.body.classList.toggle('viewer-fullscreen', isFullscreen);
+        if (isFullscreen) {
+            document.documentElement.style.touchAction = 'pan-y pinch-zoom';
+            document.documentElement.style.overscrollBehavior = 'none';
+        } else {
+            document.documentElement.style.touchAction = '';
+            document.documentElement.style.overscrollBehavior = '';
+        }
+    }
 
-    // Double-click on page for fullscreen
-    let lastClickTime = 0;
-    container.addEventListener('click', (e) => {
-        const now = Date.now();
-        if (now - lastClickTime < 300) {
-            toggleFullscreen();
+    // Listen for fullscreen state from parent (simulated fullscreen)
+    window.addEventListener('message', (event) => {
+        if (event.data && event.data.type === 'pdf-secure-fullscreen-state') {
+            isFullscreen = event.data.isFullscreen;
+            updateFullscreenIcon();
+            applyFullscreenTouchRestrictions();
         }
-        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 });
-    }
+    // Local fullscreen events (standalone mode)
+    document.addEventListener('fullscreenchange', () => {
+        isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement);
+        updateFullscreenIcon();
+        applyFullscreenTouchRestrictions();
+    });
+
+    document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
+
 
     // Mouse wheel zoom with Ctrl (debounced, clamped 0.5x-5x)
     let zoomTimeout;

package/static/viewer.css

@@ -1482,3 +1482,15 @@ body {
         height: 56px;
     }
 }
+
+/* ==========================================
+   FULLSCREEN STATE (simulated fullscreen on mobile)
+   ========================================== */
+/* Ensure bottom toolbar is visible and viewer container makes room for it */
+body.viewer-fullscreen #bottomToolbar {
+    display: block;
+}
+
+body.viewer-fullscreen #viewerContainer {
+    bottom: calc(var(--bottom-bar-height) + var(--safe-area-bottom));
+}

package/static/viewer.html

@@ -1353,6 +1353,18 @@
             }
         }
 
+        /* ==========================================
+           FULLSCREEN STATE (simulated fullscreen on mobile)
+           ========================================== */
+        /* Ensure bottom toolbar is visible and viewer container makes room for it */
+        body.viewer-fullscreen #bottomToolbar {
+            display: block;
+        }
+
+        body.viewer-fullscreen #viewerContainer {
+            bottom: calc(var(--bottom-bar-height) + var(--safe-area-bottom));
+        }
+
         /* ==========================================
            TABLET BREAKPOINT (600px - 1024px)
            ========================================== */
@@ -2708,63 +2720,29 @@
 
                 svg.addEventListener('touchstart', (e) => {
                     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;
+                    // In annotation mode, always draw immediately — no direction detection.
+                    // Pan and pinch-zoom are blocked at the container level when a tool is active.
+                    e.preventDefault();
                     touchStartX = e.touches[0].clientX;
                     touchStartYDraw = e.touches[0].clientY;
+                    startDraw(e, pageNum);
+                    touchDrawing = true;
+                    touchDrawDecided = true;
                 }, { passive: false, signal });
 
                 svg.addEventListener('touchmove', (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', (e) => {
-                    if (!touchDrawDecided && currentTool && currentTool !== 'eraser' && currentTool !== 'select') {
-                        // Tap without moving > 10px → draw a dot at touch position
+                    if (touchDrawing) {
+                        stopDraw(pageNum);
+                    } else if (currentTool && currentTool !== 'eraser' && currentTool !== 'select') {
+                        // Tap without moving → draw a dot at touch position
                         const syntheticStart = {
                             currentTarget: svg,
                             touches: [{ clientX: touchStartX, clientY: touchStartYDraw }],
@@ -2772,8 +2750,6 @@
                         };
                         startDraw(syntheticStart, pageNum);
                         stopDraw(pageNum);
-                    } else if (touchDrawing) {
-                        stopDraw(pageNum);
                     }
                     touchDrawDecided = false;
                     touchDrawing = false;
@@ -4499,6 +4475,7 @@
 
             // Apply touch restrictions when entering/exiting fullscreen
             function applyFullscreenTouchRestrictions() {
+                document.body.classList.toggle('viewer-fullscreen', isFullscreen);
                 if (isFullscreen) {
                     document.documentElement.style.touchAction = 'pan-y pinch-zoom';
                     document.documentElement.style.overscrollBehavior = 'none';
@@ -4651,6 +4628,11 @@
 
             container.addEventListener('touchstart', (e) => {
                 if (e.touches.length === 2) {
+                    // Block pinch-zoom when an annotation tool is active
+                    if (annotationMode && currentTool) {
+                        e.preventDefault();
+                        return;
+                    }
                     // Cancel any active drawing and clean up
                     if (isDrawing && currentDrawingPage) {
                         const savePage = currentDrawingPage;
@@ -4816,6 +4798,12 @@
                 container.addEventListener('touchmove', (e) => {
                     if (isPinching || e.touches.length !== 1) return;
 
+                    // Block all container scroll when an annotation tool is active
+                    if (annotationMode && currentTool) {
+                        e.preventDefault();
+                        return;
+                    }
+
                     const touchY = e.touches[0].clientY;
                     const deltaY = touchStartY - touchY; // positive = scrolling down