handsontable
Version:
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
259 lines (239 loc) • 9.24 kB
JavaScript
import "core-js/modules/es.error.cause.js";
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
import { html } from "../../helpers/templateLiteralTag.mjs";
import { mixin } from "../../helpers/object.mjs";
import localHooks from "../../mixins/localHooks.mjs";
import { addClass, removeClass, hasClass, fastInnerHTML, setAttribute, removeAttribute } from "../../helpers/dom/element.mjs";
import { A11Y_DIALOG, A11Y_MODAL, A11Y_TABINDEX, A11Y_LABEL, A11Y_LABELED_BY, A11Y_DESCRIBED_BY, A11Y_ALERTDIALOG } from "../../helpers/a11y.mjs";
const DIALOG_CLASS_NAME = 'ht-dialog';
const TEMPLATE = `
<div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
<div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
<div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
</div>
</div>
`;
/**
* DialogUI is a UI component that renders and manages dialog elements.
* It handles dialog creation, content updates, visibility toggling, and styling.
*
* @private
* @class DialogUI
*/
var _rootElement = /*#__PURE__*/new WeakMap();
var _refs = /*#__PURE__*/new WeakMap();
var _isRtl = /*#__PURE__*/new WeakMap();
export class DialogUI {
constructor(_ref) {
let {
rootElement,
isRtl
} = _ref;
/**
* The root element where the dialog UI will be installed.
*
* @type {HTMLElement}
*/
_classPrivateFieldInitSpec(this, _rootElement, void 0);
/**
* The references to the UI elements.
*
* @type {object}
*/
_classPrivateFieldInitSpec(this, _refs, void 0);
/**
* Indicates if the UI is in RTL mode.
*
* @type {boolean}
*/
_classPrivateFieldInitSpec(this, _isRtl, false);
_classPrivateFieldSet(_rootElement, this, rootElement);
_classPrivateFieldSet(_isRtl, this, isRtl);
this.install();
}
/**
* Creates the dialog UI elements and sets up the structure.
*/
install() {
var _classPrivateFieldGet2;
if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
return;
}
const elements = html`${TEMPLATE}`;
_classPrivateFieldSet(_refs, this, elements.refs);
const {
dialogElement
} = _classPrivateFieldGet(_refs, this);
dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
// Set ARIA attributes
setAttribute(dialogElement, [A11Y_MODAL(), A11Y_TABINDEX(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
// Append to Handsontable after table grid element
_classPrivateFieldGet(_rootElement, this).after(elements.fragment);
}
/**
* Returns the dialog element.
*
* @returns {HTMLElement} The dialog element.
*/
getDialogElement() {
return _classPrivateFieldGet(_refs, this).dialogElement;
}
/**
* Checks if the given element is inside the dialog.
*
* @param {HTMLElement} element - The element to check.
* @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
*/
isInsideDialog(element) {
return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
}
/**
* Updates the dialog content and class name.
*
* @param {object} options - Class name update options.
* @param {boolean} options.isVisible - Whether the dialog is visible.
* @param {string|HTMLElement} options.content - The content to render in the dialog.
* @param {string} options.customClassName - The custom class name to add to the dialog.
* @param {string} options.background - The background to add to the dialog.
* @param {boolean} options.contentBackground - Whether to show content background.
* @param {boolean} options.animation - Whether to add the animation class to the dialog.
* @param {object} options.a11y - The accessibility options for the dialog.
*
* @returns {DialogUI} The instance of the DialogUI.
*/
updateDialog(_ref2) {
let {
isVisible,
content,
customClassName,
background,
contentBackground,
animation,
a11y
} = _ref2;
const {
dialogElement,
contentElement
} = _classPrivateFieldGet(_refs, this);
// Dialog class name
const customClass = customClassName ? ` ${customClassName}` : '';
const backgroundClass = background ? ` ${DIALOG_CLASS_NAME}--background-${background}` : '';
const animationClass = animation ? ` ${DIALOG_CLASS_NAME}--animation` : '';
const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
// Update dialog class name
dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
// Dialog aria attributes
setAttribute(dialogElement, [a11y.role === 'alertdialog' ? A11Y_ALERTDIALOG() : A11Y_DIALOG()]);
if (a11y.ariaLabel && !a11y.ariaLabelledby) {
setAttribute(dialogElement, [a11y.ariaLabel ? A11Y_LABEL(a11y.ariaLabel) : undefined]);
} else {
removeAttribute(dialogElement, 'aria-label');
}
if (a11y.ariaLabelledby) {
setAttribute(dialogElement, [A11Y_LABELED_BY(a11y.ariaLabelledby)]);
} else {
removeAttribute(dialogElement, 'aria-labelledby');
}
if (a11y.ariaDescribedby) {
setAttribute(dialogElement, [A11Y_DESCRIBED_BY(a11y.ariaDescribedby)]);
} else {
removeAttribute(dialogElement, 'aria-describedby');
}
// Dialog content class name
const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
// Update content class name
contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`;
// Clear existing dialog content
contentElement.innerHTML = '';
// Render new dialog content
if (typeof content === 'string') {
fastInnerHTML(contentElement, content);
} else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
contentElement.appendChild(content);
}
return this;
}
/**
* Shows the dialog with optional animation.
*
* @param {boolean} animation - Whether to add the animation class to the dialog.
* @returns {DialogUI} The instance of the DialogUI.
*/
showDialog(animation) {
const {
dialogElement
} = _classPrivateFieldGet(_refs, this);
dialogElement.style.display = 'block';
if (animation) {
// Triggers style and layout recalculation, so the display: block is fully committed before adding
// the class ht-dialog--show.
// eslint-disable-next-line no-unused-expressions
dialogElement.offsetHeight;
}
addClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
return this;
}
/**
* Hides the dialog with optional animation.
*
* @param {boolean} animation - Whether to add the animation class to the dialog.
* @returns {DialogUI} The instance of the DialogUI.
*/
hideDialog(animation) {
const {
dialogElement
} = _classPrivateFieldGet(_refs, this);
removeClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
if (animation) {
dialogElement.addEventListener('transitionend', () => {
if (!hasClass(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
dialogElement.style.display = 'none';
}
}, {
once: true
});
} else {
dialogElement.style.display = 'none';
}
return this;
}
/**
* Focuses the dialog element.
*/
focusDialog() {
_classPrivateFieldGet(_refs, this).dialogElement.focus();
}
/**
* Updates the width of the dialog container to the same size as the table.
*
* @param {number} width - The width of the table.
* @returns {DialogUI} The instance of the DialogUI.
*/
updateWidth(width) {
_classPrivateFieldGet(_refs, this).dialogElement.style.width = `${width}px`;
return this;
}
/**
* Updates the height of the dialog container.
*
* @param {number} licenseInfoHeight - The height of the license info.
* @returns {DialogUI} The instance of the DialogUI.
*/
updateHeight(licenseInfoHeight) {
_classPrivateFieldGet(_refs, this).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
return this;
}
/**
* Removes the dialog UI elements from the DOM and clears the refs.
*/
destroyDialog() {
var _classPrivateFieldGet3;
(_classPrivateFieldGet3 = _classPrivateFieldGet(_refs, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.dialogElement.remove();
_classPrivateFieldSet(_refs, this, null);
}
}
mixin(DialogUI, localHooks);