Fix scrolling past globe on mobile

Vizzuality · Oct 24, 2024 · 39051e7 · 39051e7
1 parent 35a7303
commit 39051e7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/src/components/globe-map/controls.tsx b/src/components/globe-map/controls.tsx
@@ -5,7 +5,8 @@ import { convertLatLonToGlobalPosition } from "@/lib/globe-utils";
 import type { MarkerType } from "./marker";
 import { Group } from "three";
 import { useIsMobile } from "@/lib/hooks";
-export const Controls = ({ marker, active = false, enabled = false, groupRef, resetSelectedMarker, setEnabled, globePhase }: {
+import { useInView } from "framer-motion";
+export const Controls = ({ marker, active = false, enabled = false, groupRef, resetSelectedMarker, setEnabled, globePhase, canvasRef }: {
   marker: MarkerType | undefined
   // Active is used to determine if the globe controls are in a phase that could be enabled even if is temporarily disabled
   active: boolean
@@ -14,7 +15,8 @@ export const Controls = ({ marker, active = false, enabled = false, groupRef, re
   setEnabled: (enabled: boolean) => void
   groupRef: React.MutableRefObject<Group>
   resetSelectedMarker: () => void,
-  globePhase: number
+  globePhase: number,
+  canvasRef: React.RefObject<HTMLCanvasElement>
 }) => {
   const isMobile = useIsMobile();
   const cameraControlsRef = useRef<CameraControls>(null!);
@@ -61,9 +63,22 @@ export const Controls = ({ marker, active = false, enabled = false, groupRef, re
       cameraControlsRef.current.setPosition(0, 1, 4.9, true).then(() => {
         setResettingPosition(false);
         setEnabled(false);
+        if (globePhase === 2) {
+          // Scrolling past the globe
+          resetSelectedMarker();
+        }
       });
     }
   }, [enabled, marker, active, resettingPosition]);
+
+  const isInView = useInView(canvasRef);
+
+  useEffect(() => {
+    if (!isInView && globePhase === 2 && marker !== undefined) {
+      setResettingPosition(true);
+    }
+  }), [isInView];
+
   return (
     <CameraControls
       ref={cameraControlsRef}

diff --git a/src/components/globe-map/index.tsx b/src/components/globe-map/index.tsx
@@ -3,9 +3,7 @@ import { useState, useRef, useEffect, CSSProperties, useCallback } from 'react';
 import { Canvas } from '@react-three/fiber'
 import { Group } from "three";
 import { Controls } from './controls';
-
 import { markers } from './data';
-
 import GlobeGroup from './globe-group';
 import { useGesture } from '@use-gesture/react';
 
@@ -74,7 +72,7 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
           resize={{ scroll: false, debounce: { scroll: 0, resize: 0 } }}
           {...bind()}
         >
-          <Controls marker={marker} active={hasMarkers} enabled={enabled} setEnabled={setEnabled} groupRef={groupRef} resetSelectedMarker={resetSelectedMarker} globePhase={globePhase} />
+          <Controls canvasRef={canvasRef} marker={marker} active={hasMarkers} enabled={enabled} setEnabled={setEnabled} groupRef={groupRef} resetSelectedMarker={resetSelectedMarker} globePhase={globePhase} />
           <GlobeGroup
             groupRef={groupRef}
             hasMarkers={hasMarkers} markers={markers} selectedMarker={selectedMarker} setSelectedMarker={setSelectedMarker} rotate={rotate}

diff --git a/src/components/globe-map/popup.tsx b/src/components/globe-map/popup.tsx
@@ -17,7 +17,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
     "flex justify-center globe-popup",
     {
       "relative -mt-[140px] -ml-[140px] xl:-ml-[140px]": !isMobile,
-      "fixed top-0 xs:left-[calc(50%-250px)] sm:left-[calc(50%-325px)] z-50 w-full h-full items-center justify-center xs:max-w-[500px] sm:max-w-[650px]": isMobile
+      "fixed top-0 xs:left-[calc(50%-250px)] sm:left-[calc(50%-325px)] z-50 px-4 w-full h-full items-center justify-center xs:max-w-[500px] sm:max-w-[650px]": isMobile
     })}>
     <div className='relative w-full xl:w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
       <div className="gap-6 flex">
@@ -29,7 +29,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
         <div className="flex-col gap-4 flex">
           <div className="flex-col justify-start items-start gap-2 inline-flex">
             <div className='flex justify-between w-full'>
-              <div className="text-base leading-relaxed">{title}</div>
+              <div className="text-sm xl:text-base leading-relaxed">{title}</div>
               <div className="rounded-sm items-center gap-0.5 flex">
                 <button onClick={() => setSelectedMarker(index - 1 < 0 ? (popupContent.length - 1) : index - 1)}>
                   <div className='sr-only'>Previous marker</div>