TouchSweep

Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.

Visitor stats

Code stats

Install

1npm i touchsweep

or

1yarn add touchsweep

Usage

1import TouchSweep from 'touchsweep';
2
3const area = document.getElementById('swipe-area');
4const data = {
5	value: 1
6};
7const touchThreshold = 20;
8
9const touchSweepInstance = new TouchSweep(area, data, touchThreshold);
10
11// Then listen for custom swipe events and do your magic:
12
13area.addEventListener('swipeleft', event => {
14	// You have swiped left
15	// Custom event data is located in `event.detail`
16	// Details about coordinates are also available under `event.detail`
17});
18
19area.addEventListener('swiperight', event => {
20	// You have swiped right
21	// Custom event data is located in `event.detail`
22	// Details about coordinates are also available under `event.detail`
23});
24
25area.addEventListener('swipedown', event => {
26	// You have swiped down
27	// Custom event data is located in `event.detail`
28	// Details about coordinates are also available under `event.detail`
29});
30
31area.addEventListener('swipeup', event => {
32	// You have swiped up
33	// Custom event data is located in `event.detail`
34	// Details about coordinates are also available under `event.detail`
35});
36
37area.addEventListener('swipemove', event => {
38	// You are swiped continuously
39	// Custom event data is located in `event.detail`
40	// Details about coordinates are also available under `event.detail`
41});
42
43area.addEventListener('tap', event => {
44	// You have tapped
45	// Custom event data is located in `event.detail`
46	// Details about coordinates are also available under `event.detail`
47});

Options and default settings

The module constructor accepts three (3) arguments:

• element: A HTML Element. Default is document.body
• eventData: A plain JS object. Default is {}
• threshold: How many pixels to count until an event is fired. Default is 40

API

TouchSweep provides a minimal API for you to use.

The TouchSweep instance exposes two public methods which allow you to add or to remove all event listeners responsible for the module functionality.

This is useful in cases where you want to remove the TouchSweep container/area from the DOM and prevent possible memory leaks by removing all event listeners related to this DOM element.

In order to remove all previously attached event listeners:

1touchSweepInstance.unbind();

In order to add all previously removed event listeners:

1touchSweepInstance.bind();

Supported Browsers

Currently all evergreen browsers are supported.

Demo

There is a simple demo illustrating how the TouchSweep library works.

Check the code here and the live demo here

Typescript

TouchSweep is written in Typescript and provides full Typescript support out of the box.

LICENSE

MIT

                     

Support and sponsor my work: