cordova-elm-template-jumpstart/template_src/src/launchElm.d/attachSwipes.js

Cordova template to jumpstart development using Elm and Webpack

import Hammer from "hammerjs";
import $ from "jquery";
import _ from "lodash";

// Don't let the hammer instance get garbage collected.
let hammer;

module.exports = app => {
  $(() => {
    try {
      const sendLeft = _.throttle(e => {
        try {
          if(e.direction & Hammer.DIRECTION_LEFT) {
            app.ports.onSwipeLeft.send(null);
            console.debug("Sent a swipe left", e);
          }
        } catch(e) {
          console.error("Error trying to send a swipe left", e);
          throw e;
        }
      }, 1000, { leading: true, trailing: false });
      const sendRight = _.throttle(e => {
        try {
          if(e.direction & Hammer.DIRECTION_RIGHT) {
            app.ports.onSwipeRight.send(null);
            console.debug("Sent a swipe right", e);
          }
        } catch(e) {
          console.error("Error trying to send a swipe right", e);
        }
      }, 1000, { leading: true, trailing: false });

      const body = document.body;
      if(!body) {
        console.error(`No body found in the document; about to explode`, document);
      }
      hammer = new Hammer(body);
      hammer.get("pan").set({enable:true});
      hammer.get("swipe").set({enable:true});
      console.debug("Created Hammer.js", hammer);
      hammer.on("panleft", sendLeft);
      hammer.on("swipeleft", sendLeft);
      hammer.on("panright", sendRight);
      hammer.on("swiperight", sendRight);
      hammer.on("pan", e => console.debug("Saw a pan", e));
      hammer.on("swipe", e => console.debug("Saw a swipe", e));
    } catch(e) {
      console.error("Error attaching the swipe listeners", e);
      throw e;
    }
  });
}