blob: f3b633c9601818cb353953b8be60967a55e02818 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<script>
import {random_string} from "$shared/lib/helpers";
export let title = "";
let isVisible = false;
const modal_id = "modal_" + random_string(5);
function handle_keyup(e) {
if (e.key === "Escape") {
isVisible = false;
}
}
export const functions = {
open() {
isVisible = true;
window.addEventListener("keyup", handle_keyup);
},
close() {
isVisible = false;
window.removeEventListener("keyup", handle_keyup);
},
};
</script>
<div class="modal modal--animate-scale flex flex-center padding-md bg-dark bg-opacity-40% {isVisible ? 'modal--is-visible' : ''}"
id={modal_id}
>
<div class="modal__content width-100% max-width-xs max-height-100% overflow-auto radius-md shadow-md bg"
role="alertdialog"
>
<header class="padding-y-sm padding-x-md flex items-center justify-between"
>
<h4 class="text-truncate">{title}</h4>
<button class="reset modal__close-btn modal__close-btn--inner"
on:click={functions.close}
>
<svg class="icon"
viewBox="0 0 20 20">
<title>Close modal window</title>
<g fill="none"
stroke="currentColor"
stroke-miterlimit="10"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="3"
y1="3"
x2="17"
y2="17"/>
<line x1="17"
y1="3"
x2="3"
y2="17"/>
</g>
</svg>
</button>
</header>
<div class="padding-bottom-md padding-x-md">
<slot/>
</div>
</div>
</div>
|
