Add logics for handling keyboard event

Closes #5
marshallku · Nov 18, 2024 · d2eb85d · d2eb85d
1 parent d4e2cc3
commit d2eb85d
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/zoom.ts b/src/zoom.ts
@@ -21,6 +21,12 @@ const zoom = (image: HTMLImageElement, { background, useMaximumSize = true, onTr
     const bg = document.createElement("div");
     const imageClone = document.createElement("img");
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            removeImage();
+        }
+    };
+
     const removeImage = () => {
         bg.classList.remove("zoom-bg--reveal");
         imageClone.style.transform = "";
@@ -37,6 +43,7 @@ const zoom = (image: HTMLImageElement, { background, useMaximumSize = true, onTr
         imageClone.removeEventListener("click", removeImage);
         window.removeEventListener("scroll", removeImage);
         window.removeEventListener("resize", removeImage);
+        document.removeEventListener("keydown", handleKeyDown);
     };
 
     bg.classList.add("zoom-bg");
@@ -77,6 +84,9 @@ const zoom = (image: HTMLImageElement, { background, useMaximumSize = true, onTr
         once: true,
         passive: true,
     });
+    document.addEventListener("keydown", handleKeyDown, {
+        passive: true,
+    });
 
     document.body.append(bg, imageClone);