From 583dde682bd2cb574b346e94d4f4a415dc32719d Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Wed, 5 Apr 2023 18:58:01 +0000
Subject: [PATCH 1/4] separate click inside logic from rest of event handler

---
 dialog.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/dialog.js b/dialog.js
index 4098ae5..8a62e28 100644
--- a/dialog.js
+++ b/dialog.js
@@ -13,14 +13,10 @@ export class Dialog extends HTMLElement {
       this.headerEl, this.bodyEl, this.footerEl
     )
     this.dialogEl.addEventListener('click', e => {
-      const rect = this.dialogEl.getBoundingClientRect();
-      const clickedInDialog = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      )
-      if (e.target === this.dialogEl && !clickedInDialog) {
+      if (
+        e.target === this.dialogEl &&
+        !this.clickedInside(e, this.dialogEl)
+      ) {
         this.close()
       }
     })
@@ -76,4 +72,14 @@ export class Dialog extends HTMLElement {
       this.dialogEl.classList.remove('closing')
     }, 500)
   }
+
+  clickedInside(e, el) {
+    const rect = el.getBoundingClientRect()
+    return (
+      rect.top <= e.clientY &&
+      e.clientY <= rect.top + rect.height &&
+      rect.left <= e.clientX &&
+      e.clientX <= rect.left + rect.width
+    )
+  }
 }
\ No newline at end of file

From d303a2ef877ffcad05572284b2d8d81b1b920891 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Wed, 5 Apr 2023 22:07:18 +0000
Subject: [PATCH 2/4] support setting top margin

---
 dialog.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/dialog.js b/dialog.js
index 8a62e28..f4246dc 100644
--- a/dialog.js
+++ b/dialog.js
@@ -27,7 +27,7 @@ export class Dialog extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       dialog {
-        margin-top: 120px;
+        margin-top: var(--margin-top, --120px);
         min-width: 200px;
         border: 1px solid rgba(0, 0, 0, 0.3);
         border-radius: 6px;
@@ -59,8 +59,8 @@ export class Dialog extends HTMLElement {
     this.footerEl.setAttribute('part', 'footer')
   }
 
-  open() {
-    this.dialogEl.showModal();
+  open(anchor = undefined) {
+    this.dialogEl.showModal()
     this.dialogEl.classList.add('opened')
   }
 
@@ -70,7 +70,7 @@ export class Dialog extends HTMLElement {
     setTimeout(() => {
       this.dialogEl.close()
       this.dialogEl.classList.remove('closing')
-    }, 500)
+    }, 350)
   }
 
   clickedInside(e, el) {
@@ -82,4 +82,12 @@ export class Dialog extends HTMLElement {
       e.clientX <= rect.left + rect.width
     )
   }
+
+  set top(v) {
+    style.setProperty('--margin-top', `${v}px`)
+  }
+
+  get top() {
+    return style.getProperty('--margin-top')
+  }
 }
\ No newline at end of file

From 73208d3e86dd64da9650fb218a13b05057d06ba2 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Wed, 5 Apr 2023 22:10:01 +0000
Subject: [PATCH 3/4] Remove unused parameter

---
 dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dialog.js b/dialog.js
index f4246dc..7ce2423 100644
--- a/dialog.js
+++ b/dialog.js
@@ -59,7 +59,7 @@ export class Dialog extends HTMLElement {
     this.footerEl.setAttribute('part', 'footer')
   }
 
-  open(anchor = undefined) {
+  open() {
     this.dialogEl.showModal()
     this.dialogEl.classList.add('opened')
   }

From 3ab87b9774678ac054ba86a002643a49aea10d3b Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Wed, 5 Apr 2023 22:25:31 +0000
Subject: [PATCH 4/4] Test and fix top property

---
 dialog.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/dialog.js b/dialog.js
index 7ce2423..f65b98f 100644
--- a/dialog.js
+++ b/dialog.js
@@ -27,7 +27,7 @@ export class Dialog extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       dialog {
-        margin-top: var(--margin-top, --120px);
+        margin-top: var(--dialog-margin-top, 120px);
         min-width: 200px;
         border: 1px solid rgba(0, 0, 0, 0.3);
         border-radius: 6px;
@@ -84,7 +84,9 @@ export class Dialog extends HTMLElement {
   }
 
   set top(v) {
-    style.setProperty('--margin-top', `${v}px`)
+    this.shadowRoot.host.style.setProperty(
+      '--dialog-margin-top', `${v}px`
+    )
   }
 
   get top() {