Configurable touch bindings for reactive with Hammer. Use on-swipe, on-tap, on-rotate and many more in your reactive views. Also supports bindings for custom recognizers, like on-doubletap.

Jump to: Quickstart - Live example - Install - Usage - Test - License

See Hammer browser support and reactive for actual browser support.

var reactive = require('reactive')
  , touch = require('reactive-touch')

var tpl  = '<div on-swipeleft="swipe">Swipe left</div>'
var view = reactive(tpl, null, {
  bindings: touch(),
  delegate: {
    swipe: function(ev, ctx) {
      console.log('you swiped left')
    }
  }
})

This live example demonstrates:

• Custom recognizers
• Reactive enabling of events
• Per-element and per-view options

npm i reactive-touch

Then bundle for the browser with browserify.

touch([bindings][, options])

• bindings: existing bindings to extend
• options: per-view options (see below)

Your view can react to any Hammer event by adding attributes in the form of on-[event]="handler name". If no handler name is given, it is assumed to be the event name. These are the same:

<div on-pan></div>
<div on-pan="pan"></div>

The handler will receive two arguments, similar to reactive's built-in on-click:

• ev: event data
• ctx: reactive instance

Each element with touch bindings gets a set of recognizers. Recognizers can be configured per-view and per-element.

Add attributes in the form of [recognizer]-[option]="value". Values will be interpolated if wrapped in brackets, and cast to integers, floats or booleans if necessary. Examples:

<div on-pan pan-direction="horizontal"></div>
<div on-rotateend="rotate" rotate-threshold="{ modelProperty + 10 }"></div>
<div on-swipe swipe-velocity="0.65"></div>
<div on-tap tap-taps="2">double tap</div>
<div on-pinch on-rotate pinch-with="rotate"></div>
<div on-press press-enable="{ someMethod }"></div>

Group options by lowercase recognizer name.

touch(bindings, {
  swipe: {
    threshold: 100
  }
})

Simply add a group to options with a custom name. Optionally set recognizer - a lowercase recognizer name to extend. Required if the name doesn't contain a standard name. In the following example, recognizer could have been left out.

<div on-tap on-doubletap></div>

touch(bindings, {
  tap: {
    requireFailure: 'doubletap'
  },
  doubletap: {
    recognizer: 'tap',
    taps: 2,
    with: 'tap'
  }
})

For direction, use a Hammer.DIRECTION_* constant or a shorthand like all, horizontal, left, etc. Please follow the links below for a description of the other options.

npm i zuul -g
npm test

Or local:

npm run test-local

MIT © Vincent Weevers