WIP: Add a new dialog class to replace the old one

Add a new dialog class with the same signature and the same properties as the old Dialog implementation. The new one is using the shoelace web components and is working with promises to allow the calling method to react to the user input in the dialog.

app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -1,5 +1,5 @@
 # Dialog windows
-#
+# @deprecated use dialog.js instead
 class window.Alchemy.Dialog
 
   DEFAULTS:
@@ -229,6 +229,11 @@ window.Alchemy.closeCurrentDialog = (callback) ->
     dialog.options.closed = callback
     dialog.close()
 
+  # this is a intermediate solution to use the same method also with the new dialog
+  new_dialog = document.querySelector("sl-dialog")
+  if new_dialog
+    new_dialog.connectedDialogInstance.close()
+
 # Utility function to open a new Dialog
 window.Alchemy.openDialog = (url, options) ->
   if !url

app/assets/stylesheets/alchemy/shoelace.scss

@@ -347,6 +347,7 @@ sl-tooltip {
 sl-dialog {
   &::part(panel) {
     background-color: var(--color-grey_light);
+    min-height: var(--height);
     --body-spacing: var(--spacing-4) var(--spacing-3);
     --footer-spacing: var(--spacing-4) var(--spacing-3);
   }

app/javascript/alchemy_admin/components/dialog_link.js

@@ -1,13 +1,4 @@
-export const DEFAULTS = {
-  header_height: 36,
-  size: "400x300",
-  padding: true,
-  title: "",
-  modal: true,
-  overflow: "visible",
-  ready: () => {},
-  closed: () => {}
-}
+import { Dialog } from "alchemy_admin/dialog"
 
 export class DialogLink extends HTMLAnchorElement {
   connectedCallback() {
@@ -20,21 +11,14 @@ export class DialogLink extends HTMLAnchorElement {
   }
 
   openDialog() {
-    this.dialog = new Alchemy.Dialog(
-      this.getAttribute("href"),
-      this.dialogOptions
-    )
+    this.dialog = new Dialog(this.getAttribute("href"), this.dialogOptions)
     this.dialog.open()
   }
 
   get dialogOptions() {
-    const options = this.dataset.dialogOptions
+    return this.dataset.dialogOptions
       ? JSON.parse(this.dataset.dialogOptions)
       : {}
-    return {
-      ...DEFAULTS,
-      ...options
-    }
   }
 
   get disabled() {

app/javascript/alchemy_admin/dialog.js

@@ -0,0 +1,119 @@
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+
+export class Dialog {
+  #dialog
+  #onReject
+  #onResolve
+
+  /**
+   * @param {string} url
+   * @param {object} options
+   */
+  constructor(url, options = {}) {
+    this.url = url
+    this.options = { title: "", size: "300x400", padding: true, ...options }
+  }
+
+  /**
+   * load the content of given url and than open the dialog
+   * @returns {Promise<unknown>}
+   */
+  open() {
+    this.#loadContent().then((content) => {
+      // create the dialog markup and show the dialog
+      this.#build(content)
+      this.#subscribeFormSubmit()
+      this.#dialog.show()
+
+      // bind the current class instance to the DOM - element
+      // this should be an intermediate solution
+      // the main goal, is to close the dialog with the turbo:submit-end - event
+      this.#dialog.connectedDialogInstance = this
+
+      // the dialog is closing with the overlay, esc - key, or close - button
+      this.#dialog.addEventListener("sl-request-close", () => {
+        this.#dialog.remove()
+        this.#onReject()
+      })
+    })
+
+    return new Promise((resolve, reject) => {
+      this.#onResolve = resolve
+      this.#onReject = reject
+    })
+  }
+
+  /**
+   * hide and remove dialog
+   * the open - promise will be resolved
+   */
+  close() {
+    this.#dialog.hide().then(() => {
+      this.#dialog.remove()
+      this.#onResolve()
+    })
+  }
+
+  /**
+   * load content of the given url
+   * @returns {Promise<string>}
+   */
+  async #loadContent() {
+    const response = await fetch(this.url, {
+      headers: { "X-Requested-With": "XMLHttpRequest" }
+    })
+    return await response.text()
+  }
+
+  /**
+   * create and append the dialog container to the DOM
+   * @param {string} content
+   */
+  #build(content) {
+    this.#dialog = createHtmlElement(`
+      <sl-dialog label="${this.title}" style="${this.styles}">
+        ${content}
+      </sl-dialog>
+    `)
+    document.body.append(this.#dialog)
+  }
+
+  /**
+   * add event listeners to forms inside the dialog
+   *
+   * listen to turbo:submit-end events if a remote form was submitted
+   * only forms with the attribute `data-close-dialog-on-success`
+   */
+  #subscribeFormSubmit() {
+    this.#dialog
+      .querySelectorAll("form[data-close-dialog-on-success]")
+      .forEach((form) =>
+        form.addEventListener("turbo:submit-end", (evt) => {
+          if (evt.detail.success) {
+            this.close()
+          }
+        })
+      )
+  }
+
+  /**
+   * provide the custom properties for the dialog settings
+   * @returns {string}
+   */
+  get styles() {
+    const sizes = this.options.size.split("x")
+    let styles = `--width: ${sizes[0]}px; --height: ${sizes[1]}px;`
+    if (!this.options.padding) {
+      styles += " --body-spacing: 0;"
+    }
+    return styles
+  }
+
+  /**
+   * get the title of the dialog
+   * @returns {string}
+   */
+  get title() {
+    return this.options.title
+  }
+}