Merge pull request 'Configure position' (#2) from configure-position into pages

Reviewed-on: https://codeberg.org/macchiato/dialog/pulls/2

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()
       }
     })
@@ -31,7 +27,7 @@ export class Dialog extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       dialog {
-        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;
@@ -64,7 +60,7 @@ export class Dialog extends HTMLElement {
   }
 
   open() {
-    this.dialogEl.showModal();
+    this.dialogEl.showModal()
     this.dialogEl.classList.add('opened')
   }
 
@@ -74,6 +70,26 @@ export class Dialog extends HTMLElement {
     setTimeout(() => {
       this.dialogEl.close()
       this.dialogEl.classList.remove('closing')
-    }, 500)
+    }, 350)
+  }
+
+  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
+    )
+  }
+
+  set top(v) {
+    this.shadowRoot.host.style.setProperty(
+      '--dialog-margin-top', `${v}px`
+    )
+  }
+
+  get top() {
+    return style.getProperty('--margin-top')
   }
 }