j-gestures v3.0.0
The project was transferred to besom
, Please use the new package npm install besom
instead.
j-gestures
A Javascript Library For Multi-Touch Gestures (tap, longtap, doubletap, rotate, pinch, slide) - Support PC Web Mouse Event
Installation
NPM
npm install besom --save
or
Yarn
yarn add besom
or
CDN
https://cdn.jsdelivr.net/npm/besom/dist/besom.min.js
Usage
var Besom = require('besom'), g = Besom.create(document.getElementById('demo'));
g.enabe('longtap', 'slide', 'pinch', 'rotate');
//bind Event
g.on('tap', function(){ console.log('tap') }); //tap event is enabled by default
g.on('longtap', function(){ console.log('longtap') });
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.on('rotate', function(){ console.log('rotate') });
g.on('rotateEnd', function(){ console.log('rotateEnd') });
See Demos Click Here
Supported Gestures
tap
longtap
doubletap
slide
pinch
rotate
Supported Events
tap
(enabled default)longtap
doubletap
start
slide
slideEnd
pinch
pinchEnd
rotate
rotateEnd
Instace And Methods
Create Gestures Maintainer
Besom.create(element, onlydetect)
- element:HTMLElement.
- onlydetect:boolean(default: false) - only detect the gestures and capture the gesture datas to the event function when set
true
.
Gestures Maintainer Methods
enable(gesture), disable(gesture) - enable/disable gestures
on(event, fn) - add gesture event function
the parameter of the event function -
fn(property, currentGestureEventObject, startGestureEventObject)
property
- the gesture datas of the gesturescurrentGestureEventObject
andstartGestureEventObject
is the formatted event object.this
- refers to a transformable element. More details see bellow.
delegate(className, event, fn) - delegate the gesture of the child element which has the className
class
. If use this method,onlydetect
will be settrue
.setOrigin(point) - set the element transform origin point({x:number, y:number}), x and y is the relative position in the element matrix.
scale(scale, duration) - duration: string(for example: '500ms')
rotate(rotate, duration)
translate(offset, duration)
getPointOrigin(point) - get the point({pageX:number, pageY:number) origin in the element matrix
destroy() - destroy the gesture manager and events
Create Transformable Element
Besom.element(element)
- element:HTMLElement.
Transformable Element Properties and Methods
- element - the html element
- transform - the transform property of the element
- offset() - return the element offset.left and offset.top in the page
- setOrigin(point) - set the element transform origin point({x:number, y:number}), x and y is the relative position in the element matrix.
- getPointOrigin(point) - get the point({pageX:number, pageY:number) origin in the element matrix
- translate(offset, duration) - translate offset.x as horizon and offset.y as vertical distance in duration time.
- scale(scale, duration)
- rotate(rotate, duration)