Javascript touch movement, track when user swipes from edges

Question

I need to track user touch events. I want to track when user swipes from edges.
For example when user swipes from left vertical edge I will show a menu, from right edge

Answer 1

I think this will work:

first check if the touchstart event happens at the edge of the screen:

var startDragAtBorder = false;
$(document).on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;

   if(xPos < 5) { // this can also be xPos == 0; whatever works for you
    startDragAtBorder = true;   
   }
   else{
    startDragAtBorder = false;
   }
});

than setup the drag event with Hammer:

$(document).hammer().on('drag', function(e){
  if(startDragAtBorder && e.gesture.direction == 'right'){
    // check that the drag event started at the edge and that the direction is to the right

    var currentText = $('#logArea').text();   
    $('#logArea').text(""+currentText+" . "+e.type);
  }
});

working fiddle: http://jsfiddle.net/ym4JV/55/

Answer 2

I had trouble making this work using Hammer.JS - v2.0.8 and refering to the actual documentation.
Based on 2BitNerd's answer here is what I used:

Hammer(document.body).on("swiperight", function(e) {
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;
    if (origin <= 15) {
        // They swiped, starting from no more than 15px away from the edge. 
    }
});

The .gesture attribute has to be skipped for me to make this work as it does not exist.

Answer 3

Using Hammer.js v2.0.4, I found that this worked best:

$("html").hammer().on('swiperight', function (e) {
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    if (origin <= 15) {
        // They swiped, starting from no more than 15px away from the edge. 
    }
});