Added position related APIs. (#705)

* Added position related things.

- `Dom.offsetLeft`, `Dom.offsetTop`
- `Html.Event.layerX`, `Html.Event.layerY`
- `Html.Event.offsetX`, `Html.Event.offsetY`

Fixes #498

* Use `0` as a fallback value instead of `-1`

core/source/Dom.mint

@@ -590,4 +590,34 @@ module Dom {
   ) : Promise(Void) {
     `#{element}.scrollTo({ behavior: 'smooth', left: #{left}, top: #{top} })`
   }
+
+  /*
+  Returns the distance from the outer border of the element (including its
+  margin) to the left padding edge of the closest positioned ancestor element.
+
+  If the element is not in the DOM or not an element is passed (for example
+  `TextNode`) then the value will be `0`.
+
+    if let Just(div) = Document.getElementBySelector("div") {
+      Dom.offsetLeft(div)
+    }
+  */
+  fun offsetLeft (element : Dom.Element) : Number {
+    `#{element}.offsetLeft || 0`
+  }
+
+  /*
+  Returns the distance from the outer border of the element (including its
+  margin) to the top padding edge of the closest positioned ancestor element.
+
+  If the element is not in the DOM or not an element is passed (for example
+  `TextNode`) then the value will be `0`.
+
+    if let Just(div) = Document.getElementBySelector("div") {
+      Dom.offsetTop(div)
+    }
+  */
+  fun offsetTop (element : Dom.Element) : Number {
+    `#{element}.offsetTop || 0`
+  }
 }

core/source/Html/Event.mint

@@ -42,6 +42,10 @@ type Html.Event {
   clientY : Number,
   screenX : Number,
   screenY : Number,
+  offsetX : Number,
+  offsetY : Number,
+  layerX : Number,
+  layerY : Number,
   pageX : Number,
   pageY : Number,
 

core/tests/tests/Dom.mint

@@ -152,3 +152,21 @@ suite "Dom.getChildren" {
       (element : Dom.Element) { Array.size(Dom.getChildren(element)) == 3 })
   }
 }
+
+suite "Dom.offsetLeft" {
+  test "returns the offsetLeft value of the element" {
+    <div/>
+    |> Test.Html.start()
+    |> Test.Context.assert(
+      (element : Dom.Element) { Dom.offsetLeft(element) == 8 })
+  }
+}
+
+suite "Dom.offsetTop" {
+  test "returns the offsetTop value of the element" {
+    <div/>
+    |> Test.Html.start()
+    |> Test.Context.assert(
+      (element : Dom.Element) { Dom.offsetTop(element) == 8 })
+  }
+}

runtime/src/normalize_event.js

@@ -102,6 +102,14 @@ export const normalizeEvent = (event) => {
             return -1;
           case "screenY":
             return -1;
+          case "layerX":
+            return -1;
+          case "layerY":
+            return -1;
+          case "offsetX":
+            return -1;
+          case "offsetY":
+            return -1;
 
           // onScroll
           case "detail":