From 8e278fadaf0d8a735e259d4d6c59ade581150692 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 11 Nov 2023 00:04:17 -0800 Subject: map animation and list --- src/components/LocationsMap.svelte | 147 +++++++++++++++++++++++++++++++++---- 1 file changed, 131 insertions(+), 16 deletions(-) (limited to 'src/components/LocationsMap.svelte') diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 7876659a..edd20632 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -2,6 +2,7 @@ import { onMount, onDestroy } from 'svelte'; import { browser } from '$app/environment'; import html2canvas from 'html2canvas'; + import { Icon } from '$comp'; import 'maplibre-gl/dist/maplibre-gl.css'; @@ -10,6 +11,71 @@ let mapContainer; let markers = []; + let currentIndex = -1; + let timeout; + + function select(m) { + stopFlying(); + currentIndex = inview.indexOf(m); + flyToMarker(m); + } + + async function flyToMarker(marker) { + marker.getElement().click(); + + map.flyTo({ + zoom: 14, + center: marker.getLngLat(), + essential: true, + easing: function (t) { + return 1 - Math.pow(1 - t, 3); + }, + duration: 5000 + }); + + await new Promise((r) => setTimeout(r, 5000)); + + if (!timeout) return; + + map.flyTo({ + zoom: 10.5, + center: marker.getLngLat(), + essential: true, + easing: function (t) { + return 1 - Math.pow(1 - t, 3); + }, + duration: 2000 + }); + } + + let toggle = () => { + if (timeout) stopFlying(); + else startFlying(); + }; + + let currentPopup; + function startFlying() { + currentIndex++; + + for (let p in popups) popups[p].remove(); + if (currentIndex >= inview.length) currentIndex = 0; + flyToMarker(inview[currentIndex]); + + timeout = setTimeout(startFlying, 7000); + } + + function stopFlying() { + if (!timeout) return; + timeout = clearTimeout(timeout); + + if (currentPopup) { + currentPopup.remove(); + } + + map.jumpTo({ center: map.getCenter(), zoom: map.getZoom() }); + map.off('moveend'); // Remove moveend listener if set + } + let checkAddress = (location) => { if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) { return `${ @@ -24,23 +90,24 @@ } }; + let inview = []; + function updateLabelVisibility() { + inview = []; if (!map) return; let zoom = map.getZoom(); let bounds = map.getBounds(); for (let marker of markers) { let isInView = bounds.contains(marker.getLngLat()); - let popup = marker.getPopup(); let { tags } = marker; - if (zoom > 13 && isInView) { - popup.setHTML(`${tags.name}`).addTo(map); - } else { - popup.remove(); - popup.setHTML(html(tags)); + if (isInView) { + inview.push(marker); } } + + inview = inview.sort((a, b) => a.tags.name.localeCompare(b.tags.name)); } let html = (tags) => `${ @@ -53,10 +120,13 @@ ${ tags && tags.website - ? `${tags.website}` + ? `${tags.website}` : '' }`; + let popups = {}; + let counter = 0; + onMount(() => { if (browser) { import('maplibre-gl').then(({ default: maplibre }) => { @@ -82,10 +152,16 @@ .setPopup(new maplibre.Popup().setHTML(html(tags))) .addTo(map); + marker.id = counter++; + marker.getElement().addEventListener('click', () => { let h = html(marker.tags); - let popup = marker.getPopup(); - popup.setHTML(h); + let p = marker.getPopup(); + popups[marker.id] = p; + p.setHTML(h); + p.on('close', () => { + delete popups[marker.id]; + }); }); marker.tags = tags; @@ -93,18 +169,31 @@ markers.push(marker); }); - // updateLabelVisibility(); - // map.on('moveend', updateLabelVisibility); - // map.on('zoomend', updateLabelVisibility); + updateLabelVisibility(); + + let observer = new IntersectionObserver( + (entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) startFlying(); + else stopFlying(); + }); + }, + { threshold: 0.5 } + ); + + observer.observe(mapContainer); }); + + map.on('mousedown', stopFlying); + map.on('touchstart', stopFlying); + map.on('wheel', stopFlying); + map.on('dragstart', stopFlying); }); } }); onDestroy(() => { if (map) { - // map.off('moveend', updateLabelVisibility); - // map.off('zoomend', updateLabelVisibility); map.remove(); } }); @@ -113,12 +202,37 @@
+
+ + +
+ {#each inview as m} + + {/each} +
+
+ + {inview.length}
-- cgit v1.2.3 From aa25ec9c28110ce32aa6797cf229755a9fde055a Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 11 Nov 2023 08:39:29 -0800 Subject: map fullscreen button --- src/components/LocationsMap.svelte | 84 ++++++++++++++++++++++++++++++-------- static/icons/full.svg | 7 ++++ 2 files changed, 74 insertions(+), 17 deletions(-) create mode 100644 static/icons/full.svg (limited to 'src/components/LocationsMap.svelte') diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index edd20632..3904fffa 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -8,12 +8,44 @@ export let locations; let map; - let mapContainer; + let mapContainer, mapWrapper; let markers = []; let currentIndex = -1; let timeout; + let full = () => { + if (!document.fullscreenElement) { + if (mapWrapper.requestFullscreen) { + mapWrapper.requestFullscreen(); + } else if (mapWrapper.mozRequestFullScreen) { + /* Firefox */ + mapWrapper.mozRequestFullScreen(); + } else if (mapWrapper.webkitRequestFullscreen) { + /* Chrome, Safari & Opera */ + mapWrapper.webkitRequestFullscreen(); + } else if (mapWrapper.msRequestFullscreen) { + /* IE/Edge */ + mapWrapper.msRequestFullscreen(); + } + + map.resize(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + /* Firefox */ + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + /* Chrome, Safari and Opera */ + document.webkitExitFullscreen(); + } else if (document.msExitFullscreen) { + /* IE/Edge */ + document.msExitFullscreen(); + } + } + }; + function select(m) { stopFlying(); currentIndex = inview.indexOf(m); @@ -188,6 +220,18 @@ map.on('touchstart', stopFlying); map.on('wheel', stopFlying); map.on('dragstart', stopFlying); + + document.addEventListener('fullscreenchange', onFullScreenChange, false); + document.addEventListener('webkitfullscreenchange', onFullScreenChange, false); + document.addEventListener('mozfullscreenchange', onFullScreenChange, false); + document.addEventListener('MSFullscreenChange', onFullScreenChange, false); + + function onFullScreenChange() { + console.log("resizing") + if (map) { + map.resize(); // This will adjust the map size to fit the new container size + } + } }); } }); @@ -200,21 +244,23 @@
-
-
+
+
- - -
+
+ + +
+ +
{#each inview as m}
- - {inview.length}
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte new file mode 100644 index 00000000..e0cec12e --- /dev/null +++ b/src/components/Popup.svelte @@ -0,0 +1,40 @@ + + +{#if tags} + {tags.name} + + {addr(tags)} + + {#if tags.phone} + {tags.phone} + {/if} + + {#if tags.website} + {tags.website} + {/if} + + {#if tags.user} + +
+ +
+ {tags.user.username} +
+
+ + {/if} + +{/if} diff --git a/src/components/index.js b/src/components/index.js index 1853e7c9..53838581 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ +export { default as Popup } from './Popup.svelte'; export { default as Code } from './Code.svelte'; export { default as Slider } from './Slider.svelte'; export { default as Pinpad } from './Pinpad.svelte'; -- cgit v1.2.3 From 88a466fe9863919e8f5d10d117b561f91bb2964e Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 17 Nov 2023 10:18:24 -0800 Subject: map styles --- src/components/LocationsMap.svelte | 28 +++++++++++++--------------- src/routes/map/+page.svelte | 2 +- 2 files changed, 14 insertions(+), 16 deletions(-) (limited to 'src/components/LocationsMap.svelte') diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index ebbf8df4..07669a42 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -158,8 +158,6 @@ props: { tags } }); - if (tags.name?.startsWith("Cord")) console.log(location) - let marker = new maplibre.Marker({ color: '#F7931A' }) .setLngLat([lon, lat]) .setPopup(new maplibre.Popup().setDOMContent(popupContainer)) @@ -214,8 +212,8 @@ onDestroy(() => map && map.remove()); -
-
+
+
@@ -230,19 +228,19 @@
- -
- {#each inview as m} - - {/each} -
+ +
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte index 1f6a2cf6..9c48b76b 100644 --- a/src/components/Popup.svelte +++ b/src/components/Popup.svelte @@ -1,4 +1,5 @@ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2cd0c473..32d31fa8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,9 +1,11 @@ @@ -11,7 +13,7 @@ - + @@ -19,7 +21,7 @@ - + @@ -28,7 +30,7 @@ {#if !$loading} - + {/if} diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index b258a0e8..3955a42f 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -1,29 +1,31 @@ -
- {user.username} -
+
+ {user.username} +
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index 0e4f2ec2..92714f98 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -1,34 +1,34 @@ {#if show && user.haspin && $pin?.length !== 6} - (show = false)} /> + (show = false)} /> {/if}
- {#if user.haspin && !$pin} - - {:else} -
- {#if isNaN($animatedRate)} -
—
- {:else} - {f((user.balance * $animatedRate) / sats, user.currency)} - {/if} -
+ {#if user.haspin && !$pin} + + {:else} +
+ {#if isNaN($animatedRate)} +
—
+ {:else} + {f((user.balance * $animatedRate) / sats, user.currency)} + {/if} +
-
- ⚡️{s(user.balance)} -
- {/if} +
+ ⚡️{s(user.balance)} +
+ {/if}
diff --git a/src/components/Calendar.svelte b/src/components/Calendar.svelte index 7504f48e..b07c136c 100644 --- a/src/components/Calendar.svelte +++ b/src/components/Calendar.svelte @@ -1,14 +1,14 @@ - + diff --git a/src/components/Card.svelte b/src/components/Card.svelte index 44ab635f..864465c0 100644 --- a/src/components/Card.svelte +++ b/src/components/Card.svelte @@ -1,14 +1,14 @@ - + diff --git a/src/components/Check.svelte b/src/components/Check.svelte index 4c9f504b..222c4dea 100644 --- a/src/components/Check.svelte +++ b/src/components/Check.svelte @@ -1,11 +1,11 @@ diff --git a/src/components/Code.svelte b/src/components/Code.svelte index ffca98a4..6c1048cf 100644 --- a/src/components/Code.svelte +++ b/src/components/Code.svelte @@ -1,27 +1,31 @@ -
-
-
{samples[sample]}
-
- +
+
+
{samples[sample]}
+
+
diff --git a/src/components/Event.svelte b/src/components/Event.svelte index 68f44589..2312f44e 100644 --- a/src/components/Event.svelte +++ b/src/components/Event.svelte @@ -1,84 +1,87 @@ -
- -
-
- -
- -
- +
+ +
+
+ +
+ +
+ -
-
-
- {user.display_name || ''} - @{user.username} -
-
 {distance(seen)}
-
-
- {content} -
+
+
+
+ {user.display_name || ""} + @{user.username} +
+
 {distance(seen)}
+
+
+ {content} +
-
-
- -
444
-
-
- -
1072
-
-
- -
26
-
-
- -
4
-
-
-
+
+
+ +
444
+
+
+ +
1072
+
+
+ +
26
+
+
+ +
4
+
+
+
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte index 918e03d6..ae1ad077 100644 --- a/src/components/FaqCard.svelte +++ b/src/components/FaqCard.svelte @@ -1,15 +1,15 @@
-

{$t('faq.' + questionID + '.question')}

-

- {$t('faq.' + questionID + '.answer')} -

+

{$t("faq." + questionID + ".question")}

+

+ {$t("faq." + questionID + ".answer")} +

diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte index 7de087a7..0c9c96d1 100644 --- a/src/components/Feed.svelte +++ b/src/components/Feed.svelte @@ -1,72 +1,84 @@ {#if user} -
-
- -
- -
+
+
+ +
+ +
{/if} {#if browser} - {#if sorted.length} - - - - - - {:else} -
-
{$t('user.noNotes')}
-
- {/if} + {#if sorted.length} + + + + + + {:else} +
+
{$t("user.noNotes")}
+
+ {/if} {/if} diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index eda26526..c1ac79cf 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -1,65 +1,74 @@ -