-
-
Notifications
You must be signed in to change notification settings - Fork 315
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
1 parent
350da56
commit 84ce8fc
Showing
7 changed files
with
155 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import { createHtmlElement } from "alchemy_admin/utils/dom_helpers" | ||
|
|
||
| export class Dialog { | ||
| #dialogComponent | ||
| #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.#build() | ||
| // Show the dialog with the spinner after a small delay. | ||
| // Most of the times the spinner will not be visible, because the requested | ||
| // content is already downloaded. These behavior "feels" a little bit better. | ||
| // It calls the show - method twice, but this is not a big deal. | ||
| setTimeout(() => this.#dialogComponent.show(), 300) | ||
|
|
||
| this.#loadContent().then((content) => { | ||
| // create the dialog markup and show the dialog | ||
| this.#dialogComponent.innerHTML = content | ||
| this.#subscribeFormSubmit() | ||
| this.#dialogComponent.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.#dialogComponent.dialogClassInstance = this | ||
|
|
||
| // the dialog is closing with the overlay, esc - key, or close - button | ||
| // the reject - callback will be fired, because the user decided to close the | ||
| // dialog without saving anything | ||
| this.#dialogComponent.addEventListener("sl-request-close", () => { | ||
| this.#dialogComponent.remove() | ||
| this.#onReject() | ||
| }) | ||
| }) | ||
|
|
||
| return new Promise((resolve, reject) => { | ||
| this.#onResolve = resolve | ||
| this.#onReject = reject | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * hide and remove dialog | ||
| * the open - promise will be resolved | ||
| */ | ||
| onSubmitSuccess() { | ||
| this.#dialogComponent.hide().then(() => { | ||
| this.#dialogComponent.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 | ||
| */ | ||
| #build() { | ||
| this.#dialogComponent = createHtmlElement(` | ||
| <sl-dialog label="${this.title}" style="${this.styles}"> | ||
| <alchemy-spinner size="medium"></alchemy-spinner> | ||
| </sl-dialog> | ||
| `) | ||
| document.body.append(this.#dialogComponent) | ||
| } | ||
|
|
||
| /** | ||
| * 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.#dialogComponent | ||
| .querySelectorAll("form[data-close-dialog-on-success]") | ||
| .forEach((form) => | ||
| form.addEventListener("turbo:submit-end", (evt) => { | ||
| if (evt.detail.success) { | ||
| this.onSubmitSuccess() | ||
| } | ||
| }) | ||
| ) | ||
| } | ||
|
|
||
| /** | ||
| * 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; --dialog-min-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 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters