@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
75 lines (72 loc) • 2.9 kB
JavaScript
// src/internal/offset.ts
function getOffset(element, parent) {
return {
top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
};
}
// src/internal/scroll.ts
var locks = /* @__PURE__ */ new Set();
function getScrollbarWidth() {
const documentWidth = document.documentElement.clientWidth;
return Math.abs(window.innerWidth - documentWidth);
}
function getExistingBodyPadding() {
const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ""));
if (isNaN(padding) || !padding) {
return 0;
}
return padding;
}
function lockBodyScrolling(lockingEl) {
locks.add(lockingEl);
if (!document.documentElement.classList.contains("syn-scroll-lock")) {
const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
scrollbarGutterProperty = "stable";
}
if (scrollbarWidth < 2) {
scrollbarGutterProperty = "";
}
document.documentElement.style.setProperty("--syn-scroll-lock-gutter", scrollbarGutterProperty);
document.documentElement.classList.add("syn-scroll-lock");
document.documentElement.style.setProperty("--syn-scroll-lock-size", `${scrollbarWidth}px`);
}
}
function unlockBodyScrolling(lockingEl) {
locks.delete(lockingEl);
if (locks.size === 0) {
document.documentElement.classList.remove("syn-scroll-lock");
document.documentElement.style.removeProperty("--syn-scroll-lock-size");
}
}
function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
const offset = getOffset(element, container);
const offsetTop = offset.top + container.scrollTop;
const offsetLeft = offset.left + container.scrollLeft;
const minX = container.scrollLeft;
const maxX = container.scrollLeft + container.offsetWidth;
const minY = container.scrollTop;
const maxY = container.scrollTop + container.offsetHeight;
if (direction === "horizontal" || direction === "both") {
if (offsetLeft < minX) {
container.scrollTo({ left: offsetLeft, behavior });
} else if (offsetLeft + element.clientWidth > maxX) {
container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
}
}
if (direction === "vertical" || direction === "both") {
if (offsetTop < minY) {
container.scrollTo({ top: offsetTop, behavior });
} else if (offsetTop + element.clientHeight > maxY) {
container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
}
}
}
export {
lockBodyScrolling,
unlockBodyScrolling,
scrollIntoView
};
//# sourceMappingURL=chunk.5732DMBC.js.map