Skip to content

Tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.

License

Notifications You must be signed in to change notification settings

maxmarinich/vanilla-swipe

Repository files navigation

vanilla-swipe

Tiny vanilla JS library to detect swipe direction.

Build Status npm version covarage

👉 Live demo.

Types

type ConstructorProps = {
  element?: HTMLElement | null;
  target?: HTMLElement | null;
  delta?: number | 10;
  directionDelta?: number | 0;
  rotationAngle?: number | 0;
  mouseTrackingEnabled?: boolean | false;
  touchTrackingEnabled?: boolean | true;
  preventDefaultTouchmoveEvent?: boolean | false;
  preventTrackingOnMouseleave?: boolean | false;
  onSwipeStart?: EventHandler;
  onSwiping?: EventHandler;
  onSwiped?: EventHandler;
  onTap?: EventHandler;
};

type EventHandler = {
  (e: Event, data: EventData): void;
};

type EventData = {
  absX: number;
  absY: number;
  deltaX: number;
  deltaY: number;
  directionX: 'LEFT' | 'RIGHT' | 'NONE';
  directionY: 'TOP' | 'BOTTOM' | 'NONE';
  duration: number; // ms
  velocity: number; // (px/ms)
};

Props

  • element - target event trigger
  • target - additionally target event trigger, if specified with the element, will be used by all handlers to trigger the action
  • delta - minimal distance in px before a swipe starts
  • directionDelta - minimum distance in px required for the direction to be reversed while swiping.
  • rotationAngle - rotation angle
  • mouseTrackingEnabled - enable mouse tracking
  • touchTrackingEnabled - enable touch tracking
  • preventDefaultTouchmoveEvent - prevent default touch events while touching
  • preventTrackingOnMouseleave - triggered onSwiped callback when the event loses the element's focus
  • onSwipeStart - triggered on swipe start (if the delta is passed)
  • onSwiping - triggered during swipe
  • onSwiped - triggered after swipe
  • onTap - triggered when the swipe value is less than the minimum distance (delta)

Methods

  • init(): void
  • update(options: ConstructorProps): void
  • destroy(): void
  • static isTouchEventsSupported(): boolean

Install

npm install vanilla-swipe

Examples

import VanillaSwipe from 'vanilla-swipe';

const mouseTrackingEnabled = !VanillaSwipe.isTouchEventsSupported();

const VS = new VanillaSwipe({
  element: document.getElementById('some-id'),
  onSwiping: handler,
  onSwiped: handler,
  mouseTrackingEnabled,
});

VS.init();

function handler() {
  console.log(...arguments); // -> Event, EventData
}

Run project

npm i
npm start

Tests

npm test

Coverage

npm run test:coverage

About

Tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.

Resources

License

Stars

Watchers

Forks

Packages

No packages published