pure-swipe

A 0.7k script that adds swipe events to the DOM for touch enabled devices

Usage no npm install needed!

<script type="module">
  import pureSwipe from 'https://cdn.skypack.dev/pure-swipe';
</script>

README

pure-swipe

Linked In Twitter Follow

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.addEventListener('swiped-left', function(e) {
  console.log(e.target); // element that was swiped
});

swiped-right

document.addEventListener('swiped-right', function(e) {
    console.log(e.target); // element that was swiped
});

swiped-up

document.addEventListener('swiped-up', function(e) {
    console.log(e.target); // element that was swiped
});

swiped-down

document.addEventListener('swiped-down', function(e) {
    console.log(e.target); // element that was swiped
});

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:

<div data-swipe-threshold="20"
     data-swipe-timeout="500"
     data-swipe-ignore="false">
     Swiper, get swiping!
</div>

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. 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-swipe
cd pure-swipe
npm install
npm 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