🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

AlloyFinger is a super tiny size multi-touch gestures library for the web.

Core Java Script

Documentation

Preview

You can touch this → http://alloyteam.github.io/AlloyFinger/

Install

You can install it via npm:

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

This content is released under the MIT License.


You May Also Like