IntersectionObserver Batched With rootMargin

// makeBatchedVisibilityTracker: a single IntersectionObserver shared by every
// element you want to track. The callback fires with arrays of newly-visible
// and newly-hidden nodes, so a feed can mark 50 cards 'in view' in one render.

function makeBatchedVisibilityTracker({ rootMargin = '0px', threshold = 0 } = {}) {
    const visible = new Set();
    const listeners = new Set();

    const observer = new IntersectionObserver(
        (entries) => {
            const newlyIn = [];
            const newlyOut = [];
            for (const entry of entries) {
                const target = entry.target;
                const wasVisible = visible.has(target);
                if (entry.isIntersecting && !wasVisible) {
                    visible.add(target);
                    newlyIn.push(target);
                } else if (!entry.isIntersecting && wasVisible) {
                    visible.delete(target);
                    newlyOut.push(target);
                }
            }
            if (newlyIn.length || newlyOut.length) {
                for (const fn of listeners) fn({ newlyIn, newlyOut });
            }
        },
        { rootMargin, threshold },
    );

    return {
        track(el) { observer.observe(el); },
        untrack(el) { observer.unobserve(el); visible.delete(el); },
        onChange(fn) { listeners.add(fn); return () => listeners.delete(fn); },
        destroy() { observer.disconnect(); listeners.clear(); visible.clear(); },
    };
}

// Drive it with a stub IntersectionObserver since the playground has no real DOM.
let capturedCallback = null;
class StubIO {
    constructor(cb) { capturedCallback = cb; }
    observe() {}
    unobserve() {}
    disconnect() {}
}
globalThis.IntersectionObserver = StubIO;

const tracker = makeBatchedVisibilityTracker();
const nodes = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
for (const n of nodes) tracker.track(n);
tracker.onChange((evt) => {
    console.log('newly in :', evt.newlyIn.map((n) => n.id));
    console.log('newly out:', evt.newlyOut.map((n) => n.id));
});

// Simulate the browser delivering a batch.
capturedCallback([
    { target: nodes[0], isIntersecting: true },
    { target: nodes[1], isIntersecting: true },
    { target: nodes[2], isIntersecting: false },
]);
capturedCallback([
    { target: nodes[0], isIntersecting: false },
    { target: nodes[2], isIntersecting: true },
]);

// The feed loads images when they enter the viewport, but the user perceives
// pop-in if we wait for true visibility. rootMargin lets us 'expand' the
// observation rectangle by 200px below, so we preload while the card is still
// 200px below the fold.

let capturedOptions = null;
let capturedCallback = null;
class StubIO {
    constructor(cb, options) { capturedCallback = cb; capturedOptions = options; }
    observe() {} unobserve() {} disconnect() {}
}
globalThis.IntersectionObserver = StubIO;

function makeLazyLoader({ rootMargin = '200px 0px 200px 0px' } = {}) {
    const observer = new IntersectionObserver(
        (entries) => {
            for (const entry of entries) {
                if (entry.isIntersecting) {
                    const el = entry.target;
                    if (el.dataset.src && !el.src) {
                        el.src = el.dataset.src;
                        observer.unobserve(el);  // we only need one shot
                    }
                }
            }
        },
        { rootMargin, threshold: 0 },
    );
    return {
        observe(el) { observer.observe(el); },
        destroy() { observer.disconnect(); },
    };
}

const loader = makeLazyLoader();
console.log('rootMargin in use:', capturedOptions.rootMargin);
const img = { dataset: { src: 'photo.jpg' }, src: '' };
loader.observe(img);
capturedCallback([{ target: img, isIntersecting: true }]);
console.log('image src after intersection:', img.src);

// thresholds let you fire callbacks at intermediate visibility ratios. We
// use this to crossfade between 'incoming' and 'outgoing' states for hero
// sections in a long-form article. threshold: [0, 0.25, 0.5, 0.75, 1] gives
// you five callbacks per scroll past, which is enough resolution for an opacity
// curve without becoming jittery.

let capturedCallback = null;
let capturedOptions = null;
class StubIO {
    constructor(cb, options) { capturedCallback = cb; capturedOptions = options; }
    observe() {} unobserve() {} disconnect() {}
}
globalThis.IntersectionObserver = StubIO;

function smoothlyTrack(target, onRatio) {
    const observer = new IntersectionObserver(
        (entries) => {
            for (const e of entries) {
                if (e.target === target) onRatio(e.intersectionRatio);
            }
        },
        { threshold: [0, 0.25, 0.5, 0.75, 1] },
    );
    observer.observe(target);
    return () => observer.disconnect();
}

const hero = { id: 'hero' };
const opacityFromRatio = (r) => Math.round(r * 100) + '%';
smoothlyTrack(hero, (r) => console.log('opacity ->', opacityFromRatio(r)));

console.log('thresholds in use:', capturedOptions.threshold);
for (const r of [0, 0.25, 0.5, 0.75, 1]) {
    capturedCallback([{ target: hero, intersectionRatio: r }]);
}