reactive-touch
    Overview
    Reviews
    Code
    Tutorials
    Playground
    Contributors
    Issues
    Documentation
    Chat

reactive-touch

Touch bindings for reactive-component with Hammer

1.0.1  •  Updated 6 years ago  •  by Vincent Weevers  •  MIT License

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

Popularity

Stars
0

Maintenance

Development

Last ver 6 years ago
Created 6 years ago
Last commit 6 years ago
18 hours between commits

Technology

Node version: null
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

1 contributors
Vincent Weevers
Maintainer, 28 commits

Tags

reactive
touch
hammer
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.