feat(rescript-intersection-observer): add new observer with option

r17x · Aug 12, 2022 · 51f692a · 51f692a
1 parent 798ef40
commit 51f692a
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 0 deletions.
diff --git a/examples/dev/dev__intersection.js b/examples/dev/dev__intersection.js
diff --git a/examples/dev/dev__intersection.res b/examples/dev/dev__intersection.res
@@ -23,6 +23,32 @@ let observer = Intersection.Observer.new(entries => {
   }
 })
 
+let observerWithOptions = Intersection.Observer.newWithOption(entries => {
+  switch entries {
+  | [head] => {
+      head->Intersection.ObserverEntry.intersectionRatio->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.x->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.width->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.height->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.top->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.right->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.bottom->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.left->Js.log
+      head->Intersection.ObserverEntry.boundingClientRect->DOMRect.toJson->Js.log
+      head->Intersection.ObserverEntry.time->Js.log
+      head->Intersection.ObserverEntry.isVisible->Js.log
+      head->Intersection.ObserverEntry.target->Js.log
+      let rect = DOMRect.rect(~x=1.0, ~y=2.0, ())
+      rect->DOMRect.fromRect->Js.log
+    }
+  | _ => ()
+  }
+}, Intersection.ObserverInit.new(~rootMargin="0px", ()))
+
+observerWithOptions->Intersection.Observer.observe(htmlDom())
+
+observerWithOptions->Intersection.Observer.unobserve(htmlDom())
+
 observer->Intersection.Observer.observe(htmlDom())
 
 observer->Intersection.Observer.unobserve(htmlDom())

diff --git a/rescript-intersection-observer/src/Intersection.js b/rescript-intersection-observer/src/Intersection.js
diff --git a/rescript-intersection-observer/src/Intersection.res b/rescript-intersection-observer/src/Intersection.res
@@ -20,11 +20,27 @@ module ObserverEntry = {
   external time: t => float = "time"
 }
 
+module ObserverInit = {
+  type t
+
+  @obj
+  external new: (
+    ~root: Dom.element=?,
+    ~rootMargin: string=?,
+    ~thresholds: array<float>=?,
+    unit,
+  ) => t = ""
+}
+
 module Observer = {
   type t = Dom.intersectionObserver
 
   @new
   external new: (array<ObserverEntry.t> => unit) => t = "IntersectionObserver"
+
+  @new
+  external newWithOption: (array<ObserverEntry.t> => unit, ObserverInit.t) => t =
+    "IntersectionObserver"
   // properties
 
   // TODO: intersectionObserver.root return Dom.element or Dom.document