Port getBoundingClientRect from web-html

CHANGELOG.md

@@ -7,6 +7,7 @@ Notable changes to this project are documented in this file. The format is based
 Breaking changes:
 - Migrate FFI to ES modules (#51 by @JordanMartinez)
 - Unwrap returned `Effect` for `doctype` (#52 by @JordanMartinez)
+- Port `getBoundingClientRect` from `web-html`; set arg to `Element` (#53 by @JordanMartinez)
 
 New features:
 

src/Web/DOM/Element.js

@@ -185,6 +185,22 @@ export function clientHeight(el) {
   };
 }
 
+export function getBoundingClientRect(el) {
+  return function () {
+    var rect = el.getBoundingClientRect();
+    return {
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      x: rect.x,
+      y: rect.y
+    };
+  };
+}
+
 export function _attachShadow(props) {
   return function (el) {
     return function() {

src/Web/DOM/Element.purs

@@ -38,6 +38,8 @@ module Web.DOM.Element
   , clientLeft
   , clientWidth
   , clientHeight
+  , getBoundingClientRect
+  , DOMRect
   , ShadowRootInit
   , attachShadow
   ) where
@@ -144,6 +146,19 @@ foreign import clientLeft :: Element -> Effect Number
 foreign import clientWidth :: Element -> Effect Number
 foreign import clientHeight :: Element -> Effect Number
 
+type DOMRect =
+  { top :: Number
+  , right :: Number
+  , bottom :: Number
+  , left :: Number
+  , width :: Number
+  , height :: Number
+  , x :: Number
+  , y :: Number
+  }
+
+foreign import getBoundingClientRect :: Element -> Effect DOMRect
+
 type ShadowRootInit = {
   mode :: ShadowRootMode,
   delegatesFocus :: Boolean