@studiometa/js-toolkit/decorators/withIntersectionObserver.js

A set of useful little bits of JavaScript to boost your project! 🚀

import { createRange } from "../utils/index.js";
function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createRange(0, 1, 0.01) }) {
  class WithIntersectionObserver extends BaseClass {
    /**
     * Config
     */
    static config = {
      ...BaseClass.config,
      options: {
        intersectionObserver: Object
      },
      emits: ["intersected"]
    };
    /**
     * Intersection observer instance.
     */
    $observer;
    /**
     * Create an observer when the class in instantiated.
     */
    constructor(element) {
      super(element);
      this.$observer = new IntersectionObserver(
        (entries) => {
          this.__callMethod("intersected", entries);
        },
        {
          ...defaultOptions,
          ...this.$options.intersectionObserver
        }
      );
      this.$on("mounted", () => {
        this.$observer.observe(this.$el);
      });
      this.$on("destroyed", () => {
        this.$observer.unobserve(this.$el);
      });
    }
  }
  return WithIntersectionObserver;
}
export {
  withIntersectionObserver
};
//# sourceMappingURL=withIntersectionObserver.js.map