LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tooltips

Browse Source
This commit is contained in:
Jesse Winton
2025-06-02 15:01:34 -04:00
parent 5a3d43eb02
commit ea6ef99dc1
3 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/components/appwrite-network/data/pins.ts
View File

@@ -5,9 +5,7 @@ export const pins = {
lng: -77.49, lng: -77.49,
city: 'Ashburn', city: 'Ashburn',
code: 'ASH', code: 'ASH',
available: true, available: true
offsetX: 10,
offsetY: -10
}, },
{ {
lat: 33.75, lat: 33.75,
@@ -562,9 +560,7 @@ export const pins = {
lng: -74.01, lng: -74.01,
city: 'New York', city: 'New York',
code: 'NYC', code: 'NYC',
available: true, available: true
offsetX: 10,
offsetY: -10
}, },
{ {
lat: 50.11, lat: 50.11,
@@ -585,42 +581,42 @@ export const pins = {
lng: 103.82, lng: 103.82,
city: 'Singapore', city: 'Singapore',
code: 'SIN', code: 'SIN',
available: 'Q4 2025' date: 'Q4 2025'
}, },
{ {
lat: 37.77, lat: 37.77,
lng: -122.42, lng: -122.42,
city: 'San Francisco', city: 'San Francisco',
code: 'SFO', code: 'SFO',
available: 'Q4 2025' date: 'Q4 2025'
}, },
{ {
lat: 12.97, lat: 12.97,
lng: 77.59, lng: 77.59,
city: 'Bangalore', city: 'Bangalore',
code: 'BLR', code: 'BLR',
available: false date: 'Planned'
}, },
{ {
lat: 52.37, lat: 52.37,
lng: 4.9, lng: 4.9,
city: 'Amsterdam', city: 'Amsterdam',
code: 'AMS', code: 'AMS',
available: false date: 'Planned'
}, },
{ {
lat: 51.51, lat: 51.51,
lng: -0.13, lng: -0.13,
city: 'London', city: 'London',
code: 'LON', code: 'LON',
available: false date: 'Planned'
}, },
{ {
lat: 43.65, lat: 43.65,
lng: -79.38, lng: -79.38,
city: 'Toronto', city: 'Toronto',
code: 'TOR', code: 'TOR',
available: false date: 'Planned'
} }
], ],
regions: [ regions: [
@@ -629,9 +625,7 @@ export const pins = {
lng: -74.01, lng: -74.01,
city: 'New York', city: 'New York',
code: 'NYC', code: 'NYC',
available: true, available: true
offsetX: 10,
offsetY: -10
}, },
{ {
lat: 50.11, lat: 50.11,
@@ -652,42 +646,42 @@ export const pins = {
lng: 103.82, lng: 103.82,
city: 'Singapore', city: 'Singapore',
code: 'SIN', code: 'SIN',
available: 'Q4 2025' date: 'Q4 2025'
}, },
{ {
lat: 37.77, lat: 37.77,
lng: -122.42, lng: -122.42,
city: 'San Francisco', city: 'San Francisco',
code: 'SFO', code: 'SFO',
available: 'Q4 2025' date: 'Q4 2025'
}, },
{ {
lat: 12.97, lat: 12.97,
lng: 77.59, lng: 77.59,
city: 'Bangalore', city: 'Bangalore',
code: 'BLR', code: 'BLR',
available: false date: 'Planned'
}, },
{ {
lat: 52.37, lat: 52.37,
lng: 4.9, lng: 4.9,
city: 'Amsterdam', city: 'Amsterdam',
code: 'AMS', code: 'AMS',
available: false date: 'Planned'
}, },
{ {
lat: 51.51, lat: 51.51,
lng: -0.13, lng: -0.13,
city: 'London', city: 'London',
code: 'LON', code: 'LON',
available: false date: 'Planned'
}, },
{ {
lat: 43.65, lat: 43.65,
lng: -79.38, lng: -79.38,
city: 'Toronto', city: 'Toronto',
code: 'TOR', code: 'TOR',
available: false date: 'Planned'
} }
] ]
}; };

38
src/lib/components/appwrite-network/map-tooltip.svelte
View File

@@ -4,14 +4,21 @@
let tooltipData = $state<{ let tooltipData = $state<{
city: string | null; city: string | null;
code: string | null; code: string | null;
available: boolean | null; available?: boolean | null;
date?: string | null;
}>({ }>({
city: null, city: null,
code: null, code: null,
available: null available: null,
date: null
}); });
export const handleSetActiveTooltip = (city: string, code: string, available: boolean) => { export const handleSetActiveTooltip = (
city: string,
code: string,
available?: boolean,
date?: string
) => {
if (timeoutId) { if (timeoutId) {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = null; timeoutId = null;
@@ -20,7 +27,8 @@
tooltipData = { tooltipData = {
city, city,
code, code,
available available,
date
}; };
}; };
@@ -37,7 +45,8 @@
tooltipData = { tooltipData = {
city: null, city: null,
code: null, code: null,
available: null available: null,
date: null
}; };
timeoutId = null; timeoutId = null;
}, delay); }, delay);
@@ -45,7 +54,8 @@
tooltipData = { tooltipData = {
city: null, city: null,
code: null, code: null,
available: null available: null,
date: null
}; };
} }
}; };
@@ -84,7 +94,7 @@
({tooltipData.code}) ({tooltipData.code})
</span> </span>
{/key} {/key}
{#if typeof tooltipData.available === 'boolean' && tooltipData.available} {#if tooltipData.available}
<div <div
class={classNames( class={classNames(
'text-caption flex h-5 items-center justify-center place-self-start rounded-md p-1 text-center', 'text-caption flex h-5 items-center justify-center place-self-start rounded-md p-1 text-center',
@@ -96,18 +106,6 @@
> >
<span class="text-micro -tracking-tight">Available now</span> <span class="text-micro -tracking-tight">Available now</span>
</div> </div>
{:else if typeof tooltipData.available === 'boolean' && !tooltipData.available}
<div
class={classNames(
'text-caption text-primary flex h-5 items-center justify-center place-self-start rounded-md bg-black/6 p-1 text-center',
{
'text-primary bg-black/6': theme === 'light',
'text-primary bg-white/6': theme === 'dark'
}
)}
>
<span class="text-micro -tracking-tight">Planned</span>
</div>
{:else} {:else}
<div <div
class={classNames( class={classNames(
@@ -118,7 +116,7 @@
} }
)} )}
> >
<span class="text-micro -tracking-tight">{tooltipData.available}</span> <span class="text-micro -tracking-tight">{tooltipData.date}</span>
</div> </div>
{/if} {/if}
</div> </div>

20
src/lib/components/appwrite-network/map.svelte
View File

@@ -9,8 +9,6 @@
handleResetActiveTooltip handleResetActiveTooltip
} from './map-tooltip.svelte'; } from './map-tooltip.svelte';
import { createMap } from 'svg-dotted-map'; import { createMap } from 'svg-dotted-map';
import { classNames } from '$lib/utils/classnames';
import Icon from '../ui/icon';
let activeSegment = $state<string>('pop-locations'); let activeSegment = $state<string>('pop-locations');
let activeMarkers = $derived(pins[activeSegment as PinSegment]); let activeMarkers = $derived(pins[activeSegment as PinSegment]);
@@ -69,7 +67,9 @@
}); });
const markers = $derived( const markers = $derived(
addMarkers<{ city: string; code: string; available: boolean }>(activeMarkers) addMarkers<{ city: string; code: string; available?: boolean; date?: string }>(
activeMarkers
)
); );
type Props = { type Props = {
@@ -132,9 +132,19 @@
role="tooltip" role="tooltip"
class="animate-fade-in outline-none" class="animate-fade-in outline-none"
onmouseover={() => onmouseover={() =>
handleSetActiveTooltip(marker.city, marker.code, marker.available)} handleSetActiveTooltip(
marker.city,
marker.code,
marker.available,
marker.date
)}
onfocus={() => onfocus={() =>
handleSetActiveTooltip(marker.city, marker.code, marker.available)} handleSetActiveTooltip(
marker.city,
marker.code,
marker.available,
marker.date
)}
onblur={() => handleResetActiveTooltip()} onblur={() => handleResetActiveTooltip()}
onmouseout={() => handleResetActiveTooltip()} onmouseout={() => handleResetActiveTooltip()}
data-region={slugify(marker.city)} data-region={slugify(marker.city)}