msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

[docs] use svelte:header + event for link load (#6903)

Browse Source
pull/6904/head
Ignatius Bagus 3 years ago committed by GitHub
parent e3380e3ccb
commit 2484acea26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 71 deletions
Show Stats Download Patch File Download Diff File

47
site/content/examples/16-context/00-context-api/Map.svelte
Unescape View File

@ -1,9 +1,9 @@
<script> <script>
import { onMount, setContext } from 'svelte'; import { onDestroy, setContext } from 'svelte';
import { mapbox, key } from './mapbox.js'; import { mapbox, key } from './mapbox.js';
setContext(key, { setContext(key, {
getMap: () => map getMap: () => map,
}); });
export let lat; export let lat;
@ -13,32 +13,31 @@
let container; let container;
let map; let map;
onMount(() => { function load() {
const link = document.createElement('link'); map = new mapbox.Map({
link.rel = 'stylesheet'; container,
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css'; style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat],
link.onload = () => { zoom,
map = new mapbox.Map({ });
container, }
style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat], onDestroy(() => {
zoom if (map) map.remove();
});
};
document.head.appendChild(link);
return () => {
map.remove();
link.parentNode.removeChild(link);
};
}); });
</script> </script>
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
on:load={load}
/>
</svelte:head>
<div bind:this={container}> <div bind:this={container}>
{#if map} {#if map}
<slot></slot> <slot />
{/if} {/if}
</div> </div>
@ -47,4 +46,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

46
site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
Unescape View File

@ -1,5 +1,5 @@
<script> <script>
import { onMount } from 'svelte'; import { onDestroy } from 'svelte';
import { mapbox } from './mapbox.js'; import { mapbox } from './mapbox.js';
// set the context here... // set the context here...
@ -11,32 +11,32 @@
let container; let container;
let map; let map;
onMount(() => { function load() {
const link = document.createElement('link'); map = new mapbox.Map({
link.rel = 'stylesheet'; container,
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css'; style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat],
link.onload = () => { zoom,
map = new mapbox.Map({ });
container, }
style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat], onDestroy(() => {
zoom if (map) map.remove();
});
};
document.head.appendChild(link);
return () => {
map.remove();
link.parentNode.removeChild(link);
};
}); });
</script> </script>
<!-- this special element will be explained in a later section -->
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
on:load={load}
/>
</svelte:head>
<div bind:this={container}> <div bind:this={container}>
{#if map} {#if map}
<slot></slot> <slot />
{/if} {/if}
</div> </div>
@ -45,4 +45,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

48
site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
Unescape View File

@ -1,9 +1,9 @@
<script> <script>
import { onMount, setContext } from 'svelte'; import { onDestroy, setContext } from 'svelte';
import { mapbox, key } from './mapbox.js'; import { mapbox, key } from './mapbox.js';
setContext(key, { setContext(key, {
getMap: () => map getMap: () => map,
}); });
export let lat; export let lat;
@ -13,32 +13,32 @@
let container; let container;
let map; let map;
onMount(() => { function load() {
const link = document.createElement('link'); map = new mapbox.Map({
link.rel = 'stylesheet'; container,
link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css'; style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat],
link.onload = () => { zoom,
map = new mapbox.Map({ });
container, }
style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat], onDestroy(() => {
zoom if (map) map.remove();
});
};
document.head.appendChild(link);
return () => {
map.remove();
link.parentNode.removeChild(link);
};
}); });
</script> </script>
<!-- this special element will be explained in a later section -->
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
on:load={load}
/>
</svelte:head>
<div bind:this={container}> <div bind:this={container}>
{#if map} {#if map}
<slot></slot> <slot />
{/if} {/if}
</div> </div>
@ -47,4 +47,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save