export class Dialog extends HTMLElement { constructor () { super(); let shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.innerHTML = `

`; this.shadowElement = shadowRoot; this.dialog = shadowRoot.querySelector("dialog"); this.form = shadowRoot.querySelector("form"); } set header (header) { this.shadowElement.querySelector("#prompt").innerText = header; } set formBody (formBody) { this.form.innerHTML = formBody; } set callback (callback) { this.dialog.addEventListener("close", async () => { await callback(this.dialog.returnValue, new FormData(this.form)); document.querySelector("dialog-form").remove(); }); } show () { this.dialog.showModal(); } } export function alert (message) { let form = document.createElement("form"); form.method = "dialog"; form.innerHTML = `

${message}

`; let dialog = document.createElement("dialog"); dialog.classList.add("w3-card-4"); dialog.classList.add("w3-container"); dialog.append(form); document.body.append(dialog); dialog.showModal(); } customElements.define("dialog-form", Dialog);