96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
/* global window, document */
|
||
|
||
/**
|
||
* Unified Dialog Infrastructure
|
||
*
|
||
* Provides a shared modal overlay and dialog container that all other
|
||
* client-side modules (event popups, cache purge, etc.) can use.
|
||
*
|
||
* Usage:
|
||
* Luxtools.Dialog.show(htmlString) – render content and open
|
||
* Luxtools.Dialog.close() – close the dialog
|
||
* Luxtools.Dialog.getContainer() – return the dialog DOM element
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
|
||
var Luxtools = window.Luxtools || (window.Luxtools = {});
|
||
|
||
var Dialog = (function () {
|
||
var overlay = null;
|
||
var container = null;
|
||
|
||
/**
|
||
* Lazily create the overlay + dialog container and attach them to
|
||
* the document body. Wires up click-outside-to-close and Escape.
|
||
*/
|
||
function ensureElements() {
|
||
if (overlay) return;
|
||
|
||
overlay = document.createElement('div');
|
||
overlay.className = 'luxtools-dialog-overlay';
|
||
overlay.style.display = 'none';
|
||
|
||
container = document.createElement('div');
|
||
container.className = 'luxtools-dialog';
|
||
container.setAttribute('role', 'dialog');
|
||
container.setAttribute('aria-modal', 'true');
|
||
|
||
overlay.appendChild(container);
|
||
document.body.appendChild(overlay);
|
||
|
||
// Close when clicking the backdrop (but not the dialog itself)
|
||
overlay.addEventListener('click', function (e) {
|
||
if (e.target === overlay) close();
|
||
});
|
||
|
||
// Close on Escape
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape' && overlay && overlay.style.display !== 'none') {
|
||
close();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Show the dialog with the given HTML content.
|
||
*
|
||
* The HTML should include a close button with class
|
||
* `luxtools-dialog-close` – it will be wired up automatically.
|
||
*
|
||
* @param {string} html - innerHTML for the dialog container
|
||
*/
|
||
function show(html) {
|
||
ensureElements();
|
||
container.innerHTML = html;
|
||
overlay.style.display = 'flex';
|
||
|
||
// Auto-wire the close button inside the rendered content
|
||
var closeBtn = container.querySelector('.luxtools-dialog-close');
|
||
if (closeBtn) closeBtn.addEventListener('click', close);
|
||
}
|
||
|
||
/**
|
||
* Close (hide) the dialog.
|
||
*/
|
||
function close() {
|
||
if (overlay) overlay.style.display = 'none';
|
||
}
|
||
|
||
/**
|
||
* Return the dialog container element (creates it if necessary).
|
||
* Useful for querying form inputs after `show()`.
|
||
*
|
||
* @returns {HTMLElement}
|
||
*/
|
||
function getContainer() {
|
||
ensureElements();
|
||
return container;
|
||
}
|
||
|
||
return { show: show, close: close, getContainer: getContainer };
|
||
})();
|
||
|
||
Luxtools.Dialog = Dialog;
|
||
})();
|