From 070950859b380f1f35cf5775431033271f749c7d Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 20 Feb 2024 13:13:59 +0500
Subject: [PATCH] Zoom in letter modal done

---
 .../ClientsPage/ClientsPageCarousel.tsx       |  2 +-
 .../ClientsPage/ZoomInLetterModal.tsx         | 90 +++++++++++++++----
 client/src/icons/CrossIcon.tsx                |  4 +-
 client/src/icons/ZoomInIcon.tsx               | 37 ++++++++
 client/src/icons/ZoomOutIcon.tsx              | 32 +++++++
 client/src/pages/ClientsPage/ClientsPage.tsx  |  1 -
 6 files changed, 146 insertions(+), 20 deletions(-)
 create mode 100644 client/src/icons/ZoomInIcon.tsx
 create mode 100644 client/src/icons/ZoomOutIcon.tsx

diff --git a/client/src/components/ClientsPage/ClientsPageCarousel.tsx b/client/src/components/ClientsPage/ClientsPageCarousel.tsx
index 44de474..9c6fc29 100644
--- a/client/src/components/ClientsPage/ClientsPageCarousel.tsx
+++ b/client/src/components/ClientsPage/ClientsPageCarousel.tsx
@@ -50,7 +50,7 @@ const ClientsPageCarousel = () => {
       <h1 className="font-bold text-[67px] text-center">
         Благодарственные письма
       </h1>
-      <div className="py-24">
+      <div className="py-24 select-none">
         <div className="flex h-[450px] w-[calc(100vw-20px)] overflow-hidden relative">
           <div
             className="flex transition-all duration-500 justify-center w-full"
diff --git a/client/src/components/ClientsPage/ZoomInLetterModal.tsx b/client/src/components/ClientsPage/ZoomInLetterModal.tsx
index 0376b57..e3e7558 100644
--- a/client/src/components/ClientsPage/ZoomInLetterModal.tsx
+++ b/client/src/components/ClientsPage/ZoomInLetterModal.tsx
@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from "react";
 import { Image } from "../../types";
-import CrossIcon from "../../icons/CrossIcon";
 import useStore from "../../store/store";
+import CrossIcon from "../../icons/CrossIcon";
 import ArrowCarouselIcon from "../../icons/ArrowCarouselIcon";
-import { useState } from "react";
+import ZoomInIcon from "../../icons/ZoomInIcon";
+import ZoomOutIcon from "../../icons/ZoomOutIcon";
 
 type ZoomInLetterModalProps = {
   images: Image[];
@@ -15,6 +17,19 @@ const ZoomInLetterModal = ({
 }: ZoomInLetterModalProps) => {
   const { setModal } = useStore();
   const [selectedImage, setSelectedImage] = useState(currentImage);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const currentImageRef = useRef<null | HTMLImageElement>(null);
+
+  useEffect(() => {
+    setIsZoomed(false);
+    if (!currentImageRef || !currentImageRef?.current) return;
+    currentImageRef.current.style.transform = ``;
+  }, [selectedImage]);
+
+  useEffect(() => {
+    if (!currentImageRef || !currentImageRef?.current || isZoomed) return;
+    currentImageRef.current.style.transform = ``;
+  }, [isZoomed]);
 
   const handleOnRightClick = () => {
     setSelectedImage((prev) => prev + 1);
@@ -28,8 +43,29 @@ const ZoomInLetterModal = ({
     setModal(null);
   };
 
+  const handleOnZoomSwitch = (
+    event: React.MouseEvent<HTMLImageElement, MouseEvent>
+  ) => {
+    if (!currentImageRef || !currentImageRef?.current) return;
+
+    setIsZoomed((prev) => !prev);
+    currentImageRef.current.style.transform = `scale(1.5) translate(-5vw, ${
+      200 - 300 * (event.clientY / window.innerHeight)
+    }px)`;
+  };
+
+  function handleOnMouseMove(
+    event: React.MouseEvent<HTMLImageElement, MouseEvent>
+  ): void {
+    if (!currentImageRef || !currentImageRef?.current || !isZoomed) return;
+
+    currentImageRef.current.style.transform = `scale(1.5) translate(-5vw, ${
+      200 - 300 * (event.clientY / window.innerHeight)
+    }px)`;
+  }
+
   return (
-    <div className="fixed w-screen h-screen bg-[#fff] z-30 flex justify-center items-center">
+    <div className="fixed w-screen h-screen bg-[#fff] z-30 flex justify-center items-center select-none">
       <div
         className="flex w-fit duration-300 transition-all"
         style={{
@@ -39,23 +75,45 @@ const ZoomInLetterModal = ({
         }}
       >
         {images.map((image) => {
+          const isCurrentImage = selectedImage === image.id;
+
           return (
-            <div key={image.id} className="h-screen w-screen">
-              <img
-                key={image.id}
-                src={image.image}
-                alt=""
-                className="h-full mx-auto"
-              />
-            </div>
+            <>
+              {isCurrentImage ? (
+                <div key={`${image.id}-current`} className="h-screen w-screen">
+                  <img
+                    ref={currentImageRef}
+                    onClick={handleOnZoomSwitch}
+                    onMouseMove={handleOnMouseMove}
+                    key={image.id}
+                    src={image.image}
+                    alt=""
+                    className={`h-full mx-auto ${
+                      isZoomed ? "cursor-zoom-out" : "cursor-zoom-in"
+                    }`}
+                  />
+                </div>
+              ) : (
+                <div key={image.id} className="h-screen w-screen">
+                  <img
+                    key={image.id}
+                    src={image.image}
+                    alt=""
+                    className={`h-full mx-auto`}
+                  />
+                </div>
+              )}
+            </>
           );
         })}
       </div>
-      <div
-        className="absolute top-2 right-2 z-30 cursor-pointer p-[10px]"
-        onClick={handleOnCloseModal}
-      >
-        <CrossIcon color="#000" />
+      <div className="absolute top-2 right-2 z-30 flex gap-6">
+        <div className="p-[10px] cursor-pointer" onClick={handleOnZoomSwitch}>
+          {!isZoomed ? <ZoomInIcon /> : <ZoomOutIcon />}
+        </div>
+        <div className="p-[10px] cursor-pointer" onClick={handleOnCloseModal}>
+          <CrossIcon color="#000" />
+        </div>
       </div>
       <div
         className="z-30 absolute top-1/2 right-2 p-[10px] cursor-pointer"
diff --git a/client/src/icons/CrossIcon.tsx b/client/src/icons/CrossIcon.tsx
index a8c4170..4f4525b 100644
--- a/client/src/icons/CrossIcon.tsx
+++ b/client/src/icons/CrossIcon.tsx
@@ -8,8 +8,8 @@ const CrossIcon = ({ color, className }: CrossIconProps) => {
     <svg
       className={`${className ? className : ""}`}
       role="presentation"
-      width="23px"
-      height="23px"
+      width="20"
+      height="20"
       viewBox="0 0 23 23"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/icons/ZoomInIcon.tsx b/client/src/icons/ZoomInIcon.tsx
new file mode 100644
index 0000000..1f13a20
--- /dev/null
+++ b/client/src/icons/ZoomInIcon.tsx
@@ -0,0 +1,37 @@
+const ZoomInIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.832 22L17.8592 17.0273"
+        stroke="#000000"
+        strokeWidth="2"
+        strokeLinecap="square"
+      ></path>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.58591 3.7511C0.917768 7.41924 0.917768 13.367 4.58591 17.0352C8.25405 20.7033 14.2019 20.7033 17.87 17.0352C21.5381 13.367 21.5381 7.41924 17.87 3.7511C14.2019 0.0829653 8.25405 0.0829653 4.58591 3.7511Z"
+        stroke="#000000"
+        strokeWidth="2"
+      ></path>
+      <path
+        d="M6.25781 10.3931H16.2035"
+        stroke="#000000"
+        strokeWidth="2"
+      ></path>
+      <path
+        d="M11.2305 15.3662V5.42053"
+        stroke="#000000"
+        strokeWidth="2"
+      ></path>
+    </svg>
+  );
+};
+
+export default ZoomInIcon;
diff --git a/client/src/icons/ZoomOutIcon.tsx b/client/src/icons/ZoomOutIcon.tsx
new file mode 100644
index 0000000..a95cef6
--- /dev/null
+++ b/client/src/icons/ZoomOutIcon.tsx
@@ -0,0 +1,32 @@
+const ZoomOutIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9961 22L17.0233 17.0273"
+        stroke="#000000"
+        strokeWidth="2"
+        strokeLinecap="square"
+      ></path>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.74997 3.7511C0.0818308 7.41924 0.0818308 13.367 3.74997 17.0352C7.41811 20.7033 13.3659 20.7033 17.0341 17.0352C20.7022 13.367 20.7022 7.41924 17.0341 3.7511C13.3659 0.0829653 7.41811 0.0829653 3.74997 3.7511Z"
+        stroke="#000000"
+        strokeWidth="2"
+      ></path>
+      <path
+        d="M5.41797 10.3931H15.3637"
+        stroke="#000000"
+        strokeWidth="2"
+      ></path>
+    </svg>
+  );
+};
+
+export default ZoomOutIcon;
diff --git a/client/src/pages/ClientsPage/ClientsPage.tsx b/client/src/pages/ClientsPage/ClientsPage.tsx
index cf6fe99..986c50b 100644
--- a/client/src/pages/ClientsPage/ClientsPage.tsx
+++ b/client/src/pages/ClientsPage/ClientsPage.tsx
@@ -3,7 +3,6 @@ import ClientsContainer from "../../components/ClientsPage/ClientsContainer";
 import ClientsPageCarousel from "../../components/ClientsPage/ClientsPageCarousel";
 
 const ClientsPage = () => {
-  console.log("Array.from(5)");
   return (
     <>
       <div>