From 865094ca5bf7ce6f684c6cf0f80287c3cc7ecd8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torbj=C3=B6rn=20L=C3=B6nnemark?= Date: Sat, 23 Mar 2024 16:31:07 +0100 Subject: [PATCH] Update lightbox with images generated while it is open This removes the need to close and re-open the lightbox to view images that were completed while it was open. --- web/js/common/lightbox.js | 10 ++++++++++ web/js/imageFeed.js | 2 ++ 2 files changed, 12 insertions(+) diff --git a/web/js/common/lightbox.js b/web/js/common/lightbox.js index 4034597..d351acf 100644 --- a/web/js/common/lightbox.js +++ b/web/js/common/lightbox.js @@ -107,6 +107,16 @@ export class Lightbox { this.img.src = img; this.img.style.opacity = 1; } + + async updateWithNewImage(img, feedDirection) { + // No-op if lightbox is not open + if (this.el.style.display === "none" || this.el.style.opacity === "0") return; + + // Ensure currently shown image does not change + const [method, shift] = feedDirection === "newest first" ? ["unshift", 1] : ["push", 0]; + this.images[method](img); + await this.update(shift); + } } export const lightbox = new Lightbox(); diff --git a/web/js/imageFeed.js b/web/js/imageFeed.js index 3a77c29..bd797f8 100644 --- a/web/js/imageFeed.js +++ b/web/js/imageFeed.js @@ -438,6 +438,8 @@ app.registerExtension({ ), ]) ); + // If lightbox is open, update it with new image + lightbox.updateWithNewImage(href, feedDirection.value); } } });