unified desktop/mobile high level pointer gestures, using most.js
MIT License
unified desktop/mobile high level pointer gestures, using most.js
This is a set of pointer gesture helpers, unifying pointer apis accross browsers & mobile/desktop works (and manually tested ) in :
It
npm install most-gestures
import {pointerGestures} from 'most-gestures'
const element = document.getElementById("foo")
const gestures = pointerGestures(element)
//or alternatively
const element = document.getElementById("foo")
const baseInteractions = baseInteractionsFromEvents(element)
const gestures = pointerGestures(baseInteractions)
//now you can use:
/*gestures.taps : tap/click once & release quickly
gestures.drags: press, keep pressed & move around
zooms: mouse wheel & pinch zoom alike
pointerMoves: simple moves
*/
//each one of those is an observable , so to react on taps you can do:
gestures.taps.forEach(function(e){
console.log('tapped',e)
})
the module exposes two main functions:
this creates an object containing the low level streams (mouseDowns$, mouseUps$ etc) from a DOM element, you usually don't want to use this directly, use the following function instead.
options allows you to refine the gestures by modifying the following parameters:
Note: these will also get passed along correctly if set on the pointerGestures function below
you can either pass in a reference to a dom element or the output from baseInteractionsFromEvents(element)
what you are likely interested in, is pointerGestures:
they are all observables , so the power is yours !
options allows you to refine the gestures by modifying the following parameters:
examples :
gestures.drags.forEach(function(e){
console.log('dragged',e)
})
you can also easily define your custom gestures, based on the existing ones: using map, filter etc on the observables
const singleTaps$ = taps$.filter(x => x.nb === 1).map(e => e.list).map(e => e[0])
const doubleTaps$ = taps$.filter(x => x.nb === 2).map(e => e.list).map(e => e[0])
PRs accepted.
Small note: If editing the Readme, please conform to the standard-readme specification.
The MIT License (MIT) (unless specified otherwise)