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

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

:copyright:

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz

ractive-touch

0.4.0

@rstacruz

ractive-touch

Install

Available events

Options

Thanks