Preview

Install

npm install alloyfinger

Usage

var af = new AlloyFinger(element, {
 touchStart: function () { },
 touchMove: function () { },
 touchEnd: function () { },
 touchCancel: function () { },
 multipointStart: function () { },
 multipointEnd: function () { },
 tap: function () { },
 doubleTap: function () { },
 longTap: function () { },
 singleTap: function () { },
 rotate: function (evt) {
 console.log(evt.angle);
 },
 pinch: function (evt) {
 console.log(evt.zoom);
 },
 pressMove: function (evt) {
 console.log(evt.deltaX);
 console.log(evt.deltaY);
 },
 swipe: function (evt) {
 console.log("swipe" + evt.direction);
 }
});
/**
 * this method can also add or remove the event handler
 */
var onTap = function() {};
af.on('tap', onTap);
af.on('touchStart', function() {});
af.off('tap', onTap);
/**
 * this method can destroy the instance
 */
af = af.destroy();

Omi Version:

import { render, tag, WeElement } from 'omi'
import 'omi-finger'
@tag('my-app')
class MyApp extends WeElement {
 install() {
 this.data.wording = 'Tap or Swipe Me!'
 }
 handleTap = (evt) => {
 this.data.wording += '\r\nTap'
 this.update()
 }
 handleSwipe = (evt) => {
 this.data.wording += '\r\nSwipe-' + evt.direction
 this.update()
 }
 render() {
 return (
 <div>
 <omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}>
 <div class="touchArea" >
 {this.data.wording}
 </div>
 </omi-finger>
 </div>
 )
 }
 css() {
 return `.touchArea{
 background-color: green;
 width: 200px;
 min-height: 200px;
 text-align: center;
 color:white;
 height:auto;
 white-space: pre-line;
 }`
 }
}
render(<my-app></my-app>, 'body')

Others

License