@stimulus-library/mixins/dist/use_intersection.js

A library of useful controllers for Stimulus

import { useMixin } from "./use_mixin";
export function useIntersectionObserver(controller, handler, options) {
    handler = handler.bind(controller);
    let observer = new IntersectionObserver(handler, options);
    const teardown = () => {
        observer === null || observer === void 0 ? void 0 : observer.disconnect();
        observer = null;
    };
    const observe = (element) => observer === null || observer === void 0 ? void 0 : observer.observe(element);
    const unobserve = (element) => observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
    return {
        observer,
        teardown,
        observe,
        unobserve,
    };
}
export function useIntersection(controller, element, appear, disappear, options) {
    if (appear) {
        appear = appear.bind(controller);
    }
    if (disappear) {
        disappear = disappear.bind(controller);
    }
    const opts = options !== null && options !== void 0 ? options : {};
    const processEntries = (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                appear && appear(entry);
            }
            else {
                disappear && disappear(entry);
            }
        });
    };
    const { observer, observe, unobserve, teardown } = useIntersectionObserver(controller, processEntries, opts);
    const setup = () => observe(element);
    useMixin(controller, setup, teardown);
    return {
        observer,
        observe: () => observe(element),
        unobserve: () => unobserve(element),
        teardown,
    };
}