nodebb-plugin-pdf-secure 1.2.17 → 1.2.19

package/package.json

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

@@ -525,6 +525,10 @@
             document.getElementById('sepiaBtn').classList.contains('active'));
         closeAllDropdowns();
     };
+    document.getElementById('overflowFullscreen').onclick = () => {
+        toggleFullscreen();
+        closeAllDropdowns();
+    };
 
     // Close dropdowns when clicking outside
     document.addEventListener('click', (e) => {
@@ -613,15 +617,18 @@
         highlightColor = c;
         if (currentTool === 'highlight') currentColor = c;
         document.getElementById('highlightWave').setAttribute('stroke', c);
+        document.getElementById('highlightColorIndicator').style.background = c;
     });
     setupColorPicker('drawColors', c => {
         drawColor = c;
         if (currentTool === 'pen') currentColor = c;
         document.getElementById('drawWave').setAttribute('stroke', c);
+        document.getElementById('drawColorIndicator').style.background = c;
     });
     setupColorPicker('shapeColors', c => {
         shapeColor = c;
         if (currentTool === 'shape') currentColor = c;
+        document.getElementById('shapeColorIndicator').style.background = c;
     });
 
     // Highlighter Thickness Slider
@@ -745,13 +752,9 @@
             e.preventDefault();
             draw(e);
         };
-        if (annotationMode) {
-            svg.addEventListener('touchstart', touchStartHandler, { passive: false, signal });
-            svg.addEventListener('touchmove', touchMoveHandler, { passive: false, signal });
-        } else {
-            svg.addEventListener('touchstart', touchStartHandler, { signal });
-            svg.addEventListener('touchmove', touchMoveHandler, { signal });
-        }
+        // Always use passive:false so preventDefault() works when a tool is later activated
+        svg.addEventListener('touchstart', touchStartHandler, { passive: false, signal });
+        svg.addEventListener('touchmove', touchMoveHandler, { passive: false, signal });
         svg.addEventListener('touchend', () => stopDraw(pageNum), { signal });
         svg.addEventListener('touchcancel', () => stopDraw(pageNum), { signal });
 
@@ -965,7 +968,8 @@
         // Text tool - create/edit/drag text
         if (currentTool === 'text') {
             // Check if clicked on existing text element
-            const elementsUnderClick = document.elementsFromPoint(e.clientX, e.clientY);
+            // Use coords (touch-safe) instead of e.clientX which is undefined on TouchEvent
+            const elementsUnderClick = document.elementsFromPoint(coords.clientX, coords.clientY);
             const existingText = elementsUnderClick.find(el => el.tagName === 'text' && el.closest('.annotationLayer'));
 
             if (existingText) {
@@ -973,7 +977,7 @@
                 startTextDrag(e, existingText, svg, scaleX, pageNum);
             } else {
                 // Create new text
-                showTextEditor(e.clientX, e.clientY, svg, x, y, scaleX, pageNum);
+                showTextEditor(coords.clientX, coords.clientY, svg, x, y, scaleX, pageNum);
             }
             return;
         }
@@ -1235,14 +1239,18 @@
         textEl.classList.add('dragging');
         hasDragged = false;
 
-        dragStartX = e.clientX;
-        dragStartY = e.clientY;
+        // Touch-safe coordinate extraction
+        const startCoords = getEventCoords(e);
+        dragStartX = startCoords.clientX;
+        dragStartY = startCoords.clientY;
         textOriginalX = parseFloat(textEl.getAttribute('x'));
         textOriginalY = parseFloat(textEl.getAttribute('y'));
 
-        function onMouseMove(ev) {
-            const dxScreen = ev.clientX - dragStartX;
-            const dyScreen = ev.clientY - dragStartY;
+        function onMove(ev) {
+            ev.preventDefault();
+            const moveCoords = getEventCoords(ev);
+            const dxScreen = moveCoords.clientX - dragStartX;
+            const dyScreen = moveCoords.clientY - dragStartY;
             // Convert screen delta to viewBox delta (rotation-aware)
             const vbDelta = screenDeltaToViewBox(svg, dxScreen, dyScreen, textEl);
 
@@ -1254,29 +1262,31 @@
             textEl.setAttribute('y', (textOriginalY + vbDelta.dy).toFixed(2));
         }
 
-        function onMouseUp(ev) {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
+        function onEnd(ev) {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onEnd);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onEnd);
             textEl.classList.remove('dragging');
 
             if (hasDragged) {
                 // Moved - save position
                 saveAnnotations(pageNum);
             } else {
-                // Not moved - short click = edit
-                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                // Not moved - short click/tap = edit
                 const svgX = parseFloat(textEl.getAttribute('x'));
                 const svgY = parseFloat(textEl.getAttribute('y'));
-                // Note: showTextEditor needs scaleX for font scaling logic, which we still have from arguments
-                showTextEditor(ev.clientX, ev.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
+                const endCoords = getEventCoords(ev);
+                showTextEditor(endCoords.clientX, endCoords.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
             }
 
             draggedText = null;
         }
 
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onEnd);
+        document.addEventListener('touchmove', onMove, { passive: false });
+        document.addEventListener('touchend', onEnd);
     }
 
     // Inline Text Editor
@@ -2417,12 +2427,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 +2450,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 +2459,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

@@ -401,6 +401,18 @@
             border-radius: 4px 0 0 4px;
         }
 
+        /* Color indicator bar under tool button */
+        .toolColorIndicator {
+            position: absolute;
+            bottom: 2px;
+            left: 6px;
+            right: calc(20px + 6px);
+            height: 3px;
+            border-radius: 2px;
+            pointer-events: none;
+            transition: background 0.15s;
+        }
+
         .dropdownArrow {
             width: 20px;
             height: 36px;
@@ -1178,12 +1190,17 @@
             z-index: 100;
             padding: 0 8px;
             padding-bottom: var(--safe-area-bottom);
+            /* Flex layout: scrollable tools + fixed fullscreen button */
+            align-items: center;
+            gap: 0;
         }
 
         .bottomToolbarInner {
             display: flex;
             align-items: center;
             gap: 2px;
+            flex: 1;
+            min-width: 0;
             height: var(--bottom-bar-height);
             overflow-x: auto;
             overflow-y: hidden;
@@ -1196,6 +1213,14 @@
             display: none;
         }
 
+        /* Fullscreen button pinned to right side of bottom toolbar */
+        .bottomFullscreenBtn {
+            flex-shrink: 0;
+            margin-left: 4px;
+            border-left: 1px solid var(--border-color);
+            padding-left: 4px;
+        }
+
         /* Dropdown backdrop overlay */
         #dropdownBackdrop {
             display: none;
@@ -1248,7 +1273,7 @@
 
             /* Show bottom toolbar */
             #bottomToolbar {
-                display: block;
+                display: flex;
             }
 
             /* Viewer container adjusted for mobile toolbars */
@@ -1353,6 +1378,18 @@
             }
         }
 
+        /* ==========================================
+           FULLSCREEN STATE (simulated fullscreen on mobile)
+           ========================================== */
+        /* Ensure bottom toolbar is visible and viewer container makes room for it */
+        body.viewer-fullscreen #bottomToolbar {
+            display: flex;
+        }
+
+        body.viewer-fullscreen #viewerContainer {
+            bottom: calc(var(--bottom-bar-height) + var(--safe-area-bottom));
+        }
+
         /* ==========================================
            TABLET BREAKPOINT (600px - 1024px)
            ========================================== */
@@ -1418,7 +1455,7 @@
 
             /* Show bottom toolbar */
             #bottomToolbar {
-                display: block;
+                display: flex;
             }
 
             /* Viewer container adjusted for both toolbars */
@@ -1561,6 +1598,7 @@
                         <path d="M3 21h18v-2H3v2zM5 16h14l-3-10H8l-3 10zM9 8h6l1.5 5h-9L9 8z" opacity="0.7" />
                     </svg>
                 </button>
+                <div class="toolColorIndicator" id="highlightColorIndicator" style="background:#fff100"></div>
                 <button class="dropdownArrow" id="highlightArrow">
                     <svg viewBox="0 0 24 24">
                         <path d="M7 10l5 5 5-5z" />
@@ -1606,6 +1644,7 @@
                             d="M20.71 4.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83zM3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" />
                     </svg>
                 </button>
+                <div class="toolColorIndicator" id="drawColorIndicator" style="background:#e81224"></div>
                 <button class="dropdownArrow" id="drawArrow">
                     <svg viewBox="0 0 24 24">
                         <path d="M7 10l5 5 5-5z" />
@@ -1709,6 +1748,7 @@
                         <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm13 0a5 5 0 110 10 5 5 0 010-10z" />
                     </svg>
                 </button>
+                <div class="toolColorIndicator" id="shapeColorIndicator" style="background:#e81224"></div>
                 <button class="dropdownArrow" id="shapesArrow">
                     <svg viewBox="0 0 24 24">
                         <path d="M7 10l5 5 5-5z" />
@@ -1851,6 +1891,13 @@
                         </svg>
                         <span>Okuma Modu</span>
                     </button>
+                    <div class="overflowDivider"></div>
+                    <button class="overflowItem" id="overflowFullscreen">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+                        </svg>
+                        <span>Tam Ekran</span>
+                    </button>
                 </div>
             </div>
         </div>
@@ -1861,11 +1908,16 @@
         </div>
     </div>
 
-    <!-- Bottom Toolbar (Mobile Only) -->
+    <!-- Bottom Toolbar (Mobile/Tablet Portrait) -->
     <div id="bottomToolbar">
         <div class="bottomToolbarInner" id="bottomToolbarInner">
             <!-- Annotation tool buttons will be moved here on mobile via JS -->
         </div>
+        <button class="toolbarBtn bottomFullscreenBtn" id="bottomFullscreenBtn" title="Tam Ekran">
+            <svg viewBox="0 0 24 24">
+                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+            </svg>
+        </button>
     </div>
 
     <!-- Dropdown Backdrop (Mobile) -->
@@ -2417,7 +2469,10 @@
                 dropdown.addEventListener('touchstart', (e) => {
                     const rect = dropdown.getBoundingClientRect();
                     const touchY = e.touches[0].clientY;
-                    if (touchY - rect.top > 40 && dropdown.scrollTop > 0) return;
+                    // Only start swipe-to-dismiss from the handle area (top ~40px)
+                    // Don't intercept touches on interactive content (color dots, sliders, shape buttons)
+                    const isInteractive = e.target.closest('.colorDot, .colorGrid, .thicknessSlider, .shapeBtn, .shapeGrid, input, .strokePreview, .overflowItem');
+                    if (touchY - rect.top > 40 || isInteractive) return;
                     startY = touchY;
                     currentY = startY;
                     isDragging = true;
@@ -2475,6 +2530,10 @@
                     document.getElementById('sepiaBtn').classList.contains('active'));
                 closeAllDropdowns();
             };
+            document.getElementById('overflowFullscreen').onclick = () => {
+                toggleFullscreen();
+                closeAllDropdowns();
+            };
 
             // Close dropdowns when clicking outside
             document.addEventListener('click', (e) => {
@@ -2557,8 +2616,9 @@
                     dot.classList.add('active');
                     highlightColor = dot.dataset.color;
                     if (currentTool === 'highlight') currentColor = highlightColor;
-                    // Update preview
+                    // Update preview and color indicator
                     document.getElementById('highlightWave').setAttribute('stroke', highlightColor);
+                    document.getElementById('highlightColorIndicator').style.background = highlightColor;
                 };
             });
 
@@ -2570,8 +2630,9 @@
                     dot.classList.add('active');
                     drawColor = dot.dataset.color;
                     if (currentTool === 'pen') currentColor = drawColor;
-                    // Update preview
+                    // Update preview and color indicator
                     document.getElementById('drawWave').setAttribute('stroke', drawColor);
+                    document.getElementById('drawColorIndicator').style.background = drawColor;
                 };
             });
 
@@ -2609,6 +2670,8 @@
                     dot.classList.add('active');
                     shapeColor = dot.dataset.color;
                     if (currentTool === 'shape') currentColor = shapeColor;
+                    // Update color indicator
+                    document.getElementById('shapeColorIndicator').style.background = shapeColor;
                 };
             });
 
@@ -2993,7 +3056,8 @@
                 // Text tool - create/edit/drag text
                 if (currentTool === 'text') {
                     // Check if clicked on existing text element
-                    const elementsUnderClick = document.elementsFromPoint(e.clientX, e.clientY);
+                    // Use coords (touch-safe) instead of e.clientX which is undefined on TouchEvent
+                    const elementsUnderClick = document.elementsFromPoint(coords.clientX, coords.clientY);
                     const existingText = elementsUnderClick.find(el => el.tagName === 'text' && el.closest('.annotationLayer'));
 
                     if (existingText) {
@@ -3001,7 +3065,7 @@
                         startTextDrag(e, existingText, svg, scaleX, pageNum);
                     } else {
                         // Create new text
-                        showTextEditor(e.clientX, e.clientY, svg, x, y, scaleX, pageNum);
+                        showTextEditor(coords.clientX, coords.clientY, svg, x, y, scaleX, pageNum);
                     }
                     return;
                 }
@@ -3271,14 +3335,18 @@
                 textEl.classList.add('dragging');
                 hasDragged = false;
 
-                dragStartX = e.clientX;
-                dragStartY = e.clientY;
+                // Touch-safe coordinate extraction
+                const startCoords = getEventCoords(e);
+                dragStartX = startCoords.clientX;
+                dragStartY = startCoords.clientY;
                 textOriginalX = parseFloat(textEl.getAttribute('x'));
                 textOriginalY = parseFloat(textEl.getAttribute('y'));
 
-                function onMouseMove(ev) {
-                    const dxScreen = ev.clientX - dragStartX;
-                    const dyScreen = ev.clientY - dragStartY;
+                function onMove(ev) {
+                    ev.preventDefault();
+                    const moveCoords = getEventCoords(ev);
+                    const dxScreen = moveCoords.clientX - dragStartX;
+                    const dyScreen = moveCoords.clientY - dragStartY;
                     // Convert screen delta to viewBox delta (rotation-aware)
                     const vbDelta = screenDeltaToViewBox(svg, dxScreen, dyScreen);
 
@@ -3290,29 +3358,31 @@
                     textEl.setAttribute('y', (textOriginalY + vbDelta.dy).toFixed(2));
                 }
 
-                function onMouseUp(ev) {
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', onMouseUp);
+                function onEnd(ev) {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onEnd);
+                    document.removeEventListener('touchmove', onMove);
+                    document.removeEventListener('touchend', onEnd);
                     textEl.classList.remove('dragging');
 
                     if (hasDragged) {
                         // Moved - save position
                         saveAnnotations(pageNum);
                     } else {
-                        // Not moved - short click = edit
-                        const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                        const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                        // Not moved - short click/tap = edit
                         const svgX = parseFloat(textEl.getAttribute('x'));
                         const svgY = parseFloat(textEl.getAttribute('y'));
-                        // Note: showTextEditor needs scaleX for font scaling logic, which we still have from arguments
-                        showTextEditor(ev.clientX, ev.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
+                        const endCoords = getEventCoords(ev);
+                        showTextEditor(endCoords.clientX, endCoords.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
                     }
 
                     draggedText = null;
                 }
 
-                document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', onMouseUp);
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onEnd);
+                document.addEventListener('touchmove', onMove, { passive: false });
+                document.addEventListener('touchend', onEnd);
             }
 
             // Inline Text Editor
@@ -4452,17 +4522,29 @@
             function updateFullscreenIcon() {
                 const icon = document.getElementById('fullscreenIcon');
                 const btn = document.getElementById('fullscreenBtn');
+                const bottomBtn = document.getElementById('bottomFullscreenBtn');
+                const exitPath = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
+                const enterPath = '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
                 if (isFullscreen) {
-                    icon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
+                    icon.innerHTML = exitPath;
                     btn.classList.add('active');
+                    if (bottomBtn) {
+                        bottomBtn.querySelector('svg').innerHTML = exitPath;
+                        bottomBtn.classList.add('active');
+                    }
                 } else {
-                    icon.innerHTML = '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
+                    icon.innerHTML = enterPath;
                     btn.classList.remove('active');
+                    if (bottomBtn) {
+                        bottomBtn.querySelector('svg').innerHTML = enterPath;
+                        bottomBtn.classList.remove('active');
+                    }
                 }
             }
 
             // 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';
@@ -4493,8 +4575,9 @@
                 applyFullscreenTouchRestrictions();
             });
 
-            // Fullscreen button click
+            // Fullscreen button click (top toolbar + bottom toolbar)
             document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
+            document.getElementById('bottomFullscreenBtn').onclick = () => toggleFullscreen();