Skip to content

Commit

Permalink
remove scroll to navigate feature from home page (#78)
Browse files Browse the repository at this point in the history
  • Loading branch information
@barbara-chaves
barbara-chaves authored Nov 18, 2024
1 parent 6b9574f commit 8c1cbf4
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 86 deletions.
34 changes: 13 additions & 21 deletions client/src/containers/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
import { useMap } from 'react-map-gl';

import Link from 'next/link';
import { useRouter } from 'next/navigation';

import { motion, useTransform } from 'framer-motion';
import { useAtomValue, useSetAtom } from 'jotai';

import { homeMarkerAtom } from '@/store/home';
import { mapScrollAtom } from '@/store/map';

import { useIsMobile } from '@/hooks/screen-size';
import { getThemeSize, useIsMobile, useMediaQuery } from '@/hooks/screen-size';

import { DEFAULT_MOBILE_ZOOM, DEFAULT_VIEW_STATE } from '@/components/map/constants';
import { Dialog, DialogContentHome } from '@/components/ui/dialog';
import ScrollExplanation from '@/components/ui/scroll-explanation';

import Header from '../header';

Expand All @@ -37,6 +35,7 @@ const Home = () => {
});

const isMobile = useIsMobile();
const isXl = useMediaQuery(`(min-width: ${getThemeSize('2xl')}px)`);

const spin = useCallback(() => {
if (!map) return;
Expand All @@ -48,23 +47,22 @@ const Home = () => {
map?.easeTo({
bearing: 0,
pitch: 0,
zoom: isMobile ? DEFAULT_MOBILE_ZOOM : DEFAULT_VIEW_STATE.zoom,
zoom: isMobile
? DEFAULT_MOBILE_ZOOM
: isXl
? DEFAULT_VIEW_STATE.zoom
: DEFAULT_VIEW_STATE.zoom - 0.5,
center: { lng: nextLng, lat },
duration: 500,
padding: {
left: !isMobile ? size.width * 0.45 : 0,
left: size.width * 0.45,
right: 0,
top: 0,
top: isMobile ? size.height * 0.8 : 0,
bottom: 0,
},
easing: (n) => n,
});
}, [isMobile, map, size.width]);

const router = useRouter();
useEffect(() => {
router.prefetch('/globe');
}, []);
}, [isMobile, isXl, map, size.height, size.width]);

useEffect(() => {
if (map) {
Expand Down Expand Up @@ -151,11 +149,12 @@ const Home = () => {
</p>
</div>
</div>
<div className="pointer-events-auto relative z-50 mt-6 hidden h-[124px] w-[124px] rounded-full bg-teal-500/50 p-2.5 transition-all duration-500 hover:p-0 sm:block">
<div className="pointer-events-auto relative z-50 mt-6 h-[124px] w-[124px] rounded-full bg-teal-500/50 p-2.5 transition-all duration-500 hover:p-0 sm:block">
<Link
onClick={() => map?.stop()}
className="font-bold uppercase tracking-wide"
href="/globe"
prefetch
>
<div className="flex h-full w-full items-center justify-center rounded-full bg-teal-500">
Explore
Expand All @@ -165,21 +164,14 @@ const Home = () => {
</div>
</div>

<div className="mx-auto mb-16 flex h-fit w-fit flex-col items-center justify-center gap-2 sm:hidden">
<ScrollExplanation />
<span className="bg-background/30 mx-auto rounded px-2 backdrop-blur-sm">
Scroll to explore
</span>
</div>

{/* Desktop orbiting satellites */}
<motion.div
initial="hidden"
animate="visible"
variants={variants}
transition={{ duration: 2, delay: 1, ease: 'easeIn' }}
style={{ width: w, height: '100%', right: w * -0.045, top: 0 }}
className="3xl:scale-100 absolute z-50 hidden max-h-screen scale-125 items-center overflow-hidden xl:flex xl:scale-110"
className="3xl:scale-100 absolute z-50 hidden max-h-screen scale-125 items-center overflow-hidden lg:flex xl:scale-110"
>
<div style={{ height: w }} className="w-full">
<div className="flex h-full rotate-45 items-end justify-center rounded-full border border-dashed border-slate-600 p-[50px] xl:rotate-[55deg] xl:p-[70px]">
Expand Down
91 changes: 27 additions & 64 deletions client/src/containers/map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), {

export default function MapContainer() {
const { id, initialViewState, minZoom, maxZoom } = DEFAULT_PROPS;
const router = useRouter();
const { [id]: map } = useMap();

const [markers, setMarkers] = useState<(GeoJSON.Feature<GeoJSON.Point> | null)[]>([]);
Expand All @@ -52,7 +51,6 @@ export default function MapContainer() {
const pathname = usePathname();

const isStoriesPage = useMemo(() => pathname.includes('stories'), [pathname]);
const isLandingPage = useMemo(() => pathname.includes('home'), [pathname]);
const isGlobePage = useMemo(() => pathname.includes('globe'), [pathname]);

const tmpBounds: CustomMapProps['bounds'] = useMemo(() => {
Expand Down Expand Up @@ -121,76 +119,41 @@ export default function MapContainer() {
}
}, [map, initialViewState, tmpBbox, isMobile]);

const targetRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({
target: targetRef,
axis: 'y',
offset: ['start start', 'end end'],
layoutEffect: false,
smooth: 0.5,
container: containerRef,
});

const setMapScroll = useSetAtom(mapScrollAtom);

useMotionValueEvent(scrollYProgress, 'change', (v) => {
setMapScroll(scrollYProgress);
if (isLandingPage && isMobile && v > 0.95) {
router.push('/globe');
}
});

const mapInteractionEnabled = useMemo(() => isGlobePage, [isGlobePage]);

return (
<div
className={cn(
'absolute left-0 top-0 h-screen w-screen overflow-hidden',
isLandingPage && 'h-[150vh] overflow-y-auto sm:h-screen'
)}
ref={containerRef}
className={cn('bg-map-background absolute left-0 top-0 h-screen w-screen overflow-hidden')}
>
<div
ref={targetRef}
<Map
id={id}
initialViewState={{
...initialViewState,
...(bbox && {
bounds: bbox as LngLatBoundsLike,
}),
}}
projection={{
name: 'globe',
}}
minZoom={minZoom}
maxZoom={maxZoom}
bounds={tmpBounds}
mapStyle={MAPBOX_STYLES.default}
interactiveLayerIds={layersInteractiveIds}
onMouseMove={handleMouseMove}
onMapViewStateChange={handleMapViewStateChange}
className={cn(
'bg-map-background left-0 top-0 w-screen',
isLandingPage
? 'sticky top-[120vh] h-[200vh] sm:fixed sm:top-0 sm:h-screen'
: 'fixed h-screen'
mapInteractionEnabled
? 'pointer-events-auto cursor-pointer'
: 'pointer-events-none cursor-default'
)}
>
<Map
id={id}
initialViewState={{
...initialViewState,
...(bbox && {
bounds: bbox as LngLatBoundsLike,
}),
}}
projection={{
name: 'globe',
}}
minZoom={minZoom}
maxZoom={maxZoom}
bounds={tmpBounds}
mapStyle={MAPBOX_STYLES.default}
interactiveLayerIds={layersInteractiveIds}
onMouseMove={handleMouseMove}
onMapViewStateChange={handleMapViewStateChange}
className={cn(
mapInteractionEnabled
? 'pointer-events-auto cursor-pointer'
: 'pointer-events-none cursor-default'
)}
>
<LayerManager />
<GlobeMarkers />
<SelectedStoriesMarker markers={markers} onCloseMarker={() => setMarkers([])} />
{isStoriesPage && <StoryMarkers />}
</Map>
</div>
<LayerManager />
<GlobeMarkers />
<SelectedStoriesMarker markers={markers} onCloseMarker={() => setMarkers([])} />
{isStoriesPage && <StoryMarkers />}
</Map>
</div>
);
}
2 changes: 1 addition & 1 deletion client/src/hooks/screen-size/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import tailwindConfig from '@/../tailwind.config';

const { theme } = resolveConfig(tailwindConfig);

const getThemeSize = (size: string) => {
export const getThemeSize = (size: string) => {
if (theme?.screens && size in theme?.screens) {
const screenSize = (theme?.screens?.[size as keyof typeof theme.screens] as string)?.replace(
'px',
Expand Down

0 comments on commit 8c1cbf4

Please sign in to comment.