nodebb-plugin-pdf-secure 1.1.3 → 1.1.5

package/library.js

@@ -57,8 +57,13 @@ plugin.init = async (params) => {
 			}
 
 			// Inject the filename and config into the viewer
+			// Also inject CSS to hide uploadOverlay immediately
 			const injectedHtml = html
 				.replace('</head>', `
+					<style>
+						/* Hide upload overlay since PDF will auto-load */
+						#uploadOverlay { display: none !important; }
+					</style>
 					<script>
 						window.PDF_SECURE_CONFIG = {
 							filename: ${JSON.stringify(safeName)},
@@ -66,8 +71,7 @@ plugin.init = async (params) => {
 							csrfToken: ${JSON.stringify(req.csrfToken ? req.csrfToken() : '')}
 						};
 					</script>
-				</head>`)
-				.replace('id="uploadOverlay">', 'id="uploadOverlay" class="hidden">');
+				</head>`);
 
 			res.type('html').send(injectedHtml);
 		});

package/package.json

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

@@ -31,31 +31,61 @@ console.log('[PDF-Secure] main.js loaded');
 				var filename = parts[parts.length - 1];
 				console.log('[PDF-Secure] Embedding:', filename);
 
-				// Create inline viewer container
+				// Create inline viewer container with INLINE STYLES to ensure they work
 				var container = document.createElement('div');
 				container.className = 'pdf-secure-embed';
+				container.style.cssText = 'margin:16px 0;border-radius:12px;overflow:hidden;background:#1f1f1f;border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 20px rgba(0,0,0,0.25);';
 
-				// Header with filename
+				// Header with filename - ALL INLINE STYLES
 				var header = document.createElement('div');
 				header.className = 'pdf-secure-embed-header';
-				header.innerHTML =
-					'<div class="pdf-secure-embed-title">' +
-					'<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" fill="currentColor"/></svg>' +
-					'<span>' + escapeHtml(decodeURIComponent(link.textContent || filename)) + '</span>' +
-					'</div>' +
-					'<div class="pdf-secure-embed-actions">' +
-					'<button class="pdf-secure-fullscreen-btn" title="Tam Ekran">' +
-					'<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" fill="currentColor"/></svg>' +
-					'</button>' +
-					'</div>';
+				header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(135deg,#2d2d2d 0%,#252525 100%);border-bottom:1px solid rgba(255,255,255,0.08);';
+
+				var title = document.createElement('div');
+				title.className = 'pdf-secure-embed-title';
+				title.style.cssText = 'display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:500;';
+
+				// PDF icon with INLINE SIZE
+				var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+				icon.setAttribute('viewBox', '0 0 24 24');
+				icon.style.cssText = 'width:20px;height:20px;min-width:20px;max-width:20px;fill:#e81224;flex-shrink:0;';
+				icon.innerHTML = '<path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>';
+
+				var nameSpan = document.createElement('span');
+				nameSpan.style.cssText = 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;';
+				nameSpan.textContent = decodeURIComponent(link.textContent || filename);
+
+				title.appendChild(icon);
+				title.appendChild(nameSpan);
+
+				// Actions (fullscreen button)
+				var actions = document.createElement('div');
+				actions.style.cssText = 'display:flex;gap:8px;';
+
+				var fullscreenBtn = document.createElement('button');
+				fullscreenBtn.className = 'pdf-secure-fullscreen-btn';
+				fullscreenBtn.title = 'Tam Ekran';
+				fullscreenBtn.style.cssText = 'display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(255,255,255,0.08);border:none;border-radius:6px;cursor:pointer;';
+
+				var fullscreenIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+				fullscreenIcon.setAttribute('viewBox', '0 0 24 24');
+				fullscreenIcon.style.cssText = 'width:18px;height:18px;min-width:18px;max-width:18px;fill:#fff;';
+				fullscreenIcon.innerHTML = '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
+				fullscreenBtn.appendChild(fullscreenIcon);
+				actions.appendChild(fullscreenBtn);
+
+				header.appendChild(title);
+				header.appendChild(actions);
 				container.appendChild(header);
 
-				// Iframe for viewer
+				// Iframe wrapper
 				var iframeWrapper = document.createElement('div');
 				iframeWrapper.className = 'pdf-secure-embed-body';
+				iframeWrapper.style.cssText = 'position:relative;width:100%;height:600px;background:#525659;';
 
 				var iframe = document.createElement('iframe');
 				iframe.className = 'pdf-secure-iframe';
+				iframe.style.cssText = 'width:100%;height:100%;border:none;display:block;';
 				iframe.src = config.relative_path + '/plugins/pdf-secure/viewer?file=' + encodeURIComponent(filename);
 				iframe.setAttribute('frameborder', '0');
 				iframe.setAttribute('allowfullscreen', 'true');
@@ -65,7 +95,7 @@ console.log('[PDF-Secure] main.js loaded');
 				container.appendChild(iframeWrapper);
 
 				// Fullscreen button handler
-				header.querySelector('.pdf-secure-fullscreen-btn').addEventListener('click', function () {
+				fullscreenBtn.addEventListener('click', function () {
 					if (iframe.requestFullscreen) {
 						iframe.requestFullscreen();
 					} else if (iframe.webkitRequestFullscreen) {
@@ -75,63 +105,8 @@ console.log('[PDF-Secure] main.js loaded');
 					}
 				});
 
-				// Check for NodeBB upload container and replace it instead of just the link
-				var uploadContainer = link.closest('.upload-container, .uploaded-file, .attachment, [data-upload], .img-responsive');
-				var nodebbPreview = link.closest('p, div');
-
-				// Also look for sibling image/icon that NodeBB might show
-				var prevSibling = link.previousElementSibling;
-				var parentParagraph = link.parentElement;
-
-				// If the link is inside a paragraph with just the link and maybe an icon, replace the whole paragraph
-				if (parentParagraph && parentParagraph.tagName === 'P') {
-					var textContent = parentParagraph.textContent.trim();
-					var linkText = link.textContent.trim();
-					// If paragraph only contains the link text (maybe with some whitespace), replace the whole paragraph
-					if (textContent === linkText || textContent === filename || textContent === decodeURIComponent(filename)) {
-						parentParagraph.replaceWith(container);
-						return;
-					}
-				}
-
-				// Hide any preceding SVG or image that looks like a file icon
-				if (prevSibling && (prevSibling.tagName === 'SVG' || prevSibling.tagName === 'IMG' || prevSibling.classList.contains('file-icon'))) {
-					prevSibling.style.display = 'none';
-				}
-
-				// If there's an upload container, replace it entirely
-				if (uploadContainer) {
-					uploadContainer.replaceWith(container);
-				} else {
-					link.replaceWith(container);
-				}
-			});
-		});
-
-		// Also hide any remaining large file preview icons that NodeBB might render
-		postContents.forEach(function (content) {
-			// Hide default NodeBB file preview containers for PDFs
-			var fileIcons = content.querySelectorAll('img[src*=".pdf"], svg.file-icon, .file-preview');
-			fileIcons.forEach(function (icon) {
-				// Check if this is near a pdf-secure-embed
-				var nearEmbed = icon.closest('.pdf-secure-embed');
-				if (!nearEmbed) {
-					// Check if there's a pdf-secure-embed nearby
-					var parent = icon.parentElement;
-					if (parent) {
-						var siblingEmbed = parent.querySelector('.pdf-secure-embed');
-						if (siblingEmbed) {
-							icon.style.display = 'none';
-						}
-					}
-				}
+				link.replaceWith(container);
 			});
 		});
 	}
-
-	function escapeHtml(str) {
-		var d = document.createElement('div');
-		d.textContent = str;
-		return d.innerHTML;
-	}
 })();