This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/client/components/Modal.svelte

57 lines
1.1 KiB

<script>
import { createEventDispatcher } from 'svelte';
import { log } from "$/client/logging.js";
import { fade } from "svelte/transition";
export let active=true;
export let full_screen = false;
const dispatch = createEventDispatcher();
// this doesn't seem to work on chrome
const escape_pressed = (event) => {
log.debug("Key pressed", event.key);
if(event.key === 'Escape' || event.which === 27) {
dispatch('close');
}
}
</script>
<style>
modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: start;
z-index: 100;
}
modal content {
margin-top: 5rem;
padding: 0.5rem;
width: unset;
}
modal.full-screen content {
margin-top: 0px;
padding: 0px;
border: none;
box-shadow: none;
background: var(--color-bg);
}
</style>
<svelte:window on:keypress={ escape_pressed } />
{#if active}
<modal transition:fade|local class:full-screen={ full_screen }>
<content>
<slot></slot>
</content>
</modal>
{/if}