E2EE Group Finance Management
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

83 lines
1.9 KiB

<style>
div.background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(60, 61, 61, 0.8);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
div.content {
box-shadow: 0 0.5em 1.5em 0 rgba(15, 15, 15, 0.65);
border-radius: 5px;
}
button.close {
position: absolute;
bottom: 0;
right: 0;
}
</style>
<script lang="typescript">
import { onMount, createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import { cubicInOut } from "svelte/easing";
const dispatch = createEventDispatcher();
let modalWindow: HTMLElement;
onMount(() => {
focusOnFirst();
});
const getFocusable = () => {
const nodes: NodeListOf<any> = modalWindow.querySelectorAll("*");
return Array.from(nodes).filter(node => node.tabIndex >= 0);
};
const focusOnFirst = () => {
const focusable = getFocusable();
focusable[0].focus();
};
const handleKeydown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
close();
event.preventDefault();
}
if (event.key === "Tab") {
const focusable = getFocusable();
let index: number = focusable.indexOf(document.activeElement);
if (index === -1 && event.shiftKey) {
index = 0;
}
index += focusable.length + (event.shiftKey ? -1 : 1);
index %= focusable.length;
focusable[index].focus();
event.preventDefault();
}
};
const close = () => {
dispatch("Close");
};
</script>
><svelte:window on:keydown="{handleKeydown}" />
<div
class="background"
on:click|self="{close}"
transition:fade="{{ duration: 150, easing: cubicInOut }}"
>
<div class="content" bind:this="{modalWindow}" tabindex="0">
<slot />
<button class="close" on:click|self="{close}">Close</button>
</div>
</div>