qurafi/ezgesture

Small js library for enabling gesture events

EZGesture(~1KB GZipped)

Easily add gestures functionality with simple native DOM events

• EZGesture(~1KB GZipped)
  • Installation
  • Quick Start
  • Usage
    • Drag Events
    • Pinch Events
    • ezgpinchstart
    • ezgpinchmove
    • ezgpinchend
    • Longpress Events
  • Integration with other frameworks
    • Svelte
  • Browser Support

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)

Full Demo

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 with e.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>

Example

Browser Support

Should support most of latest 5 years browsers. if you want more support you could through polyfills