vira
Version:
A simple and highly versatile design system using element-vir.
38 lines (37 loc) • 1.43 kB
JavaScript
/**
* Creates an observer that monitors whether an element's content overflows its visible width. Uses
* a ResizeObserver for size changes and a MutationObserver for DOM content changes.
*
* @category Util
* @returns A cleanup function that disconnects all observers.
*/
export function createOverflowObserver({ element, widthElement, onChange, hysteresisPx = 0, }) {
const availableWidthElement = widthElement || element;
let isOverflowing = false;
function checkOverflow() {
const contentWidth = element.scrollWidth;
const availableWidth = availableWidthElement.clientWidth;
const threshold = isOverflowing ? -hysteresisPx : hysteresisPx;
const nextOverflowing = contentWidth > availableWidth + threshold;
if (nextOverflowing !== isOverflowing) {
isOverflowing = nextOverflowing;
onChange(isOverflowing);
}
}
const resizeObserver = new ResizeObserver(checkOverflow);
resizeObserver.observe(element);
if (availableWidthElement !== element) {
resizeObserver.observe(availableWidthElement);
}
const mutationObserver = new MutationObserver(checkOverflow);
mutationObserver.observe(element, {
childList: true,
subtree: true,
characterData: true,
});
checkOverflow();
return () => {
resizeObserver.disconnect();
mutationObserver.disconnect();
};
}