0 directories, 7 files

util

Home / testing / ai / tinai / util
/**
 * 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