/AlloyFinger

super tiny size multi-touch gestures library for the web. 　　　You can touch this →

Primary LanguageJavaScriptMIT LicenseMIT

Preview

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

Install

You can install it via npm:

npm install alloyfinger

Usage

AlloyCrop

Omi Version:

    render() {
        return  `
        <div>
            <div omi-finger ref="touchArea" onTap={this.handleTap}  onSwipe={this.handleSwipe} >
                Tap or Swipe Me!
            </div>
        </div>
        `;
    }

Pure JS:

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();

React Version:

import AlloyFinger from 'alloyfinger/dist/react/AlloyFinger';

// ...

render() {
    return (
        <AlloyFinger
            onTap={this.onTap.bind(this)}
            onMultipointStart={this.onMultipointStart.bind(this)}
            onLongTap={this.onLongTap.bind(this)}
            onSwipe={this.onSwipe.bind(this)}
            onPinch={this.onPinch.bind(this)}
            onRotate={this.onRotate.bind(this)}
            onPressMove={this.onPressMove.bind(this)}
            onMultipointEnd={this.onMultipointEnd.bind(this)}
            onDoubleTap={this.onDoubleTap.bind(this)}>
            <div className="test">the element that you want to bind event</div>
        </AlloyFinger>
    );
}

Thanks and Donate

License

This content is released under the MIT License.