From 6b1ed9399c6ad897f365bed49fda71ae47973226 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 14 Feb 2023 21:08:48 +0000 Subject: [PATCH] separate dialog and instance custom elements Signed-off-by: Arthur Lu --- index.html | 2 +- scripts/config.js | 4 +-- scripts/dialog.js | 51 ++++++++++++++++++++++++++ scripts/{elements.js => instance.js} | 53 +--------------------------- 4 files changed, 55 insertions(+), 55 deletions(-) create mode 100644 scripts/dialog.js rename scripts/{elements.js => instance.js} (75%) diff --git a/index.html b/index.html index ba4aec9..ed37741 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
diff --git a/scripts/config.js b/scripts/config.js index 41a8a61..ad0e158 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -1,5 +1,5 @@ -import {requestPVE, requestAPI, goToPage, getURIData, reload, resources} from "./utils.js"; -import { Dialog } from "./elements.js"; +import {requestPVE, requestAPI, goToPage, getURIData, resources} from "./utils.js"; +import { Dialog } from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second diff --git a/scripts/dialog.js b/scripts/dialog.js new file mode 100644 index 0000000..d70267b --- /dev/null +++ b/scripts/dialog.js @@ -0,0 +1,51 @@ +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; + } + + formBodyAppend (element) { + this.form.append(element); + } + + 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(); + } +} + +customElements.define("dialog-form", Dialog); \ No newline at end of file diff --git a/scripts/elements.js b/scripts/instance.js similarity index 75% rename from scripts/elements.js rename to scripts/instance.js index e640158..4929e8c 100644 --- a/scripts/elements.js +++ b/scripts/instance.js @@ -136,55 +136,4 @@ export class Instance extends HTMLElement { } } -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; - } - - formBodyAppend (element) { - this.form.append(element); - } - - 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(); - } -} - -customElements.define("instance-article", Instance); -customElements.define("dialog-form", Dialog); \ No newline at end of file +customElements.define("instance-article", Instance); \ No newline at end of file