ractive-touch
Touch events for Ractive. Supports tap, pan, swipe, rotate, pinch, and press.
Last updated 6 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ractive-touch 
SYNC missed versions from official npm registry.

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

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.

:copyright:

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

Current Tags

  • 0.4.0                                ...           latest (6 years ago)

5 Versions

  • 0.4.0                                ...           6 years ago
  • 0.3.0                                ...           6 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
  • 0.0.0                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (10)

Copyright 2014 - 2016 © taobao.org |