helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web/src/lib/components/photos-page/memory-lane.svelte
View file

@ -11,27 +11,29 @@
import { fade } from 'svelte/transition';
import { t } from 'svelte-i18n';
$: shouldRender = $memoryStore?.length > 0;
let shouldRender = $derived($memoryStore?.length > 0);
onMount(async () => {
const localTime = new Date();
$memoryStore = await getMemoryLane({ month: localTime.getMonth() + 1, day: localTime.getDate() });
});
let memoryLaneElement: HTMLElement;
let offsetWidth = 0;
let innerWidth = 0;
let memoryLaneElement: HTMLElement | undefined = $state();
let offsetWidth = $state(0);
let innerWidth = $state(0);
let scrollLeftPosition = 0;
let scrollLeftPosition = $state(0);
const onScroll = () => (scrollLeftPosition = memoryLaneElement?.scrollLeft);
const onScroll = () => {
scrollLeftPosition = memoryLaneElement?.scrollLeft ?? 0;
};
$: canScrollLeft = scrollLeftPosition > 0;
$: canScrollRight = Math.ceil(scrollLeftPosition) < innerWidth - offsetWidth;
let canScrollLeft = $derived(scrollLeftPosition > 0);
let canScrollRight = $derived(Math.ceil(scrollLeftPosition) < innerWidth - offsetWidth);
const scrollBy = 400;
const scrollLeft = () => memoryLaneElement.scrollBy({ left: -scrollBy, behavior: 'smooth' });
const scrollRight = () => memoryLaneElement.scrollBy({ left: scrollBy, behavior: 'smooth' });
const scrollLeft = () => memoryLaneElement?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
const scrollRight = () => memoryLaneElement?.scrollBy({ left: scrollBy, behavior: 'smooth' });
</script>
{#if shouldRender}
@ -40,7 +42,7 @@
bind:this={memoryLaneElement}
class="relative mt-5 overflow-x-hidden whitespace-nowrap transition-all"
use:resizeObserver={({ width }) => (offsetWidth = width)}
on:scroll={onScroll}
onscroll={onScroll}
>
{#if canScrollLeft || canScrollRight}
<div class="sticky left-0 z-20">
@ -49,7 +51,7 @@
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
on:click={scrollLeft}
onclick={scrollLeft}
>
<Icon path={mdiChevronLeft} size="36" /></button
>
@ -60,7 +62,7 @@
<button
type="button"
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
on:click={scrollRight}
onclick={scrollRight}
>
<Icon path={mdiChevronRight} size="36" /></button
>