tagliatelle

commit 2d1d0923824ec6dbe0098c198e47fdda9e0def8f
parent 7d54c4d161fc51d10ecbf670e8ff64c6a3c9cfce
Author: breadcat <breadcat@users.noreply.github.com>
Date:   Sun, 17 May 2026 19:12:53 +0100

Split off hover preview from bulk editor JS

Diffstat:
M
static/bulk-tag.js
 | 
57
---------------------------------------------------------
A
static/hover-preview.js
 | 
58
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
templates/bulk-tag.html
 | 
1
+

3 files changed, 59 insertions(+), 57 deletions(-)
diff --git a/static/bulk-tag.js b/static/bulk-tag.js
@@ -114,61 +114,4 @@ document.addEventListener('DOMContentLoaded', function () {
       return;
     }
   });
-
-  // Hover previews for recent images
-  const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp)$/i;
-  const VIDEO_EXTENSIONS = /\.(mp4|webm|m4v)$/i;
-
-  const tooltip = document.createElement('div');
-  tooltip.id = 'thumb-tooltip';
-  Object.assign(tooltip.style, {
-    position: 'fixed',
-    display: 'none',
-    pointerEvents: 'none',
-    zIndex: '9999',
-    border: '1px solid #888',
-    background: '#fff',
-    padding: '3px',
-    borderRadius: '4px',
-    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-  });
-  const tooltipImg = document.createElement('img');
-  tooltipImg.style.maxWidth = '200px';
-  tooltipImg.style.maxHeight = '200px';
-  tooltipImg.style.display = 'block';
-  tooltip.appendChild(tooltipImg);
-  document.body.appendChild(tooltip);
-
-  document.querySelectorAll('.file-item a').forEach(function (link) {
-    const filename = link.title || link.textContent.trim();
-    const isImage = IMAGE_EXTENSIONS.test(filename);
-    const isVideo = VIDEO_EXTENSIONS.test(filename);
-    if (!isImage && !isVideo) return;
-
-    const thumbUrl = isVideo
-      ? '/uploads/thumbnails/' + filename + '.jpg'
-      : '/uploads/' + filename;
-
-    link.addEventListener('mouseenter', function () {
-      tooltipImg.src = thumbUrl;
-      tooltip.style.display = 'block';
-    });
-
-    link.addEventListener('mousemove', function (e) {
-      const pad = 16;
-      const tw = tooltip.offsetWidth;
-      const th = tooltip.offsetHeight;
-      let x = e.clientX + pad;
-      let y = e.clientY + pad;
-      if (x + tw > window.innerWidth)  x = e.clientX - tw - pad;
-      if (y + th > window.innerHeight) y = e.clientY - th - pad;
-      tooltip.style.left = x + 'px';
-      tooltip.style.top  = y + 'px';
-    });
-
-    link.addEventListener('mouseleave', function () {
-      tooltip.style.display = 'none';
-      tooltipImg.src = '';
-    });
-  });
 });
diff --git a/static/hover-preview.js b/static/hover-preview.js
@@ -0,0 +1,58 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+  const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp)$/i;
+  const VIDEO_EXTENSIONS = /\.(mp4|webm|m4v)$/i;
+
+  const tooltip = document.createElement('div');
+  tooltip.id = 'thumb-tooltip';
+  Object.assign(tooltip.style, {
+    position: 'fixed',
+    display: 'none',
+    pointerEvents: 'none',
+    zIndex: '9999',
+    border: '1px solid #888',
+    background: '#fff',
+    padding: '3px',
+    borderRadius: '4px',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+  });
+  const tooltipImg = document.createElement('img');
+  tooltipImg.style.maxWidth = '200px';
+  tooltipImg.style.maxHeight = '200px';
+  tooltipImg.style.display = 'block';
+  tooltip.appendChild(tooltipImg);
+  document.body.appendChild(tooltip);
+
+  document.querySelectorAll('.file-item a').forEach(function (link) {
+    const filename = link.title || link.textContent.trim();
+    const isImage = IMAGE_EXTENSIONS.test(filename);
+    const isVideo = VIDEO_EXTENSIONS.test(filename);
+    if (!isImage && !isVideo) return;
+
+    const thumbUrl = isVideo
+      ? '/uploads/thumbnails/' + filename + '.jpg'
+      : '/uploads/' + filename;
+
+    link.addEventListener('mouseenter', function () {
+      tooltipImg.src = thumbUrl;
+      tooltip.style.display = 'block';
+    });
+
+    link.addEventListener('mousemove', function (e) {
+      const pad = 16;
+      const tw = tooltip.offsetWidth;
+      const th = tooltip.offsetHeight;
+      let x = e.clientX + pad;
+      let y = e.clientY + pad;
+      if (x + tw > window.innerWidth)  x = e.clientX - tw - pad;
+      if (y + th > window.innerHeight) y = e.clientY - th - pad;
+      tooltip.style.left = x + 'px';
+      tooltip.style.top  = y + 'px';
+    });
+
+    link.addEventListener('mouseleave', function () {
+      tooltip.style.display = 'none';
+      tooltipImg.src = '';
+    });
+  });
+});
diff --git a/templates/bulk-tag.html b/templates/bulk-tag.html
@@ -102,4 +102,5 @@
                 {{end}}
 		</details>
     <script src="/static/bulk-tag.js" defer></script>
+    <script src="/static/hover-preview.js" defer></script>
 {{template "_footer"}}
 \ No newline at end of file