mannymu / alloyfinger Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 85.41% HTML 14.59%

alloyfinger's Introduction

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