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, 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