wotsui-vue-directives/lib/directives/on-intersection.js

Vue Directives for WotsUI

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const intersection_js_1 = require("../hooks/intersection.js");
function onIntersection(el, binding) {
    const settings = initSettings(binding);
    const observer = new IntersectionObserver(handleIntersection, {
        threshold: settings.treshold,
    });
    intersection_js_1.setIntersectionClasses(el, settings, false);
    observer.observe(el);
    bindsMap.set(el, settings);
}
exports.default = onIntersection;
function initSettings(binding) {
    const settings = {
        ...intersection_js_1.intersectionSettings,
        emit: false,
    };
    if (typeof binding.value === 'object') {
        Object.assign(settings, binding.value);
    }
    if (binding.modifiers.emit) {
        settings.emit = true;
    }
    return settings;
}
function handleIntersection(entries, observer) {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            const el = entry.target;
            const settings = bindsMap.get(el);
            if (!settings) {
                observer.unobserve(el);
                return;
            }
            intersection_js_1.setIntersectionClasses(el, settings, true);
            if (typeof settings.callback === 'function') {
                settings.callback();
            }
            if (settings.emit) {
                const event = new CustomEvent('intersection');
                el.dispatchEvent(event);
            }
            bindsMap.delete(el);
            observer.unobserve(el);
        }
    });
}
const bindsMap = new Map();