resize signal for any DOM elem, clienWidth/Height

default.nix

@@ -0,0 +1,9 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+let
+  easy-ps = import ./easy-ps.nix { inherit pkgs; };
+
+in pkgs.stdenv.mkDerivation {
+  name = "nerg";
+  buildInputs = easy-ps.buildInputs;
+}

easy-ps.nix

@@ -0,0 +1,8 @@
+    { pkgs ? import <nixpkgs> {} }:
+
+    import (pkgs.fetchFromGitHub {
+        owner = "justinwoo";
+        repo = "easy-purescript-nix";
+        rev = "47507b27e15a9c3b929111cf43d2e9c0e4b97f4c";
+        sha256 = "0gnwymgm4i5y9vknpcsr99pwy76w14nclqxb6xmmzlw2s8fx85hm";
+    }) { inherit pkgs; }

spago.dhall

@@ -18,6 +18,7 @@ You can edit this file as you like.
   , "psci-support"
   , "refs"
   , "test-unit"
+  , "web-dom"
   ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs", "test/**/*.purs" ]

src/Signal/DOM.js

@@ -32,6 +32,19 @@ exports.mouseButtonP =
     };
   };
 
+exports.wheelYP =
+  function wheelYP(constant) {
+    return function(element) {
+      return function() {
+        var out = constant(0);
+        element.addEventListener("wheel", function(e) {
+          out.set(e.deltaY);
+        });
+        return out;
+      };
+    };
+  };
+
 exports.touchP =
   function touchP(constant) {
     var out = constant([]);
@@ -111,5 +124,20 @@ exports.windowDimensionsP = function windowDimensionsP(constant) {
   });
   return function() {
     return out;
-  }
-}
+  };
+};
+
+// module Signal.DOM.Extended
+
+exports.resizedP =
+  function resizedP(constant) {
+    return function(element) {
+      var out = constant({w: element.clientWidth, h: element.clientHeight });
+      element.addEventListener("resize", function () {
+        out.set({w: element.clientWidth, h: element.clientHeight});
+      });
+      return function() {
+        return out;
+      };
+    };
+  };

src/Signal/DOM.purs

@@ -3,9 +3,11 @@ module Signal.DOM
   , keyPressed
   , mouseButton
   , mouseButtonPressed
+  , resized
   , touch
   , tap
   , mousePos
+  , wheelY
   , windowDimensions
   , CoordinatePair(..)
   , DimensionPair(..)
@@ -18,6 +20,7 @@ import Effect (Effect)
 import Prelude (($), bind, pure)
 import Signal (constant, Signal, (~>))
 import Signal.Time (now, Time)
+import Web.DOM (Element)
 
 type CoordinatePair = { x :: Int, y :: Int }
 type DimensionPair  = { w :: Int, h :: Int }
@@ -44,13 +47,18 @@ mouseButton = mouseButtonP constant
 -- |note: in IE8 and earlier you need to use MouseIE8MiddleButton if you want to query the middle button
 mouseButtonPressed :: MouseButton -> Effect (Signal Boolean)
 mouseButtonPressed btn = mouseButton buttonNumber
-  where 
+  where
     buttonNumber = case btn of
       MouseLeftButton      -> 0
       MouseRightButton     -> 2
       MouseMiddleButton    -> 1
       MouseIE8MiddleButton -> 4
 
+foreign import wheelYP :: forall c. (c -> Signal c) -> Element -> Effect (Signal Number)
+
+wheelY :: Element -> Effect (Signal Number)
+wheelY = wheelYP constant
+
 type Touch = { id :: String
              , screenX :: Int, screenY :: Int
              , clientX :: Int, clientY :: Int
@@ -92,3 +100,8 @@ foreign import windowDimensionsP :: forall c. (c -> Signal c) -> Effect (Signal
 -- |A signal which contains the document window's current width and height.
 windowDimensions :: Effect (Signal DimensionPair)
 windowDimensions = windowDimensionsP constant
+
+foreign import resizedP :: forall c. (c -> Signal c) -> Element -> Effect (Signal DimensionPair)
+
+resized :: Element -> Effect (Signal DimensionPair)
+resized = resizedP constant