TouchKit

Use touch gestures in your web application.

TypeScript supported.

Install

npm

npm i @raphpare/touch-kit --save

Yarn

yarn add @raphpare/touch-kit

Examples

HTML

<div class="box">
    ...
</div>

TouchKit Class

import { TouchKit } from '@raphpare/touch-kit';

const touchKit = new TouchKit(refBox, {
    tap: () => console.log('tap'),
    touchhold: () => console.log('touchhold'),
    move: () => console.log('move'),
    swipe: () => console.log('swipe'),
    swipeLeft: () => console.log('swipeLeft'),
    swipeRight: () => console.log('swipeRight'),
    swipeUp: () => console.log('swipeUp'),
    swipeDown: () => console.log('swipeDown'),
});

const stopTouchKit = () => {
    stopTouchKit.stop();
}

Functions

setTapEvent

import { setTapEvent } from '@raphpare/touch-kit';

const tapEvent = setTapEvent(
    document.querySelector('.box'),
    () => console.log('tap')
);

const stopTapEvent = () => {
    tapEvent.stop();
}

setTouchholdEvent

import { setTouchholdEvent } from '@raphpare/touch-kit';

const touchholdEvent = setTouchholdEvent(
    document.querySelector('.box'),
    () => console.log('touchhold')
);

const stopTouchholdEvent = () => {
    touchholdEvent.stop();
}

setMoveEvent

import { setMoveEvent } from '@raphpare/touch-kit';

const moveEvent = setMoveEvent(
    document.querySelector('.box'),
    () => console.log('move')
);

const stopMoveEvent = () => {
    moveEvent.stop();
}

setStartEvent

import { setStartEvent } from '@raphpare/touch-kit';

const startEvent = setStartEvent(
    document.querySelector('.box'),
    () => console.log('start')
);

const stopStartEvent = () => {
    startEvent.stop();
}

setEndEvent

import { setEndEvent } from '@raphpare/touch-kit';

const endEvent = setEndEvent(
    document.querySelector('.box'),
    () => console.log('end')
);

const stopEndEvent = () => {
    endEvent.stop();
}

setSwipeEvent

import { setSwipeEvent } from '@raphpare/touch-kit';

const swipeEvent = setSwipeEvent(
    document.querySelector('.box'),
    () => console.log('swipe')
);

const stopSwipeEvent = () => {
    swipeEvent.stop();
}

setSwipeLeftEvent

import { setSwipeLeftEvent } from '@raphpare/touch-kit';

const swipeLeftEvent = setSwipeLeftEvent(
    document.querySelector('.box'),
    () => console.log('swipeLeft')
);

const stopSwipeLeftEvent = () => {
    swipeLeftEvent.stop();
}

setSwipeRightEvent

import { setSwipeRightEvent } from '@raphpare/touch-kit';

const swipeRightEvent = setSwipeRightEvent(
    document.querySelector('.box'),
    () => console.log('swipeRight')
);

const stopSwipeRightEvent = () => {
    swipeRightEvent.stop();
}

setSwipeUpEvent

import { setSwipeUpEvent } from '@raphpare/touch-kit';

const swipeUpEvent = setSwipeUpEvent(
    document.querySelector('.box'),
    () => console.log('swipeUp')
);

const stopSwipeUpEvent = () => {
    swipeUpEvent.stop();
}

setSwipeDownEvent

import { setSwipeDownEvent } from '@raphpare/touch-kit';

const swipeDownEvent = setSwipeDownEvent(
    document.querySelector('.box'),
    () => console.log('swipeDown')
);

const stopSwipeDownEvent = () => {
    swipeDownEvent.stop();
}

Functions Parameters

| Parameter | Type | Required | | --------- | -------------------------------- | -------- | | element | HtmlElement | True | | callback | (event: TouchKitEvent) => void | True | | options | TouchKitOptions | False |