self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-08 06:23:00 +02:00
Code Issues Releases Activity

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
310 changed files with 6435 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View File

@ -8,10 +8,10 @@
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
$: albumId = isAlbumsRoute($page.route?.id) ? $page.params.albumId : undefined;
$: isShare = isSharedLinkRoute($page.route?.id);
let albumId = $derived(isAlbumsRoute($page.route?.id) ? $page.params.albumId : undefined);
let isShare = $derived(isSharedLinkRoute($page.route?.id));
let dragStartTarget: EventTarget | null = null;
let dragStartTarget: EventTarget | null = $state(null);
const onDragEnter = (e: DragEvent) => {
if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
@ -117,26 +117,41 @@
await fileUploadHandler(filesArray, albumId);
}
};
const ondragenter = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
onDragEnter(e);
};
const ondragleave = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
onDragLeave(e);
};
const ondrop = async (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
await onDrop(e);
};
const onDragOver = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
};
</script>
<svelte:window on:paste={onPaste} />
<svelte:window onpaste={onPaste} />
<svelte:body
on:dragenter|stopPropagation|preventDefault={onDragEnter}
on:dragleave|stopPropagation|preventDefault={onDragLeave}
on:drop|stopPropagation|preventDefault={onDrop}
/>
<svelte:body {ondragenter} {ondragleave} {ondrop} />
{#if dragStartTarget}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="fixed inset-0 z-[1000] flex h-full w-full flex-col items-center justify-center bg-gray-100/90 text-immich-dark-gray dark:bg-immich-dark-bg/90 dark:text-immich-gray"
transition:fade={{ duration: 250 }}
on:dragover={(e) => {
// Prevent browser from opening the dropped file.
e.stopPropagation();
e.preventDefault();
}}
ondragover={onDragOver}
>
<ImmichLogo noText class="m-16 w-48 animate-bounce" />
<div class="text-2xl">{$t('drop_files_to_upload')}</div>