LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +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,
city: 'Ashburn',
code: 'ASH',
available: true,
offsetX: 10,
offsetY: -10
available: true
},
{
lat: 33.75,
@@ -562,9 +560,7 @@ export const pins = {
lng: -74.01,
city: 'New York',
code: 'NYC',
available: true,
offsetX: 10,
offsetY: -10
available: true
},
{
lat: 50.11,
@@ -585,42 +581,42 @@ export const pins = {
lng: 103.82,
city: 'Singapore',
code: 'SIN',
available: 'Q4 2025'
date: 'Q4 2025'
},
{
lat: 37.77,
lng: -122.42,
city: 'San Francisco',
code: 'SFO',
available: 'Q4 2025'
date: 'Q4 2025'
},
{
lat: 12.97,
lng: 77.59,
city: 'Bangalore',
code: 'BLR',
available: false
date: 'Planned'
},
{
lat: 52.37,
lng: 4.9,
city: 'Amsterdam',
code: 'AMS',
available: false
date: 'Planned'
},
{
lat: 51.51,
lng: -0.13,
city: 'London',
code: 'LON',
available: false
date: 'Planned'
},
{
lat: 43.65,
lng: -79.38,
city: 'Toronto',
code: 'TOR',
available: false
date: 'Planned'
}
],
regions: [
@@ -629,9 +625,7 @@ export const pins = {
lng: -74.01,
city: 'New York',
code: 'NYC',
available: true,
offsetX: 10,
offsetY: -10
available: true
},
{
lat: 50.11,
@@ -652,42 +646,42 @@ export const pins = {
lng: 103.82,
city: 'Singapore',
code: 'SIN',
available: 'Q4 2025'
date: 'Q4 2025'
},
{
lat: 37.77,
lng: -122.42,
city: 'San Francisco',
code: 'SFO',
available: 'Q4 2025'
date: 'Q4 2025'
},
{
lat: 12.97,
lng: 77.59,
city: 'Bangalore',
code: 'BLR',
available: false
date: 'Planned'
},
{
lat: 52.37,
lng: 4.9,
city: 'Amsterdam',
code: 'AMS',
available: false
date: 'Planned'
},
{
lat: 51.51,
lng: -0.13,
city: 'London',
code: 'LON',
available: false
date: 'Planned'
},
{
lat: 43.65,
lng: -79.38,
city: 'Toronto',
code: 'TOR',
available: false
date: 'Planned'
}
]
};

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

@@ -4,14 +4,21 @@
let tooltipData = $state<{
city: string | null;
code: string | null;
available: boolean | null;
available?: boolean | null;
date?: string | null;
}>({
city: 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) {
clearTimeout(timeoutId);
timeoutId = null;
@@ -20,7 +27,8 @@
tooltipData = {
city,
code,
available
available,
date
};
};
@@ -37,7 +45,8 @@
tooltipData = {
city: null,
code: null,
available: null
available: null,
date: null
};
timeoutId = null;
}, delay);
@@ -45,7 +54,8 @@
tooltipData = {
city: null,
code: null,
available: null
available: null,
date: null
};
}
};
@@ -84,7 +94,7 @@
({tooltipData.code})
</span>
{/key}
{#if typeof tooltipData.available === 'boolean' && tooltipData.available}
{#if tooltipData.available}
<div
class={classNames(
'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>
</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}
<div
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>
{/if}
</div>

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

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