adding intersection observer for handled zones

Author: pilgreen

demo/story/index.html

@@ -24,6 +24,9 @@
       // Listen for the loaded event
       window.addEventListener("zones-loaded", console.log("zones are loaded"));
 
+      // Listen for the intersection event
+      window.addEventListener("zone", (e) => console.log("%s showing", e.detail.id));
+
       // Demo-only show vips
       import { getValidInsertionPoints } from "/lib/zones.js";
       const vips = getValidInsertionPoints();

lib/zones.js

@@ -5,6 +5,7 @@
 // Internals
 let map = new Map();
 let fragment = new DocumentFragment();
+let observer = new IntersectionObserver(handleIntersection, { rootMargin: "500px" })
 
 // Locker
 export let locker;
@@ -129,6 +130,9 @@ export class Zone {
       this.element.dataset.distributed = true;
       this.vip.insertAdjacentElement(loc, this.element);
       this.log(this.msg || "zone moved into new location");
+
+      // Observer for performance team
+      observer.observe(this.element);
     }
   }
 
@@ -450,3 +454,26 @@ export async function loadConfig(url) {
 
   return config;
 }
+
+/*
+ * IntersectionObserver callback
+ */
+
+function handleIntersection(entries, observer) {
+  entries.forEach((entry) => {
+    if(entry.isIntersecting) {
+      // Build the event
+      const loadZone = new CustomEvent("zone", {
+        detail: {
+          id: entry.target.id
+        }
+      });
+
+      // Send it
+      window.dispatchEvent(loadZone);
+
+      // Only do it once
+      observer.unobserve(entry.target);
+    }
+  });
+}