wanjarus / touchsweep

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

TouchSweep

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

This module works on touch-enabled devices only.

Install

npm i touchsweep

or

yarn add touchsweep

or

just download this repository and use the files located in dist folder.

Usage

import TouchSweep from 'touchsweep';

const area = document.getElementById('swipe-area');
const data = {
	value: 1
};
const touchThreshold = 20;

new TouchSweep(area, data, touchThreshold);

// Then listen for custom swipe events and do your magic:

area.addEventListener('swipeleft', event => {
	// You have swiped left
	// Custom event data is located in event.detail
});

area.addEventListener('swiperight', event => {
	// You have swiped right
	// Custom event data is located in event.detail
});

area.addEventListener('swipedown', event => {
	// You have swiped down
	// Custom event data is located in event.detail
});

area.addEventListener('swipeup', event => {
	// You have swiped up
	// Custom event data is located in event.detail
});

area.addEventListener('tap', event => {
	// You have tapped
	// Custom event data is located in event.detail
});

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

Supported Browsers

Currently all evergreen browsers are supported. IE 10+ support is planned in the near future.

Demo

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

Check it out here

LICENSE

MIT