43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import { debounce } from './utils';
|
|
|
|
export const hideOnScroll = (() => {
|
|
const chartEls = [];
|
|
const showAllDebounced = debounce(showAll, 500, true, false);
|
|
const hideScrolledDebounced = debounce(hideScrolled, 500, false, true);
|
|
|
|
function setup(chartEl) {
|
|
chartEls.push(chartEl);
|
|
|
|
if (chartEls.length === 1) {
|
|
window.onscroll = () => {
|
|
showAllDebounced();
|
|
hideScrolledDebounced();
|
|
};
|
|
} else {
|
|
hideScrolledDebounced();
|
|
}
|
|
}
|
|
|
|
function showAll() {
|
|
chartEls.forEach((chartEl) => {
|
|
chartEl.classList.remove('lovely-chart--state-invisible');
|
|
});
|
|
}
|
|
|
|
function hideScrolled() {
|
|
chartEls.forEach((chartEl) => {
|
|
const { top, bottom } = chartEl.getBoundingClientRect();
|
|
const shouldHide = bottom < 0 || top > window.innerHeight;
|
|
|
|
if (!chartEl.classList.contains('lovely-chart--state-invisible')) {
|
|
chartEl.style.width = `${chartEl.scrollWidth}px`;
|
|
chartEl.style.height = `${chartEl.scrollHeight}px`;
|
|
}
|
|
|
|
chartEl.classList.toggle('lovely-chart--state-invisible', shouldHide);
|
|
});
|
|
}
|
|
|
|
return setup;
|
|
})();
|