Are you creating a web application that you want to be able to be used on a tablet? Then you might want to check out the Dojo toolkit. Dojo provides a very simple way to handle swipe events in your web application. In this post I used the dojox.gesture package. Why would you want to use Dojo? Here are a few good reasons from the documentation:
dojox/gesture has been designed with the following rationale:
- Device neutral – The target is to be compatible with most popular devices(single touch gestures should also work well on desktops).
- Compatibility and reusability – Applicable and can be used with dijit widgets, dojo core(dnd), dojox/mobile or dojox/charting etc.
- Scalability – A modularized event processing mechanism makes it very easy to extend with more customized gestures.
As of version 1.7, here is the list of devices and browsers:
dojox/gesture is working well with:
1. Desktops – IE8+, FF 3.6+, Chrome v10+, Safari 5+
2. Touch devices – Android 2.2/2.3 – iOS 3/4
In the code below I put a listener on the entire body of the HTML where I tagged the <body> element with the id “body”.
function registerSwipeListener(){
require([ "dojo", "dojox/gesture/swipe" ],
function(dojo, swipe, tap){
//connect the listener to the "body" element
dojo.connect(dojo.byId("body"), swipe.end, function(e){
if (current_view != "edit"){
//Check and which which difference is bigger since
//we only support up, down, left, right
if (Math.abs(e.dx) > Math.abs(e.dy)){
if (e.dx > 0){
viewerMoveLeft();
}else{
viewerMoveRight();
}
}else{
if (e.dy > 0){
viewerMoveUp();
}else{
viewerMoveDown();
}
}
}
});
});