npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

miniswipe

v0.3.4

Published

A small library to easily handle swipe gestures

Downloads

18

Readme

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

Planned features include:

  • define a threshold for minimum swipe length
  • multi-finger support (e.g. two-finger swipe up)
  • more supported gestures (e.g. pinch-to-zoom, tap, long-tap)
  • swipe distance tracking