Can you remend a JS library that actually provides edge swipe functionality when working with bare-bones HTML & CSS?

I've searched all over and haven't found a source of truth for that problem. I've seen lots and lots of libraries enabling swipe gestures but not edge swipe.

My last attempt was using Hammer.js which I've tried implementing as:

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
});

Further, if not using any library, how can I implement a mobile edge swipe to show and hide content, (in my case it'd be a navigation menu) with vanilla JS?

At this point I'm open to either solution/direction.

Can you remend a JS library that actually provides edge swipe functionality when working with bare-bones HTML & CSS?

I've searched all over and haven't found a source of truth for that problem. I've seen lots and lots of libraries enabling swipe gestures but not edge swipe.

My last attempt was using Hammer.js which I've tried implementing as:

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
});

Further, if not using any library, how can I implement a mobile edge swipe to show and hide content, (in my case it'd be a navigation menu) with vanilla JS?

At this point I'm open to either solution/direction.

• javascript
• jquery
• hammer.js

• 1 a very simple and stupid way is to create a dummy layer on top of the page. Lets say that your width is 400px create a dummy layer on the left and right of 75 px and attach hammer.js to that element. you will get the edge swipe rightway. This is not a very good solution. But will help you achieve what you want. Let me see hammerjs – karthick Commented Mar 9, 2018 at 17:46
• would you mind posting an answer with a fiddle example? – Null isTrue Commented Mar 9, 2018 at 17:47
• 1 Requests for libraries are off-topic. – jhpratt Commented Mar 9, 2018 at 17:47
• moreover I'm requesting/seeking a solution. – Null isTrue Commented Mar 9, 2018 at 17:48
• In that case, your question should reflect that, and also indicate what you've tried so far. – jhpratt Commented Mar 9, 2018 at 17:50

3 Answers 3

Here is a solution, you can set thresholdStart, End, Milliseconds. You may want to tidy up the code, and port it for touch events (I used mouse events for testing in my browser more easily).

Use: swipeEdgeFromLeft function and swipeEdgeFromRight function.

var div = document.body;
var mouse = {
  isDown: false,
  inLeft: false,
  inRight: false,
  downTimestamp: null
};
var width, thresholdStart, thresholdEnd, thresholdMilliseconds;

function resize(){
  width = window.innerWidth;
  thresholdStart = 0.1*width;//within 10% of screen width
  thresholdEnd = 0.13*width;//beyond 13% of screen width
  thresholdMilliseconds = 500;//must be done in 500 milliseconds
}
document.addEventListener("resize", resize, false);
resize();//initialize

div.addEventListener('mousedown'/*'touchstart'*/, function(e){
 var x = e./*touches[0].*/pageX;
 mouse.isDown = true;
 mouse.downTimestamp = performance.now();

 if(x < thresholdStart){
  mouse.inLeft = true;
 } else if(x > width-thresholdStart){
  mouse.inRight = true;
 }
});
div.addEventListener('mousemove'/*'touchmove'*/, function(e){
 
  var x = e./*touches[0].*/pageX;
  if(mouse.inLeft && x > thresholdEnd){
    mouse.inLeft = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromLeft();
    }
  } else if(mouse.inRight && x < width-thresholdEnd){
    mouse.inRight = false;
    if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
      swipeEdgeFromRight();
    }
  }
});
div.addEventListener('mouseup'/*'touchend'*/, function(e){
 //var x = e./*changedTouches[0].*/pageX;
 mouse.isDown = false;
 mouse.inLeft = false;
 mouse.inRight = false;
 mouse.downTimestamp = null;
});
function swipeEdgeFromLeft(){
 console.log("edge swipe from left");
}
function swipeEdgeFromRight(){
 console.log("edge swipe from right");
}

body {
  max-width: 100vw;
  height: 100vh;
}
.bar {
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  pointer-events: none;
}
#left-inner-threshold {
  width: calc(0.1 * 100vw);
  left: 0;
}
#right-inner-threshold {
  width: calc(0.1 * 100vw);
  right: 0;
}
#left-outer-threshold {
  width: calc(0.13 * 100vw);
  left: 0;
}
#right-outer-threshold {
  width: calc(0.13 * 100vw);
  right: 0;
}

<div id="left-inner-threshold" class="bar"></div>
<div id="left-outer-threshold" class="bar"></div>
<div id="right-inner-threshold" class="bar"></div>
<div id="right-outer-threshold" class="bar"></div>

Here's a solution to your existing code using Hammer.js v2.0.8

The explanation for how to achieve the edge swipe can be found here answered by @jovinbm.

$(document).ready(function () {

    const swipe = new Hammer(document);
    function getStartPosition(e) {
        const delta_x = e.deltaX;
        const delta_y = e.deltaY;
        const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
        const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

        return {
            x: final_x - delta_x,
            y: final_y - delta_y
        }
    };

    swipe.on('swiperight swipeleft', function (e) {
        e.preventDefault();
        const { x } = getStartPosition(e);
        console.log(x);
        //swipe right to open nav /* note the condition here */
        if (e.type == 'swiperight' && x >= 0 && x <= 50) {
            // open menu
            $('#navigation').animate({
                left: '0'
            });
            //swiping left should slide out nav and/or sub-nav
        } else {
            // close/hide menu
            $('#navigation, #task-menu').animate({
                left: '-100%'
            });
        }
    });
});

Here's a pen showing it in action:

For swipes, only the final pointerup event is included as the srcEvent in the event object passed to your handler (see http://hammerjs.github.io/api/). The initial pointerdown event that carries the details of the initial position of where the swipe event started is not provided in the hammer event object. Fortunately, you can use the srcEvent in the event object to get the starting position of the event initial pointerdown event.

const getStartPosition = (e) => {
  const delta_x = e.deltaX;
  const delta_y = e.deltaY;
  const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
  const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;

  return {
    x: final_x - delta_x,
    y: final_y - delta_y
  };
};

const handleSwipe = (e) => {
  const {x} = getStartPosition(e);

  if (x >= 0 && x <= 50) {
    // handle swipe from left edge e.t.c
  }
  else {
    // handle other case
  }
};

The srcEvent is just a normal javascript event that inherits properties from UIEvent hence the pageX/pageY api above. This will probably not work in other browsers since some of them are not standardized