From 04b959bd167f740db2f001b71186e549ae126121 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 27 Jan 2023 22:33:05 +0000 Subject: [PATCH] create custom dialog form element Signed-off-by: Arthur Lu --- login.html | 2 +- scripts/elements.js | 41 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/login.html b/login.html index 841425c..2a71a42 100644 --- a/login.html +++ b/login.html @@ -10,7 +10,7 @@
-
+
Proxmox VE Login
diff --git a/scripts/elements.js b/scripts/elements.js index ac195da..9234109 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -131,4 +131,43 @@ class Instance extends HTMLElement { } } -customElements.define("instance-article", Instance); \ No newline at end of file +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 body (body) { + this.form.innerHTML = body + ` +
+ + +
+ `; + } + + set callback (callback) { + this.dialog.addEventListener("close", () => { + callback(this.dialog.returnValue, new FormData(this.form)); + }); + } + + show () { + this.dialog.showModal(); + } +} + +customElements.define("instance-article", Instance); +customElements.define("dialog-form", Dialog); \ No newline at end of file