Wondering what’s next for npm?Check out our public roadmap! »

reactive-touch

1.0.1 • Public • Published

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

Build Status

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

Install

npm i reactive-touch

DownloadsWeekly Downloads

2

Version

1.0.1

License

MIT

Last publish

Collaborators

  • avatar