Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
chenpangpang
open-webui
Commits
4207f80c
Commit
4207f80c
authored
Apr 07, 2024
by
Timothy J. Baek
Browse files
feat: close model on esc
parent
073aecd4
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
11 additions
and
0 deletions
+11
-0
src/lib/components/common/Modal.svelte
src/lib/components/common/Modal.svelte
+11
-0
No files found.
src/lib/components/common/Modal.svelte
View file @
4207f80c
...
@@ -7,6 +7,7 @@
...
@@ -7,6 +7,7 @@
export let show = true;
export let show = true;
export let size = 'md';
export let size = 'md';
let modalElement = null;
let mounted = false;
let mounted = false;
const sizeToWidth = (size) => {
const sizeToWidth = (size) => {
...
@@ -19,14 +20,23 @@
...
@@ -19,14 +20,23 @@
}
}
};
};
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
console.log('Escape');
show = false;
}
};
onMount(() => {
onMount(() => {
mounted = true;
mounted = true;
});
});
$: if (mounted) {
$: if (mounted) {
if (show) {
if (show) {
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
} else {
} else {
window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
document.body.style.overflow = 'unset';
}
}
}
}
...
@@ -36,6 +46,7 @@
...
@@ -36,6 +46,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
<div
bind:this={modalElement}
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
in:fade={{ duration: 10 }}
in:fade={{ duration: 10 }}
on:click={() => {
on:click={() => {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment