romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 13:20:54 +00:00
Code Issues Releases Activity

Modal hierarchy

Browse Source
This commit is contained in:
Romein van Buren 2023-01-19 08:41:09 +01:00
parent 9cecad0c3a
commit 44d4fb843d
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/modal.svelte
View File

@ -1,3 +1,7 @@
<script context="module">
let numberOfModalsOpen = 0;
</script>
<script> <script>
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import Icon from './icon.svelte'; import Icon from './icon.svelte';
@ -7,14 +11,27 @@
export let contentPadding = true; export let contentPadding = true;
export let width = '80vw'; export let width = '80vw';
const level = numberOfModalsOpen + 1;
let isNew = true;
$: if (show) {
numberOfModalsOpen++;
}
else if (!isNew) {
numberOfModalsOpen--;
}
else {
isNew = false;
}
function keydown(event) { function keydown(event) {
if (event.key === 'Escape') { if ((event.key === 'Escape') && (level === numberOfModalsOpen)) {
show = false; show = false;
} }
} }
</script> </script>
<svelte:window on:keydown={keydown} /> <svelte:window on:keydown|preventDefault={keydown} />
{#if show} {#if show}
<div class="modal outer" on:mousedown|self={() => show = false} transition:fade> <div class="modal outer" on:mousedown|self={() => show = false} transition:fade>