init

client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx

@@ -7,16 +7,20 @@ import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
 interface MobileFloorDescriptionProps {
   descriptionFloor: IDesctiptionFloor | null;
   floorApartments: IAparmentRes[];
+  onClick: (
+    e: React.MouseEvent<Element, React.MouseEvent<Element, MouseEvent>>
+  ) => void;
 }
 
 const MobileFloorDescription = ({
   descriptionFloor,
   floorApartments,
+  onClick,
 }: MobileFloorDescriptionProps) => {
   return (
     <>
       <div
-        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px]`}
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px] pointer-events-auto`}
       >
         <div className="relative">
           <div className="flex justify-between border-b pb-4">
@@ -107,6 +111,7 @@ const MobileFloorDescription = ({
               text="Explore"
               icon={<RightArrowSliderIcon />}
               iconPos="right"
+              onClick={onClick}
             />
           </div>
           <div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>

client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx

@@ -25,6 +25,7 @@ import WingSignatures from "./WingSignatures";
 import { isMobile } from "react-device-detect";
 import FloorsHighlighting from "./FloorsHighlighting";
 import MobileFloorDescription from "./MobileFloorDescription";
+import WingFloorModal from "../../modals/mobile/WingFloorModal";
 
 const skyGardenFloor = 22;
 
@@ -95,17 +96,49 @@ const SequenceWing = () => {
     setIsWrapperHovered(false);
   };
 
-  const handleOnFloorClick = () => {
+  const handleOnFloorClick = (e: MouseEvent | any) => {
-    if (!currentHoveredFloor && !currentHoveredApartments) return;
+    const isFloorClicked = Boolean(e.currentTarget.dataset.id);
-    setSelectedApartments(currentHoveredApartments);
+    if (isFloorClicked) {
-    setCurrentFloor(currentHoveredFloor);
+      // detect mouse pos
-    if (!isMobile) {
+      const screenWidth = window.innerWidth;
-      setIsFloorSidebar(true);
+      const screenHeight = window.innerHeight;
-      setIsSkygardenSidebar(false);
+      // >1072
-      setIsSidebar(true);
+      if (screenWidth > laptopWidth) {
+        const _top = screenWidth / 2 - screenHeight / 2;
+        setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+      } else {
+        // 640-1072
+        if (screenWidth > mobileWidht) {
+          const _top = screenHeight / 4;
+          const _left = laptopWidth - screenWidth;
+          setMousePos([
+            e.clientX - 440 + _left,
+            e.clientY + Math.abs(_top) + 20,
+          ]);
+          // <640
+        } else {
+          const _top = screenHeight / 2.5;
+          const _left = laptopWidth - screenWidth;
+          setMousePos([
+            e.clientX - 440 + _left,
+            e.clientY + Math.abs(_top) + 20,
+          ]);
+        }
+      }
+
+      //detect currentFloor, current sidebar and apartment on floor
+      if (!currentHoveredFloor && !currentHoveredApartments) return;
+      setSelectedApartments(currentHoveredApartments);
+      setCurrentFloor(currentHoveredFloor);
+      if (!isMobile) {
+        setIsFloorSidebar(true);
+        setIsSkygardenSidebar(false);
+        setIsSidebar(true);
+      } else {
+        setIsDescriptionFloorMobile(true);
+      }
     } else {
-      setIsDescriptionFloorMobile(true);
+      setIsDescriptionFloorMobile(false);
-      // setModal(<WingFloorModal />);
     }
   };
 
@@ -122,27 +155,54 @@ const SequenceWing = () => {
   function handleMouseMove(
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) {
-    setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
+    const isFloorClicked = Boolean(e.target.dataset.id);
+    if (isFloorClicked) {
+      setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
+    } else {
+      setIsDescriptionFloorMobile(false);
+    }
   }
 
   function handleOnMouseDown(e: MouseEvent | any) {
-    const screenWidth = window.innerWidth;
+    const isFloorClicked = Boolean(e.target.dataset.id);
-    const screenHeight = window.innerHeight;
+    if (isFloorClicked) {
-    // >1072
+      // detect mouse pos
-    if (screenWidth > laptopWidth) {
+      const screenWidth = window.innerWidth;
-      const _top = screenWidth / 2 - screenHeight / 2;
+      const screenHeight = window.innerHeight;
-      setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+      // >1072
-    } else {
+      if (screenWidth > laptopWidth) {
-      // 640-1072
+        const _top = screenWidth / 2 - screenHeight / 2;
-      if (screenWidth > mobileWidht) {
+        setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
-        const _top = screenHeight / 4;
-        const _left = laptopWidth - screenWidth;
-        setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
-        // <640
       } else {
-        const _top = screenHeight / 2.5;
+        // 640-1072
-        const _left = laptopWidth - screenWidth;
+        if (screenWidth > mobileWidht) {
-        setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
+          const _top = screenHeight / 4;
+          const _left = laptopWidth - screenWidth;
+          setMousePos([
+            e.clientX - 440 + _left,
+            e.clientY + Math.abs(_top) + 20,
+          ]);
+          // <640
+        } else {
+          const _top = screenHeight / 2.5;
+          const _left = laptopWidth - screenWidth;
+          setMousePos([
+            e.clientX - 440 + _left,
+            e.clientY + Math.abs(_top) + 20,
+          ]);
+        }
+      }
+
+      //detect currentFloor, current sidebar and apartment on floor
+      if (!currentHoveredFloor && !currentHoveredApartments) return;
+      setSelectedApartments(currentHoveredApartments);
+      setCurrentFloor(currentHoveredFloor);
+      if (!isMobile) {
+        setIsFloorSidebar(true);
+        setIsSkygardenSidebar(false);
+        setIsSidebar(true);
+      } else {
+        setIsDescriptionFloorMobile(true);
       }
     }
   }
@@ -173,6 +233,14 @@ const SequenceWing = () => {
     }
   }
 
+  const handleOnExploreClick = (
+    e: MouseEvent<Element, MouseEvent<Element, MouseEvent>>
+  ) => {
+    e.stopPropagation();
+    setModal(<WingFloorModal />);
+    setIsDescriptionFloorMobile(false);
+  };
+
   useEffect(() => {
     handleResize();
     window.addEventListener("resize", handleResize);
@@ -336,6 +404,7 @@ const SequenceWing = () => {
           }}
         >
           <MobileFloorDescription
+            onClick={handleOnExploreClick}
             descriptionFloor={currentHoveredFloor}
             floorApartments={currentHoveredApartments}
           />