gatsby-background-image/IntersectionObserverUtils.js

Lazy-loading React background-image component with optional support for the blur-up effect.

"use strict";

exports.__esModule = true;
exports.listenToIntersections = exports.getIO = exports.callbackIO = void 0;
var io;
var listeners = [];

var callbackIO = function callbackIO(entries) {
  entries.forEach(function (entry) {
    listeners.forEach(function (l) {
      if (l[0] === entry.target) {
        // Edge doesn't currently support isIntersecting, so also test for an intersectionRatio > 0
        if (entry.isIntersecting || entry.intersectionRatio > 0) {
          io.unobserve(l[0]);
          l[1]();
        }
      }
    });
  });
};

exports.callbackIO = callbackIO;

var getIO = function getIO() {
  if (typeof io === "undefined" && typeof window !== "undefined" && window.IntersectionObserver) {
    io = new window.IntersectionObserver(callbackIO, {
      rootMargin: "200px"
    });
  }

  return io;
};

exports.getIO = getIO;

var listenToIntersections = function listenToIntersections(el, cb) {
  getIO().observe(el);
  listeners.push([el, cb]);
};

exports.listenToIntersections = listenToIntersections;