feat: Allow navigation of images when expanded via the arrow keys.

mrseanryan · Dec 29, 2018 · 7e1174c · 7e1174c
1 parent 0e978e6
commit 7e1174c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/src/electronApp/AppRenderer.ts b/src/electronApp/AppRenderer.ts
@@ -62,8 +62,21 @@ export namespace AppRenderer {
                 location.reload();
             }
 
-            if (e.key === "Escape") {
-                ExpandedImageRenderer.onClickExpandedImagePopup();
+            switch (e.key) {
+                case "Escape": {
+                    ExpandedImageRenderer.hideExpandedImage();
+                    break;
+                }
+                case "ArrowLeft": {
+                    ExpandedImageRenderer.goToPreviousImage();
+                    break;
+                }
+                case "ArrowRight": {
+                    ExpandedImageRenderer.goToNextImage();
+                    break;
+                }
+                default:
+                // do nothing
             }
         });
     }

diff --git a/src/electronApp/rendering/ExpandedImageRenderer.ts b/src/electronApp/rendering/ExpandedImageRenderer.ts
@@ -6,6 +6,17 @@ import { JQueryUtils } from "../../utils/JQueryUtils";
 const SHOW_POPUP_BUTTON_CLASS = "user-image-popup";
 
 export namespace ExpandedImageRenderer {
+    let allImages: ImageDetail[] = [];
+    let currentImageIndex = -1;
+
+    export function addImage(image: ImageDetail) {
+        allImages.push(image);
+    }
+
+    export function clearImages() {
+        allImages.length = 0;
+    }
+
     export function renderHiddenPopup() {
         const html = `<div class="${SHOW_POPUP_BUTTON_CLASS}" />`;
 
@@ -16,22 +27,51 @@ export namespace ExpandedImageRenderer {
 
     function addClickExpandedImageListener() {
         jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).on("click", () => {
-            onClickExpandedImagePopup();
+            hideExpandedImage();
         });
     }
 
     export function onClickExpandImage(image: ImageDetail) {
+        currentImageIndex = allImages.findIndex(i => i.originalFilepath === image.originalFilepath);
+
+        updateCurrentImageByIndex();
+
+        jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).addClass("user-image-popup-visible");
+    }
+
+    export function hideExpandedImage() {
+        jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).removeClass("user-image-popup-visible");
+    }
+
+    function updateCurrentImageByIndex() {
+        const image = allImages[currentImageIndex];
+        if (!image) {
+            return;
+        }
+
         JQueryUtils.clearHtmlDivByClass(SHOW_POPUP_BUTTON_CLASS);
 
         // use the smaller image, as is smaller and already loaded - so faster
         const imageHtml = `<img src="${image.smallerFilepath}" />`;
 
         jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).append(imageHtml);
+    }
 
-        jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).addClass("user-image-popup-visible");
+    export function goToPreviousImage() {
+        currentImageIndex--;
+        if (currentImageIndex < 0) {
+            currentImageIndex = 0;
+        }
+
+        updateCurrentImageByIndex();
     }
 
-    export function onClickExpandedImagePopup() {
-        jquery(`.${SHOW_POPUP_BUTTON_CLASS}`).removeClass("user-image-popup-visible");
+    export function goToNextImage() {
+        currentImageIndex++;
+        if (currentImageIndex >= allImages.length) {
+            currentImageIndex = allImages.length - 1;
+        }
+
+        updateCurrentImageByIndex();
     }
 }
diff --git a/src/electronApp/rendering/ImagesRenderer.ts b/src/electronApp/rendering/ImagesRenderer.ts
@@ -22,6 +22,7 @@ export namespace ImagesRenderer {
         grid.clearImagesContainer();
         DetailPaneRenderer.clear();
         clearImageHeader();
+        ExpandedImageRenderer.clearImages();
 
         LoaderRenderer.showImagesLoading();
 
@@ -110,6 +111,8 @@ export namespace ImagesRenderer {
             return;
         }
 
+        ExpandedImageRenderer.addImage(image);
+
         imageExpandDiv.addEventListener("click", () =>
             ExpandedImageRenderer.onClickExpandImage(image)
         );