|
|
|
@ -21,7 +21,7 @@
|
|
|
|
|
|
|
|
|
|
import ScreenToggle from '../../components/ScreenToggle.svelte';
|
|
|
|
|
import {
|
|
|
|
|
mapbox_setup, // needed for context API example
|
|
|
|
|
mapbox_setup, // see site/content/examples/15-context/00-context-api
|
|
|
|
|
rollupUrl,
|
|
|
|
|
svelteUrl
|
|
|
|
|
} from '../../config';
|
|
|
|
@ -36,32 +36,47 @@
|
|
|
|
|
let width;
|
|
|
|
|
let offset = 1;
|
|
|
|
|
let repl;
|
|
|
|
|
let isLoading = false;
|
|
|
|
|
let cache = {};
|
|
|
|
|
|
|
|
|
|
$: title = title_by_slug[active_slug] || '';
|
|
|
|
|
$: first_slug = sections[0].examples[0].slug;
|
|
|
|
|
$: if (repl) {
|
|
|
|
|
fetch(`examples/${active_slug}.json`)
|
|
|
|
|
.then(async response => {
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
repl.set({
|
|
|
|
|
components: process_example(data.files)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
$: mobile = width < 768; // note: same as per media query below
|
|
|
|
|
$: replOrientation = (mobile || width > 1080) ? 'columns' : 'rows';
|
|
|
|
|
$: if (repl && active_slug) {
|
|
|
|
|
if (active_slug in cache) {
|
|
|
|
|
repl.set({ components: cache[active_slug] });
|
|
|
|
|
offset = 1;
|
|
|
|
|
} else {
|
|
|
|
|
isLoading = true;
|
|
|
|
|
fetch(`examples/${active_slug}.json`)
|
|
|
|
|
.then(async response => {
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
const {files} = await response.json();
|
|
|
|
|
return process_example(files);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(components => {
|
|
|
|
|
cache[active_slug] = components;
|
|
|
|
|
repl.set({components});
|
|
|
|
|
offset = 1;
|
|
|
|
|
isLoading = false;
|
|
|
|
|
})
|
|
|
|
|
.catch(function(error) {
|
|
|
|
|
isLoading = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
const onhashchange = () => {
|
|
|
|
|
active_slug = getFragment();
|
|
|
|
|
offset = 1;
|
|
|
|
|
};
|
|
|
|
|
window.addEventListener('hashchange', onhashchange, false);
|
|
|
|
|
|
|
|
|
|
if (getFragment()) {
|
|
|
|
|
active_slug = getFragment();
|
|
|
|
|
const fragment = getFragment();
|
|
|
|
|
if (fragment) {
|
|
|
|
|
active_slug = fragment;
|
|
|
|
|
} else {
|
|
|
|
|
active_slug = first_slug;
|
|
|
|
|
goto(`examples#${active_slug}`);
|
|
|
|
@ -82,17 +97,21 @@
|
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
|
|
<div class='examples-container' bind:clientWidth={width}>
|
|
|
|
|
<div class="viewport offset-{offset}">
|
|
|
|
|
<TableOfContents {sections} active_section={active_slug} />
|
|
|
|
|
<Repl
|
|
|
|
|
bind:this={repl}
|
|
|
|
|
{svelteUrl}
|
|
|
|
|
{rollupUrl}
|
|
|
|
|
orientation={mobile ? 'columns' : 'rows'}
|
|
|
|
|
fixed={mobile}
|
|
|
|
|
relaxed
|
|
|
|
|
injectedJS={mapbox_setup}
|
|
|
|
|
/>
|
|
|
|
|
<div
|
|
|
|
|
class="viewport offset-{offset}"
|
|
|
|
|
>
|
|
|
|
|
<TableOfContents {sections} active_section={active_slug} {isLoading} />
|
|
|
|
|
<div class="toc" class:loading={isLoading}>
|
|
|
|
|
<Repl
|
|
|
|
|
bind:this={repl}
|
|
|
|
|
{svelteUrl}
|
|
|
|
|
{rollupUrl}
|
|
|
|
|
orientation={replOrientation}
|
|
|
|
|
fixed={mobile}
|
|
|
|
|
relaxed
|
|
|
|
|
injectedJS={mapbox_setup}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{#if mobile}
|
|
|
|
|
<ScreenToggle bind:offset labels={['index', 'input', 'output']}/>
|
|
|
|
@ -117,6 +136,10 @@
|
|
|
|
|
grid-auto-rows: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toc.loading {
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.offset-1 { transform: translate(-33.333%, 0); }
|
|
|
|
|
.offset-2 { transform: translate(-66.666%, 0); }
|
|
|
|
|
|
|
|
|
|