@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
93 lines (92 loc) • 3.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { autoUpdate } from "@floating-ui/dom";
import { alignFloatingElements } from "../../../utils/align-floating-elements";
export class PopoverController {
constructor() {
this.show = false;
this.align = 'bottom';
this.setPopoverElementRef = (element) => {
this.popoverElement = element;
this.arrowElement = element === null || element === void 0 ? void 0 : element.querySelector('.kol-popover__arrow');
};
this.setTriggerElement = (element) => {
this.triggerElement = element;
};
this.setAlign = (align) => {
this.align = align;
};
this.alignPopover = async () => {
if (!this.popoverElement || !this.triggerElement) {
return;
}
await alignFloatingElements({
align: this.align,
referenceElement: this.triggerElement,
arrowElement: this.arrowElement,
floatingElement: this.popoverElement,
});
};
this.setupAutoUpdate = () => {
if (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {
return;
}
this.cleanupAutoUpdate = autoUpdate(this.triggerElement, this.popoverElement, () => {
void this.alignPopover();
});
};
}
setShow(value) {
this.show = value;
if (!this.popoverElement) {
return;
}
const toggleVisibility = () => {
var _a;
if (!this.popoverElement) {
return;
}
const isOpen = this.popoverElement.matches(':popover-open');
if (this.show) {
if (!isOpen) {
try {
this.popoverElement.showPopover();
this.setupAutoUpdate();
void this.alignPopover();
}
catch (_b) {
}
}
}
else {
if (isOpen) {
try {
this.popoverElement.hidePopover();
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
this.cleanupAutoUpdate = undefined;
}
catch (_c) {
}
}
}
};
if (this.popoverElement.isConnected) {
toggleVisibility();
}
else {
requestAnimationFrame(() => {
toggleVisibility();
});
}
}
destroy() {
var _a;
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
this.cleanupAutoUpdate = undefined;
this.popoverElement = undefined;
this.arrowElement = undefined;
this.triggerElement = undefined;
}
}
//# sourceMappingURL=controller.js.map