elm-hammer-events

Detection of touch/gesture events generated by the Hammer.js Javascript library.

You can detect the following categories of gestures: tap, swipe, rotate, press, pinch and pan.

Set-up

Download Hammer.js from here:

https://hammerjs.github.io/dist/hammer.min.js

In your index.html <head> section, add:

<script src="hammer.min.js"></script>

Then you need to add one line of Javascript just after creating your Elm app:

var hammertime = new Hammer(yourElmNode, {domEvents: true});

Here's a full example of index.html where your Elm application takes a single node of the page (typically you would create this kind of app using Browser.element):

<!DOCTYPE html>
<html>
  <head>
    <script src="hammer.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div id="elm">
    </div>
    <script>
      var elmNode = document.getElementById("elm");
      var app = Elm.Main.init({node: elmNode});
      var hammertime = new Hammer(elmNode, {domEvents: true});
    </script>
  </body>
</html>

Another example, this time your Elm application takes up the whole body of the HTML document (typically you would create that kind of app using Browser.document):

<!DOCTYPE html>
<html>
  <head>
    <script src="hammer.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      var app = Elm.Main.init();
      var hammertime = new Hammer(document.body, {domEvents: true});
    </script>
</body>
</html>

Usage in your Elm application

The library provides event handler HTML attributes such as onTap, onSwipe, onSwipeLeft, onSwipeRight, onRotate, onPinch etc... These all have the signature:

(HammerEvent -> msg) -> Attribute msg

and you can use them in a similar way as the usual events handler HTML attributes such as onClick or onInput.