EZGesture(~1KB GZipped)
Easily add gestures functionality with simple native DOM events
Installation
NPM
npm i ezgesture
CDN:
<!-- Full bundle -->
<script src="https://cdn.jsdelivr.net/npm/ezgesture@1.1.1/dist/index.min.js"></script>
<!-- Drag only -->
<script src="https://cdn.jsdelivr.net/npm/ezgesture@1.1.1/dist/drag.min.js"></script>
<!-- Pinch only -->
<script src="https://cdn.jsdelivr.net/npm/ezgesture@1.1.1/dist/pinch.min.js"></script>
<!-- Longpress only -->
<script src="https://cdn.jsdelivr.net/npm/ezgesture@1.1.1/dist/longpress.min.js"></script>
Quick Start
// drag events
EZG.enableDragEvents(elm, options?: {threshold: 0})
elm.addEventListener("ezgdragstart", onDragStart)
elm.addEventListener("ezgdragmove", onDragMove)
elm.addEventListener("ezgdragstop", onDragMove)
// pinch events
EZG.enablePinchEvents(elm, options?: {distanceThreshold: 0, angleThreshold: 0})
elm.addEventListener("ezgpinchstart", onPinchStart)
elm.addEventListener("ezgpinchmove", onPinchMove)
elm.addEventListener("ezgpinchend", onPinchEnd)
// longpress events
EZG.enableLongPressEvents(elm, {duration: 700})
elm.addEventListener("ezglongpress", onLongPress)
Source code available in demos folder
Usage
Drag Events
To enable drag events:
EZG.enableDragEvent(elm, options?)
You can also supply threshold
in options to set minimum distance to trigger events
Events
-
ezgdragstart
- cancelable withe.preventDefault()
-
ezgdragmove
- cancelable. will stop calculating last offset. ezgdragstop
Events parameters:
Use e.detail
to access these event parameters:
// Initial drag position
startX, startY
// Last drag position
lastX, lastY
// Mouse delta from initial drag position
offsetX, offsetY
// Mouse delta from last mouse position
movementX, movementY
// it can be Touch or Mouse Event
// so you could use properties like ctrlKey or altKey
originalEvent
Pinch Events
To enable pinch events:
EZG.enablePinchEvent(elm, options?)
Available options:
-
distanceThreshold
: minimum distance to trigger event -
angleThreshold
: minimum angle(radians)
ezgpinchstart
cancelable: Yes, with e.preventDefault()
parameters:
startTouches
originalEvent
ezgpinchmove
cancelable: Yes, It will stop calculating lastXXX
parameters such as lastOffset
and lastDist
parameters:
-
dx, dy
: difference between the two touches -
da
: angle difference from last movement -
dist
: distance between two fingers -
offset
: distance difference from last touch -
angle
: angle between two fingers (radians) -
midX, midY
: center position of two fingers -
dir
: direction of the pinch. -1=pinch in, 1=out, 0=no direction change startTouches
lastTouches
lastOffset
lastDist
lastAngle
ezgpinchend
cancelable: No
parameters:
startTouches
lastTouches
lastOffset
lastDist
lastAngle
Longpress Events
To enable longpress events:
EZG.enableLongPressEvents(elm, {duration: ms})
The default duration is 700ms
. and it has only one parameter originalEvent
Integration with other frameworks
Svelte
You could also listen to these events with framework that uses native dom events. For example in svelte you could use:
<div use:enablePinchEvents={{options}} on:ezgpinchmove={onPinch}></div>
Browser Support
Should support most of latest 5 years browsers. if you want more support you could through polyfills