miniswipe

A tiny library designed to handle swipe gestures on touchscreens.

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.

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()

jonaskuske/miniswipe