hover-preview.js (1923B)
1 2 document.addEventListener('DOMContentLoaded', function () { 3 const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp)$/i; 4 const VIDEO_EXTENSIONS = /\.(mp4|webm|m4v)$/i; 5 6 const tooltip = document.createElement('div'); 7 tooltip.id = 'thumb-tooltip'; 8 Object.assign(tooltip.style, { 9 position: 'fixed', 10 display: 'none', 11 pointerEvents: 'none', 12 zIndex: '9999', 13 border: '1px solid #888', 14 background: '#fff', 15 padding: '3px', 16 borderRadius: '4px', 17 boxShadow: '0 2px 8px rgba(0,0,0,0.3)', 18 }); 19 const tooltipImg = document.createElement('img'); 20 tooltipImg.style.maxWidth = '200px'; 21 tooltipImg.style.maxHeight = '200px'; 22 tooltipImg.style.display = 'block'; 23 tooltip.appendChild(tooltipImg); 24 document.body.appendChild(tooltip); 25 26 document.querySelectorAll('.file-item a').forEach(function (link) { 27 const filename = link.title || link.textContent.trim(); 28 const isImage = IMAGE_EXTENSIONS.test(filename); 29 const isVideo = VIDEO_EXTENSIONS.test(filename); 30 if (!isImage && !isVideo) return; 31 32 const encodedFilename = encodeURIComponent(filename); 33 const thumbUrl = isVideo 34 ? '/uploads/thumbnails/' + encodedFilename + '.jpg' 35 : '/uploads/' + encodedFilename; 36 37 link.addEventListener('mouseenter', function () { 38 tooltipImg.src = thumbUrl; 39 tooltip.style.display = 'block'; 40 }); 41 42 link.addEventListener('mousemove', function (e) { 43 const pad = 16; 44 const tw = tooltip.offsetWidth; 45 const th = tooltip.offsetHeight; 46 let x = e.clientX + pad; 47 let y = e.clientY + pad; 48 if (x + tw > window.innerWidth) x = e.clientX - tw - pad; 49 if (y + th > window.innerHeight) y = e.clientY - th - pad; 50 tooltip.style.left = x + 'px'; 51 tooltip.style.top = y + 'px'; 52 }); 53 54 link.addEventListener('mouseleave', function () { 55 tooltip.style.display = 'none'; 56 tooltipImg.src = ''; 57 }); 58 }); 59 });