#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);
            }
        };
    });
})();

Setting up the build environment

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

License

This project is licensed under the MIT License: http://opensource.org/licenses/MIT