/**
* Custom confirmation and alert modal dialogs with focus management and fallback.
*/
import { getEl } from './dom-utils.js';
/**
* Displays an asynchronous confirmation modal.
* @param {string} title - Dialog title.
* @param {string} text - Dialog description / message.
* @param {string} [yes_caption='Yes'] - Confirm button text.
* @param {string} [no_caption='No'] - Cancel button text.
* @returns {Promise<boolean>} Resolves to true if confirmed, false otherwise.
*/
export function customConfirm(title, text, yes_caption = 'Yes', no_caption = 'No') {
return new Promise((resolve) => {
const overlay = getEl('id-confirm-dialog-overlay');
const titleEl = getEl('id-confirm-title');
const textEl = getEl('id-confirm-text');
const yesBtn = getEl('id-confirm-btn-yes');
const noBtn = getEl('id-confirm-btn-no');
if (!overlay || !titleEl || !textEl || !yesBtn || !noBtn) {
const confirmed = window.confirm(text || title || 'Are you sure?');
return resolve(confirmed);
}
titleEl.textContent = title || '';
textEl.textContent = text || '';
yesBtn.textContent = yes_caption;
noBtn.textContent = no_caption;
noBtn.style.display = '';
overlay.style.display = 'flex';
yesBtn.focus();
const handleKeyDown = (e) => {
if (e.key === 'Escape') {
cleanup(false);
}
};
const cleanup = (result) => {
overlay.style.display = 'none';
yesBtn.onclick = null;
noBtn.onclick = null;
window.removeEventListener('keydown', handleKeyDown);
resolve(result);
};
window.addEventListener('keydown', handleKeyDown);
yesBtn.onclick = () => cleanup(true);
noBtn.onclick = () => cleanup(false);
});
}
/**
* Displays an asynchronous alert modal dialog.
* @param {string} title - Dialog title.
* @param {string} text - Dialog message.
* @param {string} [ok_caption='OK'] - Dismiss button text.
* @returns {Promise<void>} Resolves when dismissed.
*/
export function customAlert(title, text, ok_caption = 'OK') {
return new Promise((resolve) => {
const overlay = getEl('id-confirm-dialog-overlay');
const titleEl = getEl('id-confirm-title');
const textEl = getEl('id-confirm-text');
const yesBtn = getEl('id-confirm-btn-yes');
const noBtn = getEl('id-confirm-btn-no');
if (!overlay || !titleEl || !textEl || !yesBtn || !noBtn) {
window.alert(text || title || '');
return resolve();
}
titleEl.textContent = title || 'Alert';
textEl.textContent = text || '';
yesBtn.textContent = ok_caption;
noBtn.style.display = 'none';
overlay.style.display = 'flex';
yesBtn.focus();
const handleKeyDown = (e) => {
if (e.key === 'Escape' || e.key === 'Enter') {
cleanup();
}
};
const cleanup = () => {
overlay.style.display = 'none';
noBtn.style.display = '';
yesBtn.onclick = null;
noBtn.onclick = null;
window.removeEventListener('keydown', handleKeyDown);
resolve();
};
window.addEventListener('keydown', handleKeyDown);
yesBtn.onclick = () => cleanup();
});
}
// Bind to window for global availability
if (typeof window !== 'undefined') {
window.customConfirm = customConfirm;
window.customAlert = customAlert;
}
confirm-dialog.js
×
Type: Web, text/x-java
3.08 Kilobytes
Last Modified 2026-09-04 18:10:51
⬇ Download File
Type: Web, text/x-java
3.08 Kilobytes
Last Modified 2026-09-04 18:10:51
⬇ Download File