Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-14 22:23:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix map not rendering correctly when div starts as hidden

Browse source
This commit is contained in:
Michał Gdula 2024-05-18 18:33:04 +01:00
parent 5439333cc5
commit dcfec1e2db
2 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

37
front/src/pages/Checkout.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { link } from "svelte-spa-router"; import { link } from "svelte-spa-router";
import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte"; import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte";
import L from "leaflet"; import L, { type Map } from "leaflet";
import { type CartItem, type Checkout } from '../lib/types'; import { type CartItem, type Checkout } from '../lib/types';
import { expandOnTyping } from "../lib/utils"; import { expandOnTyping } from "../lib/utils";
@ -14,7 +14,7 @@
email: "", email: "",
}, },
message: "", message: "",
delivery: false, delivery: true,
address: { address: {
line1: "", line1: "",
line2: "", line2: "",
@ -30,28 +30,33 @@
let items: [string, CartItem][]; let items: [string, CartItem][];
let totalPrice: number; let totalPrice: number;
let unavailableItems = false; let unavailableItems: boolean;
Cart.subscribe(() => { Cart.subscribe(() => {
items = Cart.getEntries(); items = Cart.getEntries();
totalPrice = Cart.getTotalPrice(); totalPrice = Cart.getTotalPrice();
Cart.getEntries().forEach(([_, item]) => { unavailableItems = Cart.getEntries().some(([_, item]) => item.data.availability === false);
if (!item.data.availability) unavailableItems = true;
});
}); });
let leafletMap: Map;
onMount(() => {
leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 20,
attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
},
).addTo(leafletMap);
L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
});
$: if (!CheckoutData.delivery) {
// Rendering maybe off-centered since map was initialized when div was hidden
setTimeout(() => { leafletMap.invalidateSize() }, 1);
}
function onSubmit() { function onSubmit() {
console.log(CheckoutData); console.log(CheckoutData);
} }
onMount(() => {
const maxZoom = 20;
const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
});
</script> </script>
<a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a> <a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a>

15
front/src/pages/Index.svelte
View file

@ -12,12 +12,15 @@
let items = getPopularToday(); let items = getPopularToday();
onMount(() => { onMount(() => {
const maxZoom = 20; const leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"; L.tileLayer(
const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13); 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
{
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map); maxZoom: 20,
L.marker([50.82304922105467, -0.432780150496344]).addTo(map); attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
},
).addTo(leafletMap);
L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
}); });
</script> </script>