[READ-ONLY] Mirror of https://github.com/probablykasper/kadium. App for staying ontop of YouTube channels' uploads
kadium.kasper.space
linux
macos
notifications
tauri
windows
youtube
Use modal-svelte only
+1
-151
+1
-1
src/lib/modals/Channel.svelte
+1
-1
src/lib/modals/Channel.svelte
-150
src/lib/modals/Modal.svelte
-150
src/lib/modals/Modal.svelte
···
1
-
<script lang="ts" context="module">
2
-
import { writable } from 'svelte/store'
3
-
4
-
export const modalCount = writable(0)
5
-
</script>
6
-
7
-
<script lang="ts">
8
-
import { onDestroy, onMount } from 'svelte'
9
-
import { scale } from 'svelte/transition'
10
-
11
-
export let onCancel: () => void
12
-
export let noEscapeHandling = false
13
-
export let form: (() => void) | undefined = undefined
14
-
$: tag = form === undefined ? 'div' : 'form'
15
-
export let noCloseIcon = false
16
-
export let title: string | null = null
17
-
18
-
let dialogEl: HTMLDialogElement
19
-
let backdrop = false
20
-
21
-
$modalCount += 1
22
-
onDestroy(() => {
23
-
$modalCount -= 1
24
-
})
25
-
26
-
onMount(() => {
27
-
dialogEl.showModal()
28
-
setTimeout(() => {
29
-
// wait for the dialog to be visible before animating. setTimeout requires for Safari
30
-
backdrop = true
31
-
})
32
-
return () => {
33
-
dialogEl.close()
34
-
}
35
-
})
36
-
37
-
function pos_within(e: MouseEvent, el: HTMLElement) {
38
-
const rect = el.getBoundingClientRect()
39
-
return (
40
-
rect.top <= e.clientY &&
41
-
e.clientY <= rect.bottom &&
42
-
rect.left <= e.clientX &&
43
-
e.clientX <= rect.right
44
-
)
45
-
}
46
-
47
-
// Prevent clicks where the mousedown or mouseup happened on a child element.
48
-
let clickable = false
49
-
</script>
50
-
51
-
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
52
-
<dialog
53
-
class="modal"
54
-
class:show-backdrop={backdrop}
55
-
bind:this={dialogEl}
56
-
on:mousedown|self={() => {
57
-
clickable = true
58
-
}}
59
-
on:click|self={(e) => {
60
-
if ((clickable || e.type !== 'click') && !pos_within(e, dialogEl)) {
61
-
onCancel()
62
-
}
63
-
}}
64
-
on:keydown
65
-
on:keydown={(e) => {
66
-
if (e.key === 'Escape' && noEscapeHandling) {
67
-
e.preventDefault()
68
-
}
69
-
}}
70
-
on:keydown|self={(e) => {
71
-
if (form && e.key === 'Enter' && !e.metaKey) {
72
-
form()
73
-
e.preventDefault()
74
-
}
75
-
}}
76
-
on:cancel={(e) => {
77
-
e.preventDefault()
78
-
onCancel()
79
-
}}
80
-
transition:scale={{ duration: 200, start: 0.93, opacity: 0 }}
81
-
on:outrostart={() => {
82
-
backdrop = false
83
-
}}
84
-
>
85
-
<svelte:element
86
-
this={tag}
87
-
class="box"
88
-
on:submit|preventDefault={form}
89
-
on:mousedown={() => {
90
-
clickable = false
91
-
}}
92
-
role="none"
93
-
>
94
-
{#if !noCloseIcon}
95
-
<svg
96
-
role="none"
97
-
on:click={() => onCancel()}
98
-
fill="currentColor"
99
-
xmlns="http://www.w3.org/2000/svg"
100
-
width="12"
101
-
height="12"
102
-
viewBox="0 0 24 24"
103
-
><path
104
-
d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"
105
-
/></svg
106
-
>
107
-
{/if}
108
-
{#if title !== null}
109
-
<h2>{title}</h2>
110
-
{/if}
111
-
<slot />
112
-
{#if $$slots.buttons}
113
-
<div class="buttons">
114
-
<slot name="buttons" />
115
-
</div>
116
-
{/if}
117
-
</svelte:element>
118
-
</dialog>
119
-
120
-
<style lang="sass">
121
-
dialog
122
-
background-color: var(--modal-bg, hsl(220, 18%, 11%))
123
-
color: inherit
124
-
box-sizing: border-box
125
-
border-radius: 8px
126
-
box-shadow: 0px 0px 30px 0px rgba(#000000, 0.5)
127
-
outline: none
128
-
padding: 0px
129
-
border: 1px solid hsla(0, 0%, 100%, 0.15)
130
-
.box
131
-
padding: 24px
132
-
::backdrop
133
-
transition: opacity 200ms cubic-bezier(0.33, 1, 0.68, 1) // easeOutCubic
134
-
background-color: hsla(0, 0%, 0%, 0.2)
135
-
opacity: 0
136
-
.show-backdrop::backdrop
137
-
opacity: 1
138
-
svg
139
-
position: absolute
140
-
right: 12px
141
-
top: 12px
142
-
padding: 6px
143
-
&:hover
144
-
opacity: 0.7
145
-
h2
146
-
margin-top: -8px
147
-
.buttons
148
-
display: flex
149
-
justify-content: flex-end
150
-
</style>