#Touché -
This is a little lightweight gesture library supporting desktop and touch devices.
N.B Since version 1.1 Touché no longer adds touch-action: none; to elements being bound. It's up to the developer to set an appropiate touch-action.
The api looks like this:
Touche(element).tap({
options: {
areaThreshold: 5
},
end: function(e, data) {
console.log("tap");
}
})
.tap({
options: {
areaThreshold: 5,
touches: 2
},
end: function(e, data) {
console.log("2-finger tap");
}
})
.doubletap({
options: {
timeThreshold: 200
},
end: function() {
console.log("double tap");
}
})
.longtap({
options: {
timeThreshold: 800,
interval: 20
},
start: function(event, data) {
console.log("longtap start", data.percentage);
},
update: function(event, data) {
console.log("longtap update", data.percentage);
},
end: function() {
console.log("longtap");
},
cancel: function() {
console.log("longtap cancelled");
}
})
.swipe({
options: {
radiusThreshold: 24
},
start: function(e, data) {
console.log("swipe start", data);
},
update: function(e, data) {
console.log("swipe update", data);
},
end: function(e, data) {
console.log("swipe", data);
},
cancel: function() {
console.log("swipe cancelled");
}
})
.rotate({
options: {
rotationThreshold: 18
},
start: function(e, data) {
console.log("rotate start", data.rotation);
},
update: function(e, data) {
console.log("rotate update", data.rotation);
},
end: function(e, data) {
console.log("rotate");
},
cancel: function() {
console.log("rotate cancelled");
}
})
.pinch({
options: {
pinchThreshold: 12
},
start: function(e, data) {
console.log("pinch start", data.scale, +new Date());
},
update: function(e, data) {
console.log("pinch update", data.scale, +new Date());
},
end: function(e, data) {
console.log("pinch", +new Date());
},
cancel: function() {
console.log("pinch cancelled", +new Date());
}
});
/*
* If you are using jquery you could just
* wrap Touche in the special event api like below.
*/
/*
* jquery special event wrapper.
*/
(function() {
$.each([
'tap',
'doubletap',
'longtap',
'swipe',
'pinch',
'rotate'
], function(_, event) {
$.event.special[event] = {
add: function(handleObj) {
Touche(this)[event]( {
options: handleObj.data && handleObj.data.options || {},
start: function(e, data) {
$(e.target).trigger(event + 'start', [data]);
},
update: function(e, data) {
$(e.target).trigger(event + 'update', [data]);
},
end: function(e, data) {
$(e.target).trigger(event, [data]);
},
cancel: function() {
$(e.target).trigger(event + 'cancel');
}
});
},
remove: function(handleObj) {
Touche(this).off(event);
}
};
});
})();Touché is using grunt to build (concatenate + minify) and running tests. Below is instructions on how to properly set up this project.
$ cd touche
$ npm install
$ npm install --no-save [email protected]
After installing, you can run a few different tasks using grunt:
// jshint all test + lib files
$ grunt jshint
// run the test suite
$ grunt test
// generate documentation, requires "jsdoc" to be in path
$ grunt docs
// default: runs jshint, test, concat, min
$ grunt
This project is licensed under the MIT License: http://opensource.org/licenses/MIT
