Adds IntersectionObserver and IntersectionObserverEntry

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.20.0
+
+* Added binding for `IntersectionObserver` and `IntersectionObserverEntry`
+
 ### 0.19.2
 
 * Removed peer dependency on `bsdoc`

lib/js/tests/Webapi/Webapi__IntersectionObserver__test.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var Belt_Option = require("bs-platform/lib/js/belt_Option.js");
+var Caml_option = require("bs-platform/lib/js/caml_option.js");
+var TestHelpers = require("../testHelpers.js");
+var Webapi__Dom__Document = require("../../src/Webapi/Dom/Webapi__Dom__Document.js");
+
+var el = document.createElement("div");
+
+var body = TestHelpers.unsafelyUnwrapOption(Belt_Option.flatMap(Webapi__Dom__Document.asHtmlDocument(document), (function (prim) {
+            return Caml_option.nullable_to_opt(prim.body);
+          })));
+
+el.innerText = "Hello There";
+
+el.setAttribute("style", "margin-top: 800px; margin-bottom: 800px;");
+
+body.appendChild(el);
+
+function handler(entries, observer) {
+  entries.forEach((function (entry) {
+          console.log(entry.time);
+          console.log(entry.rootBounds);
+          console.log(entry.boundingClientRect);
+          console.log(entry.intersectionRect);
+          console.log(entry.isIntersecting);
+          console.log(entry.intersectionRatio);
+          console.log(entry.target);
+
+        }));
+  observer.unobserve(el);
+
+}
+
+var observer = new IntersectionObserver(handler);
+
+observer.observe(el);
+
+observer.unobserve(el);
+
+observer.observe(el);
+
+observer.disconnect();
+
+exports.el = el;
+exports.body = body;
+exports.handler = handler;
+exports.observer = observer;
+/* el Not a pure module */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bs-webapi",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "Reason + BuckleScript bindings to DOM",
   "repository": {
     "type": "git",

src/Webapi.re

@@ -26,6 +26,8 @@ module Performance = Webapi__Performance;
 /** @since 0.19.0 */
 module ReadableStream = Webapi__ReadableStream;
 
+/** @since 0.20.0 */
+module IntersectionObserver = Webapi__IntersectionObserver;
 module ResizeObserver = Webapi__ResizeObserver;
 module Url = Webapi__Url;
 

src/Webapi/IntersectionObserver/Webapi__IntersectionObserver__IntersectionObserverEntry.re

@@ -0,0 +1,15 @@
+/**
+ * Spec: https://www.w3.org/TR/intersection-observer/#intersection-observer-entry
+ */
+
+type t; // TODO: Dom.intersectionObserverEntry
+
+/* Properties */
+
+[@bs.get] external time: t => float = "time";
+[@bs.get] external rootBounds: t => Dom.domRect = "rootBounds";
+[@bs.get] external boundingClientRect: t => Dom.domRect = "boundingClientRect";
+[@bs.get] external intersectionRect: t => Dom.domRect = "intersectionRect";
+[@bs.get] external isIntersecting: t => bool = "isIntersecting";
+[@bs.get] external intersectionRatio: t => float = "intersectionRatio";
+[@bs.get] external target: t => Dom.element = "target";

src/Webapi/ResizeObserver/Webapi__ResizeObserver__ResizeObserverEntry.re

@@ -1,4 +1,4 @@
-type t;
+type t; // TODO: Dom.resizeObserverEntry
 
 [@bs.get] external contentRect: t => Dom.domRect = "";
 [@bs.get] external target: t => Dom.element = "";

src/Webapi/Webapi__IntersectionObserver.re

@@ -0,0 +1,36 @@
+/**
+ * Spec: https://www.w3.org/TR/intersection-observer/
+ */
+/** @since 0.20.0 */
+module IntersectionObserverEntry = Webapi__IntersectionObserver__IntersectionObserverEntry;
+
+type t; // TODO: Dom.intersectionObserver
+
+type init = {
+  root: option(Dom.element),
+  rootMargin: option(string),
+  threshold: option(array(float)) // between 0 and 1.
+};
+
+[@bs.obj]
+external makeInit: (~root: Dom.element=?, ~rootMargin: string=?, ~threshold: array(float)=?, unit) => init;
+
+[@bs.new]
+external make: ((. array(IntersectionObserverEntry.t), t) => unit) => t = "IntersectionObserver";
+
+[@bs.new]
+external makeWithInit: ((. array(IntersectionObserverEntry.t), t) => unit, init) => t = "IntersectionObserver";
+
+/* Properties */
+
+[@bs.get] [@bs.return nullable]
+external root: t => option(Dom.element) = "root";
+[@bs.get] external rootMargin: t => string = "rootMargin";
+[@bs.get] external thresholds: t => array(float) = "thresholds";
+
+/* Methods */
+
+[@bs.send] external disconnect: t => unit = "disconnect";
+[@bs.send] external observe: (t, Dom.element) => unit = "observe";
+[@bs.send] external unobserve: (t, Dom.element) => unit = "unobserve";
+[@bs.send] external takeRecords: t => array(IntersectionObserverEntry.t) = "takeRecords";

src/Webapi/Webapi__ResizeObserver.re

@@ -1,6 +1,6 @@
 module ResizeObserverEntry = Webapi__ResizeObserver__ResizeObserverEntry;
 
-type t;
+type t; // TODO: Dom.resizeObserver
 
 [@bs.new]
 external make: (array(ResizeObserverEntry.t) => unit) => t = "ResizeObserver";

tests/Webapi/Webapi__IntersectionObserver__test.re

@@ -0,0 +1,31 @@
+let el = Webapi.Dom.document |> Webapi.Dom.Document.createElement("div");
+
+let body =
+  Webapi.Dom.Document.asHtmlDocument(Webapi.Dom.document)->Belt.Option.flatMap(Webapi.Dom.HtmlDocument.body)->TestHelpers.unsafelyUnwrapOption;
+
+Webapi.Dom.Element.setInnerText(el, "Hello There");
+Webapi.Dom.Element.setAttribute("style", "margin-top: 800px; margin-bottom: 800px;", el);
+Webapi.Dom.Element.appendChild(el, body);
+
+let handler =
+  (. entries, observer) => {
+    Js.Array.forEach(entry => {
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.time(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.rootBounds(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.boundingClientRect(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.intersectionRect(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.isIntersecting(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.intersectionRatio(entry));
+      Js.log(Webapi.IntersectionObserver.IntersectionObserverEntry.target(entry));
+    }, entries);
+
+    Webapi.IntersectionObserver.unobserve(observer, el);
+  };
+
+let observer =
+  Webapi.IntersectionObserver.make(handler);
+
+Webapi.IntersectionObserver.observe(observer, el);
+Webapi.IntersectionObserver.unobserve(observer, el);
+Webapi.IntersectionObserver.observe(observer, el);
+Webapi.IntersectionObserver.disconnect(observer);