Merge pull request #112 from DrJKL/lightbox-image-stuff

Keyboard shortcuts for lightbox and 2 error handling fixes.

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;
+	}
+});

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);
 		});