Compare commits

..

2 commits

Author SHA1 Message Date
4dffc731b6 Add transition on layout instead of on each single page
Some checks failed
ci/woodpecker/push/build Pipeline failed
2023-12-12 16:57:28 +01:00
9e7bfc5468 Back with sw.js 2023-12-12 16:56:43 +01:00
4 changed files with 16 additions and 47 deletions

View file

@ -1,11 +1,10 @@
<script lang="ts"> <script lang="ts">
import BottomAppBar from '$lib/components/BottomAppBar.svelte'; import BottomAppBar from '$lib/components/BottomAppBar.svelte';
// import Toast from '$lib/components/Toast.svelte'; import Toast from '$lib/components/Toast.svelte';
// import { onMount } from 'svelte'; import { onMount } from 'svelte';
let node; let node: HTMLElement;
/**
onMount(() => { onMount(() => {
if(import.meta.env.DEV) return; if(import.meta.env.DEV) return;
@ -17,22 +16,30 @@
if (BroadcastChannel) { if (BroadcastChannel) {
const channel = new BroadcastChannel('sw-messages'); const channel = new BroadcastChannel('sw-messages');
channel.addEventListener('message', (event) => { channel.addEventListener('message', (event) => {
console.log(event.data);
new Toast({ target: node }); new Toast({ target: node });
}); });
} else { } else {
navigator.serviceWorker.addEventListener('message', (evt) => { navigator.serviceWorker.addEventListener('message', (evt) => {
console.log(evt.data);
new Toast({ target: node }); new Toast({ target: node });
}); });
} }
navigator.serviceWorker.ready.then((registration) => { navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage('Save client'); registration?.active?.postMessage('Save client');
}); });
} }
}); });
*/
onNavigate((navigation: { complete: any; }) => {
if (!(document.startViewTransition)) return;
return new Promise<void>((resolve) => {
document?.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
</script> </script>
<div bind:this={node}></div> <div bind:this={node}></div>

View file

@ -1,22 +1,9 @@
<script lang="ts"> <script lang="ts">
import Path from '$lib/components/Path.svelte'; import Path from '$lib/components/Path.svelte';
import Splash from '$lib/components/Splash.svelte'; import Splash from '$lib/components/Splash.svelte';
import { onNavigate } from '$app/navigation';
export let data; export let data;
let categories = data.categories; let categories = data.categories;
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
</script> </script>
<Splash /> <Splash />

View file

@ -1,19 +1,7 @@
<script lang="ts"> <script lang="ts">
import Route from '$lib/components/Route.svelte'; import Route from '$lib/components/Route.svelte';
import HomeHeader from '$lib/components/HomeHeader.svelte'; import HomeHeader from '$lib/components/HomeHeader.svelte';
import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
export let data; export let data;
</script> </script>

View file

@ -1,22 +1,9 @@
<script lang="ts"> <script lang="ts">
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte'; import Tabs from '$lib/components/Tabs.svelte';
import { onNavigate } from '$app/navigation';
export let data: App.Route; export let data: App.Route;
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
let divider; let divider;
const mapClick = () => {}; const mapClick = () => {};