Miniswipe NPM | npm.io

miniswipe

A tiny library designed to handle swipe gestures on touchscreens. Written in ES2015+, use Babel for cross-browser support.

Warning: If you look for a polished, production-grade and feature-rich library for handling touch events, please continue your search. This library is in an early state, built mostly for educational purposes and not tested thoroughly yet.

Installation

NPM

  npm install miniswipe --save

Manual

Miniswipe will be added to window as a global.
<script type="text/javascript" src="https://unpkg.com/miniswipe"></script>
Usage
Miniswipe
Create a new handler for touch events
const swipeHandler = new Miniswipe(document.body, { debug: false, allowClick: true })
Arguments:
{string | HTMLElement} The element on which the handler listens for touch gestures
{Object} Options
Options
{Options.allowClick} If true: miniswipe will handle not only touch events but mouse gestures as well {Options.allowMouseLeave} If true: allow swipes to end with a mouseleave event rather than just mouseup {Options.debug} If true: miniswipe will log every registered swipe and the subsequently executed functions

Note: All methods on the Miniswipe class are chainable (return this)

`left`,`right`,`up`,`down`

Associate methods with swipe gestures

Note: You can call these methods multiple times without issue, e.g. if you call .left() twice on the same swipe handler, both passed functions will be run when a leftwards swipe is detected.
  swipeHandler
    .left(() => console.log('User swiped left!'))
    .right(() => console.log('User swiped right!'))
    .up(() => console.log('User swiped up!'))
    .down(() => console.log('User swiped down!'))
The functions you pass to left, right, up or down have the swipe handler's target element bound as their this context (unless lexically scoped) and receive the event that completed the swipe ('touchmove', 'mouseup' or 'mouseleave' if { allowMouseLeave: true } in options) as their first argument. Example:
  swipeHandler.up(function(event) {
    console.log(this === event.currentTarget) // > true
  })
Note: Miniswipe will throw an error if you start() a handler that is already active and vice versa
start
Start listening for touch events
  swipeHandler.start()
stop
Stop listening for touch events
  swipeHandler.stop()
active
Set to true or false depending on whether the handler is started or stopped
  if (swipeHandler.active) swipeHandler.stop()
Roadmap