Merge pull request #60 from purescript-contrib/scroll-props

Add some CSSOM scroll properties for elements

Author: garyb

README.md

@@ -17,7 +17,7 @@ bower install purescript-dom
 
 `purescript-dom` is intended to provide a common base for projects that need to talk to or about the DOM.
 
-The API isn't primarily intended for "human consumption", but instead aims to provide functions and types that match up with the interfaces described in the [DOM4](http://www.w3.org/TR/dom/) and [HTML5](http://www.w3.org/TR/html5/) specifications, with a minimal amount of additional opinion as to how they should be implemented in PureScript.
+The API isn't primarily intended for "human consumption", but instead aims to provide functions and types that match up with the interfaces described in the [DOM4](http://www.w3.org/TR/dom/), [HTML5](http://www.w3.org/TR/html5/), and [CSSOM](https://www.w3.org/TR/cssom-view-1/) specifications, with a minimal amount of additional opinion as to how they should be implemented in PureScript.
 
 This consists of:
 - `foreign data` types for the various interfaces described.

src/DOM/HTML/HTMLElement.js

@@ -199,3 +199,41 @@ exports.setSpellcheck = function (spellcheck) {
     };
   };
 };
+
+// - CSSOM ---------------------------------------------------------------------
+
+exports.getBoundingClientRect = function (el) {
+  return function () {
+    return el.getBoundingClientRect();
+  };
+};
+
+exports.offsetParent = function (el) {
+  return function () {
+    return el.offsetParent;
+  };
+};
+
+exports.offsetTop = function (el) {
+  return function () {
+    return el.offsetTop;
+  };
+};
+
+exports.offsetLeft = function (el) {
+  return function () {
+    return el.offsetLeft;
+  };
+};
+
+exports.offsetWidth = function (el) {
+  return function () {
+    return el.offsetWidth;
+  };
+};
+
+exports.offsetHeight = function (el) {
+  return function () {
+    return el.offsetHeight;
+  };
+};

src/DOM/HTML/HTMLElement.purs

@@ -2,8 +2,10 @@ module DOM.HTML.HTMLElement where
 
 import Prelude
 import Control.Monad.Eff (Eff)
+import Data.Nullable (Nullable)
 import DOM (DOM)
 import DOM.HTML.Types (HTMLElement)
+import DOM.Node.Types (Element)
 
 foreign import title :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) String
 foreign import setTitle :: forall eff. String -> HTMLElement -> Eff (dom :: DOM | eff) Unit
@@ -36,3 +38,22 @@ foreign import setSpellcheck :: forall eff. Boolean -> HTMLElement -> Eff (dom :
 foreign import click :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Unit
 foreign import focus :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Unit
 foreign import blur :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Unit
+
+foreign import getBoundingClientRect
+  :: forall eff
+   . HTMLElement
+  -> Eff
+      (dom :: DOM | eff)
+      { left :: Number
+      , top :: Number
+      , right :: Number
+      , bottom :: Number
+      , width :: Number
+      , height :: Number
+      }
+
+foreign import offsetParent :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) (Nullable Element)
+foreign import offsetTop :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Number
+foreign import offsetLeft :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Number
+foreign import offsetWidth :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Number
+foreign import offsetHeight :: forall eff. HTMLElement -> Eff (dom :: DOM | eff) Number

src/DOM/Node/Element.js

@@ -94,3 +94,71 @@ exports.removeAttribute = function (name) {
     };
   };
 };
+
+// - CSSOM ---------------------------------------------------------------------
+
+exports.scrollTop = function (node) {
+  return function () {
+    return node.scrollTop;
+  };
+};
+
+exports.setScrollTop = function (scrollTop) {
+  return function (node) {
+    return function () {
+      node.scrollTop = scrollTop;
+      return {};
+    };
+  };
+};
+
+exports.scrollLeft = function (node) {
+  return function () {
+    return node.scrollLeft;
+  };
+};
+
+exports.setScrollLeft = function (scrollLeft) {
+  return function (node) {
+    return function () {
+      node.scrollLeft = scrollLeft;
+      return {};
+    };
+  };
+};
+
+exports.scrollWidth = function (el) {
+  return function () {
+    return el.scrollWidth;
+  };
+};
+
+exports.scrollHeight = function (el) {
+  return function () {
+    return el.scrollHeight;
+  };
+};
+
+exports.clientTop = function (el) {
+  return function () {
+    return el.clientTop;
+  };
+};
+
+exports.clientLeft = function (el) {
+  return function () {
+    return el.clientLeft;
+  };
+};
+
+exports.clientWidth = function (el) {
+  return function () {
+    return el.clientWidth;
+  };
+};
+
+exports.clientHeight = function (el) {
+  return function () {
+    return el.clientHeigh;
+  };
+};

src/DOM/Node/Element.purs

@@ -23,3 +23,16 @@ foreign import getElementsByClassName :: forall eff. String -> Element -> Eff (d
 foreign import setAttribute :: forall eff. String -> String -> Element -> Eff (dom :: DOM | eff) Unit
 foreign import getAttribute :: forall eff. String -> Element -> Eff (dom :: DOM | eff) (Nullable String)
 foreign import removeAttribute :: forall eff. String -> Element -> Eff (dom :: DOM | eff) Unit
+
+foreign import scrollTop :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import setScrollTop :: forall eff. Element -> Number -> Eff (dom :: DOM | eff) Unit
+
+foreign import scrollLeft :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import setScrollLeft :: forall eff. Element -> Number -> Eff (dom :: DOM | eff) Unit
+
+foreign import scrollWidth :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import scrollHeight :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import clientTop :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import clientLeft :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import clientWidth :: forall eff. Element -> Eff (dom :: DOM | eff) Number
+foreign import clientHeight :: forall eff. Element -> Eff (dom :: DOM | eff) Number