Support dataset when creating elements

Allow dialog to show element and override buttons
This commit is contained in:
pythongosssss 2023-04-08 14:38:45 +01:00
parent ebd7f9bf80
commit 357c0753f8

View File

@ -8,14 +8,18 @@ export function $el(tag, propsOrChildren, children) {
if (Array.isArray(propsOrChildren)) { if (Array.isArray(propsOrChildren)) {
element.append(...propsOrChildren); element.append(...propsOrChildren);
} else { } else {
const parent = propsOrChildren.parent; const { parent, $: cb, dataset, style } = propsOrChildren;
delete propsOrChildren.parent; delete propsOrChildren.parent;
const cb = propsOrChildren.$;
delete propsOrChildren.$; delete propsOrChildren.$;
delete propsOrChildren.dataset;
if (propsOrChildren.style) {
Object.assign(element.style, propsOrChildren.style);
delete propsOrChildren.style; delete propsOrChildren.style;
if (style) {
Object.assign(element.style, style);
}
if (dataset) {
Object.assign(element.dataset, dataset);
} }
Object.assign(element, propsOrChildren); Object.assign(element, propsOrChildren);
@ -155,18 +159,21 @@ function dragElement(dragEl, settings) {
} }
} }
class ComfyDialog { export class ComfyDialog {
constructor() { constructor() {
this.element = $el("div.comfy-modal", { parent: document.body }, [ this.element = $el("div.comfy-modal", { parent: document.body }, [
$el("div.comfy-modal-content", [ $el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
$el("p", { $: (p) => (this.textElement = p) }), ]);
}
createButtons() {
return [
$el("button", { $el("button", {
type: "button", type: "button",
textContent: "Close", textContent: "Close",
onclick: () => this.close(), onclick: () => this.close(),
}), }),
]), ];
]);
} }
close() { close() {
@ -174,7 +181,11 @@ class ComfyDialog {
} }
show(html) { show(html) {
if (typeof html === "string") {
this.textElement.innerHTML = html; this.textElement.innerHTML = html;
} else {
this.textElement.replaceChildren(html);
}
this.element.style.display = "flex"; this.element.style.display = "flex";
} }
} }