mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
Ben
79 lines
2.3 KiB
Svelte
79 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import { quintOut } from 'svelte/easing';
|
|
import { onMount, onDestroy } from 'svelte';
|
|
import { browser } from '$app/environment';
|
|
import { clickOutside } from '$lib/utils/click-outside';
|
|
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
|
|
import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
|
|
|
|
/**
|
|
* Unique identifier for the modal.
|
|
*/
|
|
export let id: string;
|
|
export let title: string;
|
|
export let onClose: () => void;
|
|
export let zIndex = 9999;
|
|
/**
|
|
* If true, the logo will be displayed next to the modal title.
|
|
*/
|
|
export let showLogo = false;
|
|
/**
|
|
* Optional icon to display next to the modal title, if `showLogo` is false.
|
|
*/
|
|
export let icon: string | undefined = undefined;
|
|
|
|
$: titleId = `${id}-title`;
|
|
|
|
onMount(() => {
|
|
if (browser) {
|
|
const scrollTop = document.documentElement.scrollTop;
|
|
const scrollLeft = document.documentElement.scrollLeft;
|
|
|
|
/* eslint-disable unicorn/prefer-add-event-listener */
|
|
window.onscroll = function () {
|
|
window.scrollTo(scrollLeft, scrollTop);
|
|
};
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (browser) {
|
|
/* eslint-disable unicorn/prefer-add-event-listener */
|
|
window.onscroll = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<FocusTrap>
|
|
<div
|
|
aria-modal="true"
|
|
aria-labelledby={titleId}
|
|
style:z-index={zIndex}
|
|
transition:fade={{ duration: 100, easing: quintOut }}
|
|
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
|
|
>
|
|
<div
|
|
use:clickOutside={{
|
|
onOutclick: onClose,
|
|
onEscape: onClose,
|
|
}}
|
|
class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
|
|
style="max-height: min(95vh, 800px);"
|
|
tabindex="-1"
|
|
>
|
|
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
|
|
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
|
|
{#if $$slots['sticky-bottom']}
|
|
<div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
|
|
<slot name="sticky-bottom" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</FocusTrap>
|