Spaces:
Sleeping
Sleeping
File size: 4,013 Bytes
4450790 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import { createElement as $el, getClosestOrSelf, setAttributes } from "./utils_dom.js";
export class RgthreeDialog extends EventTarget {
constructor(options) {
super();
this.options = options;
let container = $el("div.rgthree-dialog-container");
this.element = $el("dialog", {
classes: ["rgthree-dialog", options.class || ""],
child: container,
parent: document.body,
events: {
click: (event) => {
if (!this.element.open ||
event.target === container ||
getClosestOrSelf(event.target, `.rgthree-dialog-container`) === container) {
return;
}
return this.close();
},
},
});
this.element.addEventListener("close", (event) => {
this.onDialogElementClose();
});
this.titleElement = $el("div.rgthree-dialog-container-title", {
parent: container,
children: !options.title
? null
: options.title instanceof Element || Array.isArray(options.title)
? options.title
: typeof options.title === "string"
? !options.title.includes("<h2")
? $el("h2", { html: options.title })
: options.title
: options.title,
});
this.contentElement = $el("div.rgthree-dialog-container-content", {
parent: container,
child: options.content,
});
const footerEl = $el("footer.rgthree-dialog-container-footer", { parent: container });
for (const button of options.buttons || []) {
$el("button", {
text: button.label,
className: button.className,
disabled: !!button.disabled,
parent: footerEl,
events: {
click: (e) => {
var _a;
(_a = button.callback) === null || _a === void 0 ? void 0 : _a.call(button, e);
},
},
});
}
if (options.closeButtonLabel !== false) {
$el("button", {
text: options.closeButtonLabel || "Close",
className: "rgthree-button",
parent: footerEl,
events: {
click: (e) => {
this.close(e);
},
},
});
}
}
setTitle(content) {
const title = typeof content !== "string" || content.includes("<h2")
? content
: $el("h2", { html: content });
setAttributes(this.titleElement, { children: title });
}
setContent(content) {
setAttributes(this.contentElement, { children: content });
}
show() {
document.body.classList.add("rgthree-dialog-open");
this.element.showModal();
this.dispatchEvent(new CustomEvent("show"));
return this;
}
async close(e) {
if (this.options.onBeforeClose && !(await this.options.onBeforeClose())) {
return;
}
this.element.close();
}
onDialogElementClose() {
document.body.classList.remove("rgthree-dialog-open");
this.element.remove();
this.dispatchEvent(new CustomEvent("close", this.getCloseEventDetail()));
}
getCloseEventDetail() {
return { detail: null };
}
}
export class RgthreeHelpDialog extends RgthreeDialog {
constructor(node, content, opts = {}) {
const title = (node.type || node.title || "").replace(/\s*\(rgthree\).*/, " <small>by rgthree</small>");
const options = Object.assign({}, opts, {
class: "-iconed -help",
title,
content,
});
super(options);
}
}
|