@n8d/htwoo-core
Version:
hTWOo is a Fluent Design Framework purely in HTML and CSS
165 lines (162 loc) • 8.38 kB
JavaScript
'use strict';
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _HOODialog_launcher, _HOODialog_dialog, _HOODialog_dialogType, _HOODialog_closer, _HOODialog_options, _HOODialog_showDialog, _HOODialog_backdropClick, _HOODialog_keyboardClose, _HOODialog_closeDialog;
/**
* Dialog type options
*/
exports.DialogType = void 0;
(function (DialogType) {
DialogType["DIALOG"] = "dialog";
DialogType["MODAL"] = "modal";
})(exports.DialogType || (exports.DialogType = {}));
/**
* HOODialog Class - Handles accessible dialog functionality
*/
class HOODialog {
/**
* Constructor for HOODialog
* @param launcher - CSS selector for the element that opens the dialog
* @param dialog - CSS selector for the dialog element
* @param dialogType - Type of dialog (DIALOG or MODAL)
* @param options - Configuration options
*/
constructor(launcher, dialog, dialogType = exports.DialogType.DIALOG, options = HOODialog.options) {
// Private properties
_HOODialog_launcher.set(this, void 0);
_HOODialog_dialog.set(this, void 0);
_HOODialog_dialogType.set(this, void 0);
_HOODialog_closer.set(this, void 0);
_HOODialog_options.set(this, {
closer: null,
backdropCloser: true,
escCloser: true
});
/**
* Open the dialog
*/
_HOODialog_showDialog.set(this, () => {
console.debug('-> Fired showDialog -- ', __classPrivateFieldGet(this, _HOODialog_dialog, "f"));
if (__classPrivateFieldGet(this, _HOODialog_dialogType, "f") === exports.DialogType.DIALOG) {
__classPrivateFieldGet(this, _HOODialog_dialog, "f").show();
}
else if (__classPrivateFieldGet(this, _HOODialog_dialogType, "f") === exports.DialogType.MODAL) {
__classPrivateFieldGet(this, _HOODialog_dialog, "f").showModal();
// FIX: Make backdrop click optional
// Capture click on backdrop
__classPrivateFieldGet(this, _HOODialog_dialog, "f").addEventListener('click', __classPrivateFieldGet(this, _HOODialog_backdropClick, "f"));
}
else {
throw new Error(`Invalid dialog type specified for ${__classPrivateFieldGet(this, _HOODialog_dialog, "f")}`);
}
if (__classPrivateFieldGet(this, _HOODialog_closer, "f")) {
__classPrivateFieldGet(this, _HOODialog_closer, "f").addEventListener('click', __classPrivateFieldGet(this, _HOODialog_closeDialog, "f"));
}
const autofocus = __classPrivateFieldGet(this, _HOODialog_dialog, "f").querySelector('[autofocus]');
if (autofocus) {
console.debug('No Autofocus');
__classPrivateFieldGet(this, _HOODialog_dialog, "f").focus();
}
// Capture close on ESC click
__classPrivateFieldGet(this, _HOODialog_dialog, "f").addEventListener('keydown', __classPrivateFieldGet(this, _HOODialog_keyboardClose, "f"));
}
/**
* Handle clicks on the dialog backdrop
*/
);
/**
* Handle clicks on the dialog backdrop
*/
_HOODialog_backdropClick.set(this, (event) => {
const rect = __classPrivateFieldGet(this, _HOODialog_dialog, "f").getBoundingClientRect();
const isInDialog = (rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width);
if (!isInDialog && event.target === __classPrivateFieldGet(this, _HOODialog_dialog, "f")) {
__classPrivateFieldGet(this, _HOODialog_dialog, "f").close();
}
}
/**
* Close the dialog on keyCode ESC
*/
);
/**
* Close the dialog on keyCode ESC
*/
_HOODialog_keyboardClose.set(this, (event) => {
if (event.keyCode === 27) {
__classPrivateFieldGet(this, _HOODialog_dialog, "f").close();
}
}
/**
* Close the dialog used for custom event or close button
*/
);
/**
* Close the dialog used for custom event or close button
*/
_HOODialog_closeDialog.set(this, (event) => {
console.debug('closing dialog');
__classPrivateFieldGet(this, _HOODialog_dialog, "f").close();
}
/**
* Constructor for HOODialog
* @param launcher - CSS selector for the element that opens the dialog
* @param dialog - CSS selector for the dialog element
* @param dialogType - Type of dialog (DIALOG or MODAL)
* @param options - Configuration options
*/
);
console.debug("Register dialog", dialogType);
// query DOM elements
const launchElement = document.querySelector(launcher);
const dialogElement = document.querySelector(dialog);
if (!launchElement) {
throw new Error(`Launcher '${launcher}' Element cannot be found`);
}
__classPrivateFieldSet(this, _HOODialog_launcher, launchElement, "f");
if (!dialogElement) {
throw new Error(`Dialog '${dialog}' Element not found`);
}
__classPrivateFieldSet(this, _HOODialog_dialog, dialogElement, "f");
__classPrivateFieldGet(this, _HOODialog_launcher, "f").addEventListener('click', __classPrivateFieldGet(this, _HOODialog_showDialog, "f"));
__classPrivateFieldSet(this, _HOODialog_dialogType, dialogType, "f");
// Handle options with proper defaults
__classPrivateFieldSet(this, _HOODialog_options, {
closer: options.closer === undefined ? null : options.closer,
backdropCloser: options.backdropCloser === undefined ? true : options.backdropCloser,
escCloser: options.escCloser === undefined ? true : options.escCloser
}, "f");
// in case a close button is defined for the dialog
if (options.closer !== null) {
const closerElement = dialogElement.querySelector(options.closer);
__classPrivateFieldGet(this, _HOODialog_options, "f").closer = options.closer;
if (closerElement) {
__classPrivateFieldSet(this, _HOODialog_closer, closerElement, "f");
}
}
console.debug('AFTER LAUNCH ::: ', __classPrivateFieldGet(this, _HOODialog_dialogType, "f"), __classPrivateFieldGet(this, _HOODialog_launcher, "f"), __classPrivateFieldGet(this, _HOODialog_dialog, "f"), __classPrivateFieldGet(this, _HOODialog_closer, "f"));
}
}
_HOODialog_launcher = new WeakMap(), _HOODialog_dialog = new WeakMap(), _HOODialog_dialogType = new WeakMap(), _HOODialog_closer = new WeakMap(), _HOODialog_options = new WeakMap(), _HOODialog_showDialog = new WeakMap(), _HOODialog_backdropClick = new WeakMap(), _HOODialog_keyboardClose = new WeakMap(), _HOODialog_closeDialog = new WeakMap();
/** Default options for modal dialog */
HOODialog.options = {
closer: null,
backdropCloser: true,
escCloser: true
};
/**
* Enum of available dialog types
*/
HOODialog.dialogType = exports.DialogType;
exports.HOODialog = HOODialog;