reactive-touch

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

Browser support

See Hammer browser support and reactive for actual browser support.

Quickstart

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')
    }
  }
})

Live example

This live example demonstrates:

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

Install

npm i reactive-touch

Then bundle for the browser with browserify.

Usage

touch([bindings][, options])

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

Handlers

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

Options

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

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>

Per-view

Group options by lowercase recognizer name.

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

Custom recognizers

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'
  }
})

List of options

Common	Description
enable	If false, no events will be emitted. Defaults to true.
with	A lowercase recognizer name (e.g. tap or mycustomtap) to recognize simultaneously. Shortcut for recognizeWith().
requireFailure	A lowercase recognizer name that is required to fail before recognizing. Shortcut for requireFailure().
setup	A view method name, called after recognizer is created and options are set. For advanced usage. Receives three arguments: el, recognizer and ctx.

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.

Recognizer	Options
Swipe	threshold, pointers, direction, velocity
Pan	pointers, threshold, direction
Pinch	pointers, threshold
Rotate	pointers, threshold
Tap	pointers, taps, interval, time, threshold, posThreshold
Press	pointers, threshold, time

List of events

Recognizer	Events
Swipe	swipe, swipeleft, swiperight, swipeup, swipedown
Pan	pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
Pinch	pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout
Rotate	rotate, rotatestart, rotatemove, rotateend, rotatecancel
Tap	tap
Press	press

Test

npm i zuul -g
npm test

Or local:

npm run test-local

License

MIT © Vincent Weevers