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
ractive
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.
;
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:
Available events
Tap:
on-tap
on-doubletap
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
on-press
on-rotate
on-rotatestart
on-rotatemove
on-rotateend
on-rotatecancel
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.
<!-- 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-pointers='1'
swipe-distance='10'
swipe-direction='all'
*swipe-velocity='0.65'
rotate-pointers='2'
rotate-threshold='0'
press-pointers='1'
press-threshold='5'
press-time='500'
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