1 files changed, 59 insertions, 0 deletions
diff --git a/src/lib/Layout/Popup.svelte b/src/lib/Layout/Popup.svelte
new file mode 100644
index 00000000..be55adf0
--- /dev/null
+++ b/src/lib/Layout/Popup.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	export let onLeave = () => {
+		return;
+	};
+	export let card = true;
+	export let smallCard = false;
+	export let fullscreen = false;
+	export let show = true;
+	export let locked = false;
+	export let center = false;
+
+	const handleClickOutside = (event: any) => {
+		if (!locked && event.target.classList.contains('popup')) {
+			show = false;
+
+			onLeave();
+		}
+	};
+
+	onMount(() => {
+		if (browser) document.body.style.overflow = 'auto';
+	});
+
+	$: {
+		if (browser) {
+			document.body.style.overflow = 'auto';
+
+			if (show) document.body.style.overflow = 'hidden';
+			else document.body.style.overflow = 'auto';
+		}
+	}
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+{#if show}
+	<div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
+		<span
+			class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`}
+		>
+			<slot />
+		</span>
+	</div>
+{/if}
+
+<style>
+	.popup {
+		z-index: 3;
+	}
+
+	.centered {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>