@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
72 lines • 2.07 kB
JavaScript
import { onMounted, onUnmounted, ref, unref, watch, toValue } from 'vue';
export function useIntersectionObserver(callback, options = {}) {
const optionsRef = ref(options);
const elements = new Set();
let intersectionObserver = null;
function observe(element) {
const value = toValue(element);
const observer = getObserver();
if (value) {
observer.observe(value);
elements.add(value);
}
}
function unobserve(element) {
const value = toValue(element);
const observer = getObserver();
if (value) {
observer.unobserve(value);
elements.delete(value);
}
}
function disconnect() {
const observer = getObserver();
observer.disconnect();
elements.clear();
}
function getOptions({ root, rootMargin, threshold }) {
return {
root: unref(root),
rootMargin,
threshold,
};
}
function check(element) {
const value = toValue(element);
if (!value) {
return;
}
const observer = new IntersectionObserver(callback, getOptions(optionsRef.value));
observer.observe(value);
setTimeout(() => observer.disconnect(), 100);
}
function getObserver() {
if (!intersectionObserver) {
createObserver();
}
return intersectionObserver;
}
function createObserver() {
if (intersectionObserver) {
intersectionObserver.disconnect();
}
intersectionObserver = new IntersectionObserver(callback, getOptions(optionsRef.value));
elements.forEach(element => intersectionObserver.observe(element));
}
onMounted(() => {
createObserver();
});
onUnmounted(() => {
disconnect();
});
watch(optionsRef, () => {
createObserver();
});
return {
observe,
disconnect,
unobserve,
check,
};
}
//# sourceMappingURL=useIntersectionObserver.js.map