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 = touch = var tpl = '<div on-swipeleft="swipe">Swipe left</div>'var view =
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 extendoptions
: 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:
The handler will receive two arguments, similar to reactive's built-in on-click
:
ev
: event datactx
: 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:
double tap
Per-view
Group options by lowercase recognizer name.
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.
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