simple-gestures v2.0.0

Gesture

A Simple Javascript Library For Multi-Touch Gestures - Support PC Web Mouse Events

Usage

npm i simple-gestures or use the minimized file - 'dist/gesture.min.js' in your project.

  var Gesture = require('simple-gestures'),
    g = new Gesture(document.getElementById('demo'));
  //you can aslo download the minimized file and use 
  //`var g = new Gesture(document.getElementById('test'))` directly if your project doesn't support requirejs.
  g.enabe('longtap', 'slide', 'pinch');

  //bind Event
  g.on('tap', function(){ console.log('tap') }); //enabled by default
  g.on('longtap', function(){ console.log('longtap') });

  g.on('start', function(){ console.log('gesture start') });//detect the gesture start

  g.on('slide', function(){ console.log('slide') });
  g.on('slideEnd', function(){ console.log('slideEnd')  });

  g.on('pinch', function(){ console.log('pinch') });
  g.on('pinchEnd', function(){ console.log('pinchEnd') });

  g.delegate('.control-bar', 'slide', function(){ console.log('control-bar is sliding') })

  g.disable('slide');

Supported Gestures

• 'tap'
• 'longtap'
• 'doubletap'
• 'slide'
• 'pinch'
• 'rotate'

Supported Events

• 'tap': enabled by default
• 'longtap'
• 'doubletap'
• 'start': detect gesture start
• 'slide'
• 'slideEnd'
• 'pinch'
• 'pinchEnd'
• 'rotate'
• 'rotateEnd'

Instace Methods

• new Gesture(element, onlydetect) - onlydetect(only detect the gestures and capture the gesture parameters to the gesture event, will not change the element transform property. default value false)
• enable(gesture), disable(gesture) - enable/disable gestures
• on(event, fn), removeEvent(event) - add/remove gesture event callback
• delegate(className, event, fn) - delegate the gesture of the child element which has the className class (only support tap and slide), if use this method, onlydetect will set true.
• slide(offset, duration) - slide offset.x as horizon and offset.y as vertical distance in duration time.
• scale(scale, duration)
• rotate(rotate, duration)
• destroy() - destroy the gesture event

some other methods you may want to use:

• setOrigin(point) - set the element transform origin
• getPointOrigin(point) - get the point({x:pageX, y:pageY) origin in the element matrix