Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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
})

Status

Install

Ractive-touch is available via npm and Bower.

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

npm version

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