ab7fd8b2ea
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
56 lines
1.4 KiB
Svelte
56 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { getDialogPosition } from "../composables/getDialogPosition";
|
|
import CommentForm from "./CommentForm.svelte";
|
|
const { handleSubmit, showModal, newMarker, cancel } = $props();
|
|
let dialogElement: HTMLDialogElement;
|
|
let dialogPosition: { left: number; top: number } = $state({
|
|
left: 0,
|
|
top: 0,
|
|
});
|
|
let ready = $state(false);
|
|
$effect(() => {
|
|
if (showModal) {
|
|
dialogElement.showModal();
|
|
dialogPosition = getDialogPosition(newMarker, dialogElement);
|
|
ready = true;
|
|
} else {
|
|
dialogElement.close();
|
|
ready = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<dialog
|
|
onclose={cancel}
|
|
bind:this={dialogElement}
|
|
class:is-visible={ready}
|
|
style="--left: {dialogPosition.left}px; --top: {dialogPosition.top}px;"
|
|
>
|
|
<CommentForm {handleSubmit} {cancel} />
|
|
</dialog>
|
|
|
|
<style>
|
|
dialog {
|
|
--loop-textarea-font-size: var(--comment-dialog-textarea-font-size);
|
|
position: var(--comment-dialog-position);
|
|
top: var(--top);
|
|
left: var(--left);
|
|
max-width: var(--comment-dialog-max-width);
|
|
max-height: none;
|
|
width: 100%;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
border-radius: var(--comment-dialog-border-radius);
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
box-shadow: var(--comment-dialog-shadow);
|
|
&.is-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
&::backdrop {
|
|
background-color: var(--comment-dialog-backdrop-background);
|
|
}
|
|
}
|
|
</style>
|