Web Gesture Events

A library that brings high-level asynchronous gesture events to the web by extending the standard addEventListener interface. ☝🏾 📱

Demo

Table of Contents

• Installation
• Usage
  • Basic
  • Config Options
• API Documentation
  • Gesture Provider Config
  • Config Attributes
  • GestureEvent
  • LongPressEvent
  • SwipeEvent
  • PanEvent
  • RotateEvent
  • PinchEvent
• Remarks
• Credits

Installation

npm install web-gesture-events

Usage

Basic

Add event listeners as you would using the addEventListener interface. The GestureEvent interface passed as the argument to all gesture events is an extension of the TouchEvent interface. Which means all the properties you are used to are the same with the addition of a few properties. Rotation and Scale on iOS have been overwritten since they are not considered standard

...
import 'web-gesture-events'; // top level import only side-effects
...

import {SwipeEvent} from 'web-gesture-events';

window.addEventListener('swipe', (ev) => {
    console.log(ev.direction, ev.velocity); // direction and instantaneous velocity
}

Config Options

Config options can be set on the global GestureProvider interface available on the window or by specifying a data-attribute on a DOM element.

window.gestureProvider.config.minPointers = 2;
// OR

  

API Documentation

Gesture Provider Config

Config Attributes

Data- prefixed attributes recognised on DOM elements.

GestureEvent

LongPressEvent

SwipeEvent

PanEvent

RotateEvent

PinchEvent

Remarks

There are a few potential drawbacks I haven't been able to overcome. For example the data-attribute config options might not work if a gesture event listener uses bubbling. Also even though these gesture events are asynchronous there is still the problem that the browser currently does not offer a way to query if event listeners exist on an element anywhere in the DOM tree. Meaning events are always fired regardless of if an event listener was detected or not. Also these events are not trusted events so do bare that in mind whenever using these events to accomplish things that require user interaction such as toggling fullscreen or resuming an audio context.

Credits

1. React Native Gesture Handler
2. Introduction to events
3. Touch Events