https://github.com/scriptex/touchsweep
Detect your swipe gestures direction
https://github.com/scriptex/touchsweep
event-detection mouse-event-detection mouse-events swipe-detector touch-event-detection touch-events
Last synced: 4 months ago
JSON representation
Detect your swipe gestures direction
- Host: GitHub
- URL: https://github.com/scriptex/touchsweep
- Owner: scriptex
- License: mit
- Created: 2018-06-28T04:54:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-30T11:31:03.000Z (about 1 year ago)
- Last Synced: 2024-05-02T06:13:52.325Z (about 1 year ago)
- Topics: event-detection, mouse-event-detection, mouse-events, swipe-detector, touch-event-detection, touch-events
- Language: TypeScript
- Homepage: https://touchsweep.atanas.info
- Size: 1.46 MB
- Stars: 10
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/touchsweep)
[](https://github.com/scriptex/touchsweep/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/touchsweep/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/touchsweep&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-touchsweep-master)
[](https://www.codefactor.io/repository/github/scriptex/touchsweep)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/touchsweep/)
# TouchSweep
> Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.
## Visitor stats
## Code stats
## Install
```sh
npm i touchsweep
```
or
```sh
yarn add touchsweep
```
## Usage
```javascript
import TouchSweep from 'touchsweep';
const area = document.getElementById('swipe-area');
const data = {
value: 1
};
const touchThreshold = 20;
const touchSweepInstance = 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`
// Details about coordinates are also available under `event.detail`
});
area.addEventListener('swiperight', event => {
// You have swiped right
// Custom event data is located in `event.detail`
// Details about coordinates are also available under `event.detail`
});
area.addEventListener('swipedown', event => {
// You have swiped down
// Custom event data is located in `event.detail`
// Details about coordinates are also available under `event.detail`
});
area.addEventListener('swipeup', event => {
// You have swiped up
// Custom event data is located in `event.detail`
// Details about coordinates are also available under `event.detail`
});
area.addEventListener('swipemove', event => {
// You are swiped continuously
// Custom event data is located in `event.detail`
// Details about coordinates are also available under `event.detail`
});
area.addEventListener('tap', event => {
// You have tapped
// Custom event data is located in `event.detail`
// Details about coordinates are also available under `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
## 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:
```javascript
touchSweepInstance.unbind();
```
In order to add all previously removed event listeners:
```javascript
touchSweepInstance.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](https://github.com/scriptex/touchsweep/blob/master/demo/index.html) and the live demo [here](https://touchsweep.atanas.info)
## Typescript
`TouchSweep` is written in Typescript and provides full Typescript support out of the box.
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
