ractive-touch

Touch events for Ractive. Supports tap, pan, swipe, rotate, pinch, and press.

Find more Ractive.js plugins at docs.ractivejs.org/latest/plugins

Disambiguation: This page is about ractive-touch, the JavaScript plugin. For the Ractiv Touch+ mouse, see ractiv.com.

<button on-tap="activate">
<button on-swipeleft="buttonSwipe">

ractive.on('buttonSwipe', function (e) {
  e.original.deltaX
  e.original.deltaY
  e.original.direction // 0,1,2,3
  e.original.pointerType // "mouse"
  e.original.velocity // 1.62
  e.original.velocityX
  e.original.velocityY
})

Install

Ractive-touch is available via npm and Bower.

$ npm install --save ractive-touch
$ bower install --save ractive-touch

CommonJS usage: Require the module to use it. It automatically registers itself into either window.Ractive or require('ractive'), whichever's available. No need to use the return value.

require('ractive-touch');

Standalone usage: For those not using npm, it's also available as a standalone .js file. Be sure to include it after ractive.js and hammer.js.

Viewport: It's recommended to add a viewport meta tag to your HTML restricting zoom:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

Available events

Tap:

• on-tap
• on-doubletap

Swipe:

• on-swipe
• on-swipeleft
• on-swiperight
• on-swipeup
• on-swipedown

Pan:

• on-pan
• on-panstart
• on-panmove
• on-panend
• on-pancancel
• on-panleft
• on-panright
• on-panup
• on-pandown

Press:

• on-press

Rotate:

• on-rotate
• on-rotatestart
• on-rotatemove
• on-rotateend
• on-rotatecancel

Pinch:

• on-pinch
• on-pinchstart
• on-pinchmove
• on-pinchend
• on-pinchcancel
• on-pinchin
• on-pinchout

Options

You can configure options via attributes in your DOM node. You can use the data- attribute convention as well.

<div on-pan='move' pan-direction='all'>
<div on-pan='move' data-pan-direction='all'> <!-- alternate syntax -->

Tap:

• tap-pointers='1'
• tap-taps='1'
• tap-interval='300'
• tap-time='250'
• tap-threshold='2'
• tap-posThreshold='10'

Pan:

• pan-pointers='1'
• pan-threshold='1'
• pan-direction='all' *

Swipe:

• swipe-pointers='1'
• swipe-distance='10'
• swipe-direction='all' *
• swipe-velocity='0.65'

Rotate:

• rotate-pointers='2'
• rotate-threshold='0'

Press:

• press-pointers='1'
• press-threshold='5'
• press-time='500'

Pinch:

• pinch-pointers='2'
• pinch-threshold='0'

* - directions can be none, all, up, down, left, right, horizontal, vertical.

Thanks

Ractive-touch is written for Ractive, a live DOM binding library for creating interactive UIs.

Touch event detection is powered by Hammer.js. Refer to their documentation for more details.

©️

Ractive-touch © 2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors.

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz