https://github.com/AlloyTeam/AlloyFinger

Super tiny size multi-touch gestures library for the web. 　　　You can touch this →
https://github.com/AlloyTeam/AlloyFinger

alloyfinger finger gesture touch

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/AlloyTeam/AlloyFinger
• Owner: AlloyTeam
• License: mit
• Created: 2016-05-25T23:17:03.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-03T07:05:23.000Z (almost 6 years ago)
• Last Synced: 2024-04-10T16:01:15.060Z (8 months ago)
• Topics: alloyfinger, finger, gesture, touch
• Language: JavaScript
• Homepage: http://alloyteam.github.io/AlloyFinger/
• Size: 1.12 MB
• Stars: 3,414
• Watchers: 134
• Forks: 544
• Open Issues: 77
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tiny-js - alloyfinger - Pan, swipe, tap, doubletap, longpress, _and_ pinch / rotate. My personal favorite. <img align="top" height="24" src="./img/alloyfinger.svg">. (Touch Gestures / Reactive Programming)

README

        
# Preview

You can touch this → [http://alloyteam.github.io/AlloyFinger/](http://alloyteam.github.io/AlloyFinger/)

# Install

You can install it via npm:

```html

npm install alloyfinger

```

# Usage

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

```

### Omi Version:

```js

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 (

      


        

          


            {this.data.wording}

          

        

      

    )

  }


  css() {

    return `.touchArea{

                  background-color: green;

                  width: 200px;

                  min-height: 200px;

                  text-align: center;

                  color:white;

                  height:auto;

                  white-space: pre-line;

              }`

  }

}

render(, 'body')

```

* [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)

* [css3transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)

# Others

* [AlloyCrop](https://github.com/AlloyTeam/AlloyCrop)

# License

This content is released under the [MIT](http://opensource.org/licenses/MIT) License.