nodebb-plugin-pdf-secure 1.2.18 → 1.2.20

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 */
@@ -1358,7 +1383,7 @@
            ========================================== */
         /* Ensure bottom toolbar is visible and viewer container makes room for it */
         body.viewer-fullscreen #bottomToolbar {
-            display: block;
+            display: flex;
         }
 
         body.viewer-fullscreen #viewerContainer {
@@ -1430,7 +1455,7 @@
 
             /* Show bottom toolbar */
             #bottomToolbar {
-                display: block;
+                display: flex;
             }
 
             /* Viewer container adjusted for both toolbars */
@@ -1547,6 +1572,106 @@
                 touch-action: manipulation;
             }
         }
+
+        /* Premium Lock Overlay */
+        #premiumLockOverlay {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 60px 20px;
+            text-align: center;
+            background: linear-gradient(180deg, rgba(31,31,31,0.95) 0%, rgba(20,20,20,0.98) 100%);
+            border-top: 2px solid rgba(255, 215, 0, 0.3);
+            min-height: 400px;
+            margin: 0 auto;
+            max-width: 100%;
+        }
+
+        .premium-lock-icon {
+            margin-bottom: 20px;
+            opacity: 0.9;
+        }
+
+        .premium-lock-pages {
+            font-size: 22px;
+            font-weight: 600;
+            color: #ffd700;
+            margin-bottom: 12px;
+        }
+
+        .premium-lock-message {
+            font-size: 16px;
+            color: #a0a0a0;
+            margin-bottom: 28px;
+            max-width: 400px;
+            line-height: 1.5;
+        }
+
+        .premium-lock-button {
+            display: inline-block;
+            padding: 14px 40px;
+            background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
+            color: #1a1a1a;
+            font-size: 16px;
+            font-weight: 700;
+            border-radius: 8px;
+            text-decoration: none;
+            transition: transform 0.2s, box-shadow 0.2s;
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+        }
+
+        .premium-lock-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
+        }
+
+        .premium-lock-secondary {
+            margin-top: 20px;
+            font-size: 14px;
+            color: #888;
+            font-style: italic;
+        }
+
+        /* Locked Thumbnails */
+        .thumbnail.locked {
+            opacity: 0.4;
+            cursor: not-allowed;
+            position: relative;
+        }
+
+        .thumbnail.locked:hover {
+            border-color: rgba(255, 215, 0, 0.4);
+        }
+
+        .thumbnail-lock {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 20px;
+            z-index: 2;
+        }
+
+        @media (max-width: 768px) {
+            #premiumLockOverlay {
+                padding: 40px 16px;
+                min-height: 300px;
+            }
+
+            .premium-lock-pages {
+                font-size: 18px;
+            }
+
+            .premium-lock-message {
+                font-size: 14px;
+            }
+
+            .premium-lock-button {
+                padding: 12px 32px;
+                font-size: 14px;
+            }
+        }
     </style>
 </head>
 
@@ -1573,6 +1698,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" />
@@ -1618,6 +1744,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" />
@@ -1721,6 +1848,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" />
@@ -1863,6 +1991,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>
@@ -1873,11 +2008,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) -->
@@ -1914,6 +2054,10 @@
         (function () {
             'use strict';
 
+            // Security: Capture config early and delete from window immediately
+            const _cfg = window.PDF_SECURE_CONFIG ? Object.assign({}, window.PDF_SECURE_CONFIG) : null;
+            delete window.PDF_SECURE_CONFIG;
+
             // ============================================
             // CANVAS EXPORT PROTECTION
             // Block toDataURL/toBlob for PDF render canvas only
@@ -1955,6 +2099,9 @@
             let currentPath = null;
             let currentDrawingPage = null;
 
+            // Premium info (saved before config deletion for UI use)
+            let premiumInfo = null;
+
             // RAF throttle for smooth drawing performance
             let pathSegments = [];  // Buffer path segments
             let drawRAF = null;     // requestAnimationFrame ID
@@ -2004,8 +2151,7 @@
                     firstPageRendered = true;
                     // Notify parent that PDF is fully rendered (for queue system)
                     if (window.parent && window.parent !== window) {
-                        const config = window.PDF_SECURE_CONFIG || {};
-                        window.parent.postMessage({ type: 'pdf-secure-ready', filename: config.filename }, window.location.origin);
+                        window.parent.postMessage({ type: 'pdf-secure-ready', filename: (_cfg || {}).filename }, window.location.origin);
                         console.log('[PDF-Secure] First page rendered, notifying parent');
                     }
                 }
@@ -2078,14 +2224,90 @@
                 return data.buffer;
             }
 
+            function showPremiumLockOverlay(totalPages) {
+                var viewerEl = document.getElementById('viewer');
+                if (!viewerEl) return;
+
+                var overlay = document.createElement('div');
+                overlay.id = 'premiumLockOverlay';
+                overlay.innerHTML = '\
+                    <div class="premium-lock-icon">\
+                        <svg viewBox="0 0 24 24" width="64" height="64" fill="#ffd700">\
+                            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/>\
+                        </svg>\
+                    </div>\
+                    <div class="premium-lock-pages">' + (totalPages - 1) + ' sayfa daha kilitli</div>\
+                    <div class="premium-lock-message">Bu icerigi goruntulemeye devam etmek icin Premium uyelik gereklidir.</div>\
+                    <a href="https://forumtest.ieu.app/premium" target="_blank" class="premium-lock-button">Premium Satin Al</a>\
+                    <div class="premium-lock-secondary">Materyal yukleyerek de Premium olabilirsiniz!</div>';
+
+                viewerEl.appendChild(overlay);
+            }
+
+            // ============================================
+            // PREMIUM INTEGRITY: Periodic Check (2s interval)
+            // ============================================
+            function startPeriodicCheck() {
+                setInterval(function () {
+                    if (!premiumInfo || premiumInfo.isPremium) return;
+                    var pages = document.querySelectorAll('#viewer .page');
+                    pages.forEach(function (page, idx) {
+                        if (idx > 0 && page.style.display !== 'none') {
+                            page.style.display = 'none';
+                        }
+                    });
+                    if (!document.getElementById('premiumLockOverlay')) {
+                        showPremiumLockOverlay(premiumInfo.totalPages);
+                    }
+                    if (pdfViewer && pdfViewer.currentPageNumber > 1) {
+                        pdfViewer.currentPageNumber = 1;
+                    }
+                }, 2000);
+            }
+
+            // ============================================
+            // PREMIUM INTEGRITY: MutationObserver Anti-Tampering
+            // ============================================
+            function setupAntiTampering() {
+                var viewerEl = document.getElementById('viewer');
+                if (!viewerEl) return;
+
+                new MutationObserver(function (mutations) {
+                    for (var i = 0; i < mutations.length; i++) {
+                        var removed = mutations[i].removedNodes;
+                        for (var j = 0; j < removed.length; j++) {
+                            if (removed[j].id === 'premiumLockOverlay') {
+                                showPremiumLockOverlay(premiumInfo.totalPages);
+                                return;
+                            }
+                        }
+                    }
+                }).observe(viewerEl, { childList: true });
+
+                new MutationObserver(function (mutations) {
+                    for (var i = 0; i < mutations.length; i++) {
+                        var m = mutations[i];
+                        if (m.type === 'attributes' && m.attributeName === 'style') {
+                            var target = m.target;
+                            if (target.classList && target.classList.contains('page')) {
+                                var pageNum = parseInt(target.dataset.pageNumber || '0', 10);
+                                if (pageNum > 1 && target.style.display !== 'none') {
+                                    target.style.display = 'none';
+                                }
+                            }
+                        }
+                    }
+                }).observe(viewerEl, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
+            }
+
             // Auto-load PDF if config is present (injected by NodeBB plugin)
             async function autoLoadSecurePDF() {
-                if (!window.PDF_SECURE_CONFIG || !window.PDF_SECURE_CONFIG.filename) {
+                if (!_cfg || !_cfg.filename) {
                     console.log('[PDF-Secure] No config found, showing file picker');
                     return;
                 }
 
-                const config = window.PDF_SECURE_CONFIG;
+                const config = _cfg;
                 console.log('[PDF-Secure] Auto-loading:', config.filename);
 
                 // Show loading state
@@ -2157,8 +2379,8 @@
                             pdfBuffer = encodedBuffer;
                         }
 
-                        // Send buffer to parent for caching
-                        if (window.parent && window.parent !== window) {
+                        // Send buffer to parent for caching (premium only - non-premium must not leak decoded buffer)
+                        if (_cfg.isPremium !== false && window.parent && window.parent !== window) {
                             // Clone buffer for parent (we keep original)
                             const bufferCopy = pdfBuffer.slice(0);
                             window.parent.postMessage({
@@ -2174,14 +2396,21 @@
                     // Step 4: Load into viewer
                     await loadPDFFromBuffer(pdfBuffer);
 
+                    // Premium Gate: Client-side page restriction for non-premium users
+                    if (config.isPremium === false && pdfDoc && pdfDoc.numPages > 1) {
+                        premiumInfo = Object.freeze({ isPremium: false, totalPages: pdfDoc.numPages });
+                        showPremiumLockOverlay(pdfDoc.numPages);
+                        startPeriodicCheck();
+                        setupAntiTampering();
+                    } else {
+                        premiumInfo = Object.freeze({ isPremium: true, totalPages: pdfDoc ? pdfDoc.numPages : 1 });
+                    }
+
                     // Step 5: Moved to pagerendered event for proper timing
 
                     // Step 6: Security - clear references to prevent extraction
                     pdfBuffer = null;
 
-                    // Security: Delete config containing sensitive data (nonce, key)
-                    delete window.PDF_SECURE_CONFIG;
-
                     // Security: Remove PDF.js globals to prevent console manipulation
                     delete window.pdfjsLib;
                     delete window.pdfjsViewer;
@@ -2205,10 +2434,9 @@
 
                     // Notify parent of error (prevents 60s queue hang)
                     if (window.parent && window.parent !== window) {
-                        const config = window.PDF_SECURE_CONFIG || {};
                         window.parent.postMessage({
                             type: 'pdf-secure-ready',
-                            filename: config.filename,
+                            filename: (_cfg || {}).filename,
                             error: err.message
                         }, window.location.origin);
                     }
@@ -2429,7 +2657,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;
@@ -2487,6 +2718,10 @@
                     document.getElementById('sepiaBtn').classList.contains('active'));
                 closeAllDropdowns();
             };
+            document.getElementById('overflowFullscreen').onclick = () => {
+                toggleFullscreen();
+                closeAllDropdowns();
+            };
 
             // Close dropdowns when clicking outside
             document.addEventListener('click', (e) => {
@@ -2569,8 +2804,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;
                 };
             });
 
@@ -2582,8 +2818,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;
                 };
             });
 
@@ -2621,6 +2858,8 @@
                     dot.classList.add('active');
                     shapeColor = dot.dataset.color;
                     if (currentTool === 'shape') currentColor = shapeColor;
+                    // Update color indicator
+                    document.getElementById('shapeColorIndicator').style.background = shapeColor;
                 };
             });
 
@@ -3005,7 +3244,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) {
@@ -3013,7 +3253,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;
                 }
@@ -3283,14 +3523,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);
 
@@ -3302,29 +3546,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
@@ -4464,12 +4710,23 @@
             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');
+                    }
                 }
             }
 
@@ -4506,8 +4763,9 @@
                 applyFullscreenTouchRestrictions();
             });
 
-            // Fullscreen button click
+            // Fullscreen button click (top toolbar + bottom toolbar)
             document.getElementById('fullscreenBtn').onclick = () => toggleFullscreen();
+            document.getElementById('bottomFullscreenBtn').onclick = () => toggleFullscreen();