mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add lightbox for all preview images (component, grid cell, PDF thumbs)

Browse Source 
Click any thumbnail to open full-size in overlay. Click backdrop or
press Escape to close. PDF thumbs now clickable too.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-22 00:45:10 +00:00
parent cdefa70bd7
commit 1d3a157d75
3 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/app.mjs
View File

@@ -179,13 +179,20 @@ function build_image_grid(grid_el, images, on_delete) {
grid_el.replaceChildren(...images.map(img_id => {
const thumb = clone('t-image-thumb');
const link = qs(thumb, '.thumb-link');
link.href = `/img/${img_id}`;
link.href = '#';
link.addEventListener('click', (e) => { e.preventDefault(); open_lightbox(`/img/${img_id}`); });
qs(thumb, '.thumb-img').src = `/img/${img_id}`;
qs(thumb, '.thumb-delete').addEventListener('click', () => on_delete(img_id));
return thumb;
}));
}
function open_lightbox(src) {
const lb = document.getElementById('lightbox');
document.getElementById('lightbox-img').src = src;
lb.hidden = false;
}
// ---------------------------------------------------------------------------
// Render: Components section (split pane)
// ---------------------------------------------------------------------------
@@ -355,6 +362,8 @@ function render_detail_panel() {
thumb.className = 'pdf-thumb';
thumb.src = `/pdf/${pdf.thumb_filename}`;
thumb.alt = '';
thumb.style.cursor = 'zoom-in';
thumb.addEventListener('click', () => open_lightbox(`/pdf/${pdf.thumb_filename}`));
row.appendChild(thumb);
}
@@ -437,9 +446,8 @@ function build_detail_inv_entry(entry) {
if (cell_filename) {
const thumb = document.createElement('a');
thumb.className = 'thumb-link cell-thumb-link';
thumb.href = `/img/${cell_filename}`;
thumb.target = '_blank';
thumb.rel = 'noopener';
thumb.href = '#';
thumb.addEventListener('click', (e) => { e.preventDefault(); open_lightbox(`/img/${cell_filename}`); });
const img = document.createElement('img');
img.className = 'thumb-img';
img.src = `/img/${cell_filename}`;
@@ -1376,6 +1384,8 @@ function render_file_picker_list() {
thumb.className = 'fp-thumb';
thumb.src = `/pdf/${pdf.thumb_filename}`;
thumb.alt = '';
thumb.style.cursor = 'zoom-in';
thumb.addEventListener('click', () => open_lightbox(`/pdf/${pdf.thumb_filename}`));
row.appendChild(thumb);
}
@@ -1940,6 +1950,11 @@ async function init() {
btn.addEventListener('click', () => navigate('/' + btn.dataset.section));
});
// Lightbox
const lightbox = document.getElementById('lightbox');
lightbox.addEventListener('click', () => { lightbox.hidden = true; });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lightbox.hidden = true; });
// Maintenance menu
const maint_toggle = document.getElementById('maint-toggle');
const maint_dropdown = document.getElementById('maint-dropdown');