noccy/jsl
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfixes, dialog improvements

Browse Source 
* It is now possible to pass an element as the dialog message to have it inserted as the body.
This commit is contained in:
Chris
2025-09-21 00:45:34 +02:00
parent 6e1351d9ab
commit bd7b7ac498
7 changed files with 95 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dialog.js
View File

@@ -20,6 +20,7 @@ class UserDialog {
#title = "MessageBox";
#message;
#actions = { "ok":"Ok" };
#options = {};
/**
* Dialog constructor
@@ -29,11 +30,12 @@ class UserDialog {
* @param {string} message The dialog message
* @param {object} actions The dialog actions
*/
constructor(style, title, message, actions) {
constructor(style, title, message, actions, options) {
if (style) this.#style = style;
if (title) this.#title = title;
if (message) this.#message = message;
if (actions && typeof actions == 'object') this.#actions = actions;
if (options && typeof options == 'object') this.#options = options;
}
/**
@@ -56,6 +58,9 @@ class UserDialog {
throw new Error("#buildDialog should not be called with an active #dialog");
const dialog = el.dialog({ class: 'jsl-dialog' });
if (this.#options.width) {
dialog.style.width = this.#options.width;
}
dialog.addEventListener('close', event => {
if (this.#resolver) {
this.#resolver(false);
@@ -68,10 +73,16 @@ class UserDialog {
let cbtn;
dom.append(dialog, el.div({ class: '-header' }, [
el.div({ class: '-title' }, this.#title),
// cbtn = el.button({ class: '-close-btn' }, '✕')
cbtn = (this.#options.showClose ?? false) ? el.button({ class: '-close-btn' }, '✕') : null,
]));
dom.append(dialog, el.div({ class: '-content' }, this.#message));
// cbtn.addEventListener('click', () => { this.#handleButton(false); });
if (this.#options.body ?? null) {
dom.append(dialog, el.div({ class: '-content' }, this.#options.body));
} else {
dom.append(dialog, el.div({ class: '-content' }, this.#message));
}
if (this.#options.showClose ?? false) {
cbtn.addEventListener('click', () => { this.#handleButton(false); });
}
const buttons = el.div({ class: '-buttons' });
let tabindex = 1;
@@ -129,39 +140,39 @@ class UserDialogFactory {
* @param {object} actions The buttons to present at the bottom of the dialog
* @returns Promise
*/
showDialog(type, title, message, actions) {
showDialog(type, title, message, actions, options) {
let dialog;
switch (type) {
case 'msgbox':
title = title ?? "MessageBox";
actions = actions ?? { 'ok': 'Ok' };
dialog = new UserDialog('msgbox', title, message, actions);
dialog = new UserDialog('msgbox', title, message, actions, options);
break;
case 'information':
case 'info':
title = title ?? "Information";
actions = actions ?? { 'ok': 'Ok' };
dialog = new UserDialog('info', title, message, actions);
dialog = new UserDialog('info', title, message, actions, options);
break;
case 'error':
title = title ?? "Error";
actions = actions ?? { 'ok': 'Ok' };
dialog = new UserDialog('error', title, message, actions);
dialog = new UserDialog('error', title, message, actions, options);
break;
case 'warning':
title = title ?? "Warning";
actions = actions ?? { 'ok': 'Ok' };
dialog = new UserDialog('warning', title, message, actions);
dialog = new UserDialog('warning', title, message, actions, options);
break;
case 'confirm':
title = title ?? "Confirmation";
actions = actions ?? { 'ok': 'Ok', 'cancel': 'Cancel' };
dialog = new UserDialog('confirm', title, message, actions);
dialog = new UserDialog('confirm', title, message, actions, options);
break;
default:
title = title ?? "Dialog";
actions = actions ?? { 'ok': 'Ok' };
dialog = new UserDialog(type, title, message, actions);
dialog = new UserDialog(type, title, message, actions, options);
}
return dialog.show();
@@ -176,7 +187,7 @@ const dialog = new Proxy(factory, {
get(target, name) {
return name in target
? target[name]
: (message, title = null, actions = null) => target.showDialog(name, title, message, actions);
: (message, title = null, actions = null, options = {}) => target.showDialog(name, title, message, actions, options);
}
});