zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
zojgame
2024-07-01 10:48:13 +05:00
parent 7bf6c6ec84
commit 87d78f3f78
2 changed files with 102 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+6 -1
View File
@@ -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
+96 -27
View File
@@ -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 = () => {
if (!currentHoveredFloor && !currentHoveredApartments) return;
setSelectedApartments(currentHoveredApartments);
setCurrentFloor(currentHoveredFloor);
if (!isMobile) {
setIsFloorSidebar(true);
setIsSkygardenSidebar(false);
setIsSidebar(true);
const handleOnFloorClick = (e: MouseEvent | any) => {
const isFloorClicked = Boolean(e.currentTarget.dataset.id);
if (isFloorClicked) {
// detect mouse pos
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
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);
// setModal(<WingFloorModal />);
setIsDescriptionFloorMobile(false);
}
};
@@ -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 screenHeight = window.innerHeight;
// >1072
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
const isFloorClicked = Boolean(e.target.dataset.id);
if (isFloorClicked) {
// detect mouse pos
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
} else {
const _top = screenHeight / 2.5;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// 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);
}
}
}
@@ -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}
/>