Add IntersectionObserverAPI

Author: stephanoskomnenos

src/IntersectionObserverAPI.js

@@ -0,0 +1,66 @@
+@@warning("-30")
+
+open DOMAPI
+
+/**
+provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
+[See IntersectionObserver on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver)
+*/
+@editor.completeFrom(IntersectionObserver)
+type intersectionObserver = {
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
+    */
+  root: Null.t<unknown>,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
+    */
+  rootMargin: string,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)
+    */
+  thresholds: array<float>,
+}
+
+/**
+This Intersection Observer API interface describes the intersection between the target element and its root container at a specific moment of transition.
+[See IntersectionObserverEntry on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry)
+*/
+type intersectionObserverEntry = {
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/time)
+    */
+  time: float,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/rootBounds)
+    */
+  rootBounds: Null.t<domRectReadOnly>,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/boundingClientRect)
+    */
+  boundingClientRect: domRectReadOnly,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/intersectionRect)
+    */
+  intersectionRect: domRectReadOnly,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/isIntersecting)
+    */
+  isIntersecting: bool,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/intersectionRatio)
+    */
+  intersectionRatio: float,
+  /**
+    [Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/target)
+    */
+  target: element,
+}
+
+type intersectionObserverInit = {
+  mutable root?: Null.t<unknown>,
+  mutable rootMargin?: string,
+  mutable threshold?: array<float>,
+}
+
+type intersectionObserverCallback = (array<intersectionObserverEntry>, intersectionObserver) => unit

src/IntersectionObserverAPI.res

@@ -0,0 +1,35 @@
+open DOMAPI
+open IntersectionObserverAPI
+
+/**
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver)
+*/
+@new
+external make: (
+  ~callback: intersectionObserverCallback,
+  ~options: intersectionObserverInit=?,
+) => intersectionObserver = "IntersectionObserver"
+
+/**
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/observe)
+*/
+@send
+external observe: (intersectionObserver, element) => unit = "observe"
+
+/**
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/unobserve)
+*/
+@send
+external unobserve: (intersectionObserver, element) => unit = "unobserve"
+
+/**
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/disconnect)
+*/
+@send
+external disconnect: intersectionObserver => unit = "disconnect"
+
+/**
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/takeRecords)
+*/
+@send
+external takeRecords: intersectionObserver => array<intersectionObserverEntry> = "takeRecords"

src/IntersectionObserverAPI/IntersectionObserver.js

@@ -0,0 +1,24 @@
+let observer = IntersectionObserver.make(~callback=(entry, observer) => {
+  Console.log2(entry, observer)
+})
+
+let observer2 = IntersectionObserver.make(~callback=(entry, observer) => {
+  Console.log2(entry, observer)
+}, ~options={rootMargin: "10px", threshold: [0.1]})
+
+let root2 = observer2.root
+let rootMargin2 = observer2.rootMargin
+
+let targetElement = Global.document->Document.querySelector("#targetElement")->Null.toOption
+switch targetElement {
+| Some(e) => {
+    observer2->IntersectionObserver.observe(e)
+    observer2->IntersectionObserver.unobserve(e)
+  }
+| _ => Console.log("Target element not found.")
+}
+
+let entries2 = observer2->IntersectionObserver.takeRecords
+Console.log(entries2->Array.length)
+
+observer2->IntersectionObserver.disconnect