vanilla-swipe

Tiny vanilla JS library to detect swipe direction.


#### 👉 Live demo.

$3

``typescript
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)
};

`


$3

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

$3

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

$3

`bash
npm install vanilla-swipe
`

$3

`js
import VanillaSwipe from 'vanilla-swipe';

const isTouchEventsSupported = VanillaSwipe.isTouchEventsSupported();

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

VS.init();

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

$3


`$xslt
npm i
npm start
`

$3

`
npm test
`

$3

`
npm run test:coverage
``