diff --git a/web/js/common/lightbox.js b/web/js/common/lightbox.js index 7e07445..4034597 100644 --- a/web/js/common/lightbox.js +++ b/web/js/common/lightbox.js @@ -80,6 +80,12 @@ export class Lightbox { } async update(shift) { + if (shift < 0 && this.index <= 0) { + return; + } + if (shift > 0 && this.index >= this.images.length - 1) { + return; + } this.index += shift; this.prev.style.visibility = this.index ? "unset" : "hidden"; @@ -91,7 +97,11 @@ export class Lightbox { this.el.style.opacity = 1; this.img.style.opacity = 0; this.spinner.style.display = "inline-block"; - await loadImage(img); + try { + await loadImage(img); + } catch (err) { + console.error('failed to load image', img, err); + } this.spinner.style.display = "none"; this.link.href = img; this.img.src = img; @@ -100,3 +110,23 @@ export class Lightbox { } export const lightbox = new Lightbox(); + +addEventListener('keydown', (event) => { + if (lightbox.el.style.display === 'none') { + return; + } + const { key } = event; + switch (key) { + case 'ArrowLeft': + case 'a': + lightbox.update(-1); + break; + case 'ArrowRight': + case 'd': + lightbox.update(1); + break; + case 'Escape': + lightbox.close(); + break; + } +}); \ No newline at end of file diff --git a/web/js/showImageOnMenu.js b/web/js/showImageOnMenu.js index 4f4bcbe..4fed9de 100644 --- a/web/js/showImageOnMenu.js +++ b/web/js/showImageOnMenu.js @@ -49,11 +49,13 @@ const ext = { api.addEventListener("executed", ({ detail }) => { if (!enabled) return; const images = detail?.output?.images; - if (!images) return; + if (!images || !images.length) return; const format = app.getPreviewFormatParam(); - const src = `./view?filename=${encodeURIComponent(images[0].filename)}&type=${ - images[0].type - }&subfolder=${encodeURIComponent(images[0].subfolder)}&t=${+new Date()}${format}`; + const src = [ + `./view?filename=${encodeURIComponent(images[0].filename)}`, + `type=${images[0].type}`, + `subfolder=${encodeURIComponent(images[0].subfolder)}`, + `t=${+new Date()}${format}`,].join('&'); show(src, detail.node); });