@axe/touch
v0.2.1 touch gesture tap press slide swipe
touch
Define some usual gesture with touch events.
Installation
npm install @axe/touch
Usage
import { Tap, Press, Swipe } from '@axe/touch'
// tap
const tap = new Tap('#tap')
tap.addEvent(() => {
console.info('tap')
})
// longtap
const longtap = new Tap('#longtap')
longtap.addEvent(() => {
console.info('longtap')
}, 'longtap')
// doubletap
const doubletap = new Tap('#doubletap')
doubletap.addEvent(() => {
console.info('doubletap')
}, 'doubletap')
// press
const press = new Press('#press')
press.addEvent(() => {
console.info('press')
})
// swipe
const swipeNode = document.getElementById('swipe')
const swipe = new Swipe('#swipe')
swipe.onMove((offsetX, offsetY) => {
swipeNode.style.left = offsetX + 'px'
swipeNode.style.top = offsetY + 'px'
console.info('swipe: x=' + offsetX + ', y=' + offsetY)
})
swipe.addEvent((direction) => {
console.info('swipe ' + direction)
})
API
tap
This method is same to click but without delay for browser.
It has 3 arguments:
- node [HTMLElement] The element will be addEventListener
- options [Object] Define default data by yourself, you needn't config as usual
- time [Number:250] It will be trigger if touch less than time
- offset [Number:10] It will be trigger if offset
less than
distance, unit ispx
event
- addEvent(fn, type = 'tap')
- type: tap, doubletap, longtap
- removeEvent(fn, type = 'tap')
- dispatchEvent(type = 'tap')
press
This method is same to longtap but trigger when timeout
.
It has 3 arguments:
- node [HTMLElement] The element will be addEventListener
- callback [Function] It will be work when evnet trigger
- options [Object] Define default data by yourself, you needn't config as usual
- time [Number:350] It will be trigger if touch
more than
time - offset [Number:10] It will be trigger if offset less than distance, unit is
px
- time [Number:350] It will be trigger if touch
swipe
This method will be trigger when slide side.
It has 3 arguments:
- node [HTMLElement] The element will be addEventListener
- callback [Function] It will be work when evnet trigger
- options [Object] Define default data by yourself, you needn't config as usual
- axis [String:'all'] The other value is horizontal and vertical
- offset [Number:100] It will be trigger if offset
more than
distance, unit ispx
- speed [Number:200] It will be grigger if speed is fast and needn't enough offset
- touchmove [Function(offsetX, offsetY)] It allow you handle moving event, and you can change element position in live
- prevent [Boolean:true] PreventDefault when touch start
NOTE
when you use Touch, the node was inject initially so that you needn't pass it again.
Build Setup
# serve with hot reload at localhost:5000
fle dev
# build for production with minification
fle build
For detailed explanation, consult the docs for fle-cli.