chriswessels:hammer

A smart-package for integrating with Hammer.js for multi-touch gestures. Bundles Hammer.js and provides Template.templateName.gestures() for easy use.

Example

1Template.yourTemplate.gestures({
2  'swipeleft .item .panel': function (event, template) {
3    /* Do something when user swipes left on .item .panel (elements(s) inside the template html) */
4    /* `event` is the Hammer.js event object */
5    /* `template` is the `Blaze.TemplateInstance` */
6    /* `this` is the data context of the element in your template */
7  }
8});

Installation

In your Meteor.js project directory, run

$ meteor add chriswessels:hammer

Template interface

The interface for Template.templateName.gestures() is the same as Template.templateName.events().

Specifically, you should pass an object into Template.templateName.gestures(). The object keys should follow the format gestureName cssSelector (or multiple strings in this format separated by a comma, e.g. tap .foo, swiperight .bar) and the value should be a callback function that is executed when the specified gestures are performed on the element(s) matching the CSS selector(s).

Setting Hammer.js options

You can set Hammer.js options application-wide by using $('body').data('hammer').set({ /* Hammer Options */ });.

Gesture Callback Function

The callback function you specify will be passed two arguments: event, the event object provided by Hammer.js and template, the Blaze.TemplateInstance.

The this context of the callback function will be set to the data context of the matching element in your template.

Using additional Recognizers

This smart package will instantiate a single instance of Hammer.Manager with the default set of Recognizers as defined here: http://hammerjs.github.io/api/#hammer

You can register additional Recognizers for custom or compound gestures. Example of registering a Hammer.Swipe recognizer for 2 finger swipes:

1// Instantiating and attaching the Recognizers to the `Hammer.Manager` instance.
2// client/app.js
3Meteor.startup(function () {
4  var manager = $('body').data('hammer');
5  var twoFingerSwipe = new Hammer.Swipe({
6    event: '2fingerswipe', /* prefix for custom swipe events, e.g. 2fingerswipeleft, 2fingerswiperight */
7    pointers: 2,
8    velocity: 0.5
9  });
10  manager.add(twoFingerSwipe);
11});
12
13// Using the custom recognizers in your templates
14// client/views/foo/foo.js
15Template.foo.gestures({
16  '2fingerswiperight .bar': function (event, template) {
17    /* `event` is the Hammer.js event object */
18    /* `template` is the `Blaze.TemplateInstance` */
19    /* `this` is the data context of the element in your template */
20  }
21});

License

Please see the LICENSE file for more information.