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

ezgesture

v1.1.4

Published

Easily add gestures functionality with simple native DOM events

Downloads

48

Readme

EZGesture(~1KB GZipped)

npm (tag) GitHub

Easily add gestures functionality with simple native DOM events

Installation

NPM

npm i ezgesture

CDN:

<!-- Full bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<!-- Drag only -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/drag.min.js"></script>
<!-- Pinch only -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pinch.min.js"></script>
<!-- Longpress only -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/longpress.min.js"></script>

Quick Start


// drag events
EZG.enableDragEvents(elm, options?: {threshold: 0})
elm.addEventListener("ezgdragstart", onDragStart)
elm.addEventListener("ezgdragmove", onDragMove)
elm.addEventListener("ezgdragstop", onDragMove)

// pinch events
EZG.enablePinchEvents(elm, options?: {distanceThreshold: 0, angleThreshold: 0})
elm.addEventListener("ezgpinchstart", onPinchStart)
elm.addEventListener("ezgpinchmove", onPinchMove)
elm.addEventListener("ezgpinchend", onPinchEnd)

// longpress events
EZG.enableLongPressEvents(elm, {duration: 700})
elm.addEventListener("ezglongpress", onLongPress)

Full Demo

Source code available in demos folder

Usage

Drag Events

To enable drag events:

EZG.enableDragEvent(elm, options?)

You can also supply threshold in options to set minimum distance to trigger events

Events

  • ezgdragstart - cancelable with e.preventDefault()
  • ezgdragmove - cancelable. will stop calculating last offset.
  • ezgdragstop

Events parameters: Use e.detail to access these event parameters:


// Initial drag position
startX, startY

// Last drag position
lastX, lastY

// Mouse delta from initial drag position
offsetX, offsetY

// Mouse delta from last mouse position
movementX, movementY

// it can be Touch or Mouse Event
// so you could use properties like ctrlKey or altKey
originalEvent

Pinch Events

To enable pinch events:

EZG.enablePinchEvent(elm, options?)

Available options:

  • distanceThreshold: minimum distance to trigger event
  • angleThreshold: minimum angle(radians)

ezgpinchstart

cancelable: Yes, with e.preventDefault()

parameters:

startTouches
originalEvent

ezgpinchmove

cancelable: Yes, It will stop calculating lastXXX parameters such as lastOffset and lastDist

parameters:

  • dx, dy: difference between the two touches
  • da: angle difference from last movement
  • dist: distance between two fingers
  • offset: distance difference from last touch
  • angle: angle between two fingers (radians)
  • midX, midY: center position of two fingers
  • dir: direction of the pinch. -1=pinch in, 1=out, 0=no direction change
  • startTouches
  • lastTouches
  • lastOffset
  • lastDist
  • lastAngle

ezgpinchend

cancelable: No

parameters:

  • startTouches
  • lastTouches
  • lastOffset
  • lastDist
  • lastAngle

Longpress Events

To enable longpress events:

EZG.enableLongPressEvents(elm, {duration: ms})

The default duration is 700ms. and it has only one parameter originalEvent

Integration with other frameworks

Svelte

You could also listen to these events with framework that uses native dom events. For example in svelte you could use:

<div use:enablePinchEvents={{options}} on:ezgpinchmove={onPinch}></div>

Example

Browser Support

Should support most of latest 5 years browsers. if you want more support you could through polyfills