pure-swipe
A 0.7k script that adds swiped-left
, swiped-right
, swiped-up
and swiped-down
events to the DOM using CustomEvent and pure JS. Based on the StackOverflow thread Detect a finger swipe through JavaScript on the iPhone and Android
Usage
Add pure-swipe.min.js to your page and start listening for swipe events. Events bubble, so you can addEventListener
at document level, or on individual elements.
swiped-left
document;
swiped-right
document;
swiped-up
document;
swiped-down
document;
Configure
You can optionally configure how pure-swipe works using the following HTML attributes:
Attribute | Description | Type | Default |
---|---|---|---|
data-swipe-threshold |
Number of pixels a user must move before swipe fires | integer | 20 |
data-swipe-timeout |
Number of milliseconds from touchstart to touchend | integer | 500 |
data-swipe-ignore |
If true, swipe events on this element are ignored | boolean | false |
If you do not provide any attributes, it assumes the following:
Swiper, get swiping!
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
Development
The project includes everything needed to tweak, including a node webserver. Run the following, then visit http://localhost:8080 in your browser.
You can test on a desktop using Device Mode in Google Chrome.
git clone https://github.com/john-doherty/pure-swipecd pure-swipenpm installnpm start
Update .min files
To create a new version of the minified pure-swipe.min.js file from source, tweak the version number in package.json
and run the following:
npm run build
Star the repo
If you find this useful, please star the repo. It helps me priorities which open source projects issues I should tackle first.
History
For change-log, check releases.
License
Licensed under MIT License © John Doherty