From 4ba9f6451f5ab1e5ae95c0871d6fa594f49372cc Mon Sep 17 00:00:00 2001 From: Ken D'Ambrosio Date: Fri, 22 May 2026 23:14:07 +0000 Subject: Add hover zoom preview for admin thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hovering over a thumbnail in the admin file table pops up the full 300×300 cached version near the cursor, making it easy to confirm identity before deleting or editing. Co-Authored-By: Claude Sonnet 4.6 --- views/admin/album.erb | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'views') diff --git a/views/admin/album.erb b/views/admin/album.erb index 14a8f07..8c9ebe1 100644 --- a/views/admin/album.erb +++ b/views/admin/album.erb @@ -122,6 +122,37 @@ e.preventDefault(); } }); + + // Hover preview for admin thumbnails + (function () { + const preview = document.createElement('div'); + preview.id = 'admin-thumb-preview'; + preview.innerHTML = ''; + document.body.appendChild(preview); + const pimg = preview.querySelector('img'); + + function reposition(e) { + const pw = 300 + 12, ph = 300 + 12; + let x = e.clientX + 18, y = e.clientY + 18; + if (x + pw > window.innerWidth) x = e.clientX - pw - 8; + if (y + ph > window.innerHeight) y = e.clientY - ph - 8; + preview.style.left = x + 'px'; + preview.style.top = y + 'px'; + } + + document.querySelectorAll('.files-table td:first-child img').forEach(function (thumb) { + thumb.style.cursor = 'zoom-in'; + thumb.addEventListener('mouseenter', function (e) { + pimg.src = thumb.src; + preview.style.display = 'block'; + reposition(e); + }); + thumb.addEventListener('mousemove', reposition); + thumb.addEventListener('mouseleave', function () { + preview.style.display = 'none'; + }); + }); + })(); })(); -- cgit v1.2.3