From 6bace7d3117c5567fffce6b62b6e5f69ca76e286 Mon Sep 17 00:00:00 2001
From: Arkadzi Rakouski <arkadyrakovsky@gmail.com>
Date: Mon, 22 Jan 2024 13:44:56 +0300
Subject: [PATCH] fixes for lightbox (#372)

* fixes for lightbox

* fix run check
---
 .../_shared/Lightbox/Lightbox.module.scss     |  2 +-
 src/components/_shared/Lightbox/Lightbox.tsx  | 47 ++++++++++++++-----
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/_shared/Lightbox/Lightbox.module.scss b/src/components/_shared/Lightbox/Lightbox.module.scss
index 4958b65a..dd60812e 100644
--- a/src/components/_shared/Lightbox/Lightbox.module.scss
+++ b/src/components/_shared/Lightbox/Lightbox.module.scss
@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10000;
+  z-index: 99999;
   animation: 300ms fadeIn;
   animation-fill-mode: forwards;
 
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index e4ad4f5a..b4d399b8 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -30,6 +30,12 @@ export const Lightbox = (props: Props) => {
     current: null,
   }
 
+  const handleSmoothAction = (action: () => void) => {
+    setTransitionEnabled(true)
+    action()
+    setTimeout(() => setTransitionEnabled(false), TRANSITION_SPEED)
+  }
+
   const closeLightbox = () => {
     lightboxRef.current?.classList.add(styles.fadeOut)
 
@@ -40,34 +46,48 @@ export const Lightbox = (props: Props) => {
 
   const zoomIn = (event) => {
     event.stopPropagation()
-    setTransitionEnabled(true)
-    setZoomLevel(zoomLevel() * ZOOM_STEP)
-    setTimeout(() => setTransitionEnabled(false), TRANSITION_SPEED)
+
+    handleSmoothAction(() => {
+      setZoomLevel(zoomLevel() * ZOOM_STEP)
+    })
   }
 
   const zoomOut = (event) => {
     event.stopPropagation()
-    setTransitionEnabled(true)
-    setZoomLevel(zoomLevel() / ZOOM_STEP)
-    setTimeout(() => setTransitionEnabled(false), TRANSITION_SPEED)
+
+    handleSmoothAction(() => {
+      setZoomLevel(zoomLevel() / ZOOM_STEP)
+    })
+  }
+
+  const positionReset = () => {
+    setTranslateX(0)
+    setTranslateY(0)
   }
 
   const zoomReset = (event) => {
     event.stopPropagation()
-    setZoomLevel(1)
+
+    handleSmoothAction(() => {
+      setZoomLevel(1)
+      positionReset()
+    })
   }
 
-  const handleWheelZoom = (event) => {
+  const handleMouseWheelZoom = (event) => {
     event.preventDefault()
+    event.stopPropagation()
+
+    const isTrackpad = event.ctrlKey
+    if (isTrackpad) return
 
     let scale = zoomLevel()
-
     scale += event.deltaY * -0.01
-
     scale = Math.min(Math.max(0.125, scale), 4)
 
-    setTransitionEnabled(true)
-    setZoomLevel(scale * ZOOM_STEP)
+    handleSmoothAction(() => {
+      setZoomLevel(scale * ZOOM_STEP)
+    })
   }
 
   useEscKeyDownHandler(closeLightbox)
@@ -130,6 +150,7 @@ export const Lightbox = (props: Props) => {
     <div
       class={clsx(styles.Lightbox, props.class)}
       onClick={closeLightbox}
+      onWheel={(e) => e.preventDefault()}
       ref={(el) => (lightboxRef.current = el)}
     >
       <Show when={pictureScalePercentage()}>
@@ -154,7 +175,7 @@ export const Lightbox = (props: Props) => {
         src={getImageUrl(props.image, { noSizeUrlPart: true })}
         alt={props.imageAlt || ''}
         onClick={(event) => event.stopPropagation()}
-        onWheel={handleWheelZoom}
+        onWheel={handleMouseWheelZoom}
         style={lightboxStyle()}
         onMouseDown={onMouseDown}
       />