@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
42 lines (41 loc) • 1.93 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
import { isTestMode } from "../schema";
export const alignFloatingElements = async ({ floatingElement, referenceElement, arrowElement, align = 'top' }) => {
var _a, _b, _c;
if (!isTestMode()) {
const middleware = [offset((_a = arrowElement === null || arrowElement === void 0 ? void 0 : arrowElement.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
if (arrowElement) {
middleware.push(arrow({ element: arrowElement }));
}
const { x, y, middlewareData, placement } = await computePosition(referenceElement, floatingElement, {
placement: align,
middleware: middleware,
strategy: 'fixed',
});
Object.assign(floatingElement.style, {
left: `${x}px`,
top: `${y}px`,
visibility: 'visible',
});
if (arrowElement) {
if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) {
Object.assign(arrowElement.style, {
left: `${middlewareData.arrow.x}px`,
top: placement === 'bottom' ? `${-arrowElement.offsetHeight / 2}px` : '',
bottom: placement === 'top' ? `${-arrowElement.offsetHeight / 2}px` : '',
});
}
else if ((_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y) {
Object.assign(arrowElement.style, {
left: placement === 'right' ? `${-arrowElement.offsetWidth / 2}px` : '',
right: placement === 'left' ? `${-arrowElement.offsetWidth / 2}px` : '',
top: `${middlewareData.arrow.y}px`,
});
}
}
}
};
//# sourceMappingURL=align-floating-elements.js.map