@ls-age/svelte-touch

@ls-age/svelte-touch

Touch events for svelte.js

Install

npm install --save[-dev] @ls-age/svelte-touch

Usage

Basic example

In svelte component

<div on:swipe="handleSwipe(event)"></div>

<script>
  import { swipe } from '@ls-age/svelte-touch';

  export default {
    methods: {
      handleSwipe(event) {
        console.log(event);
        // Example output:
        // { type: 'swipe', originalEvent: [TouchEvent], direction: 'left', axis: 'x' }
      }
    },
    events: {
      swipe
    }
  }
</script>

In regular browser environment

import { swipe } from '@ls-age/svelte-touch';

const elm = document.getElementById('swipe-target');

swipe(elm, event => {
  console.log(event);
});

Customize gestures

All gestures can be customized by passing options to them. **Note that you'll have to import from the ./events folder in this case.

Example

import swipe from '@ls-age/svelte-touch/events/swipe';

// This handler requires a finger to move at least 50 pixels to the left to detect a swipe gesture
const customSwipe = swipe({
  threshold: 50,
});

// Use `customSwipe` just like `swipe` was used in the above examples

Available events

tap

A single tap.

Options

• maxDuration (number=150) The maximum duration of the touch event in milliseconds.
• maxMovement (number=20) The maximum distance of the touch event in pixels.

swipe

A swipe gesture.

Options

• axis (SwipeAxis=SwipeAxis.all) The axis to accept swipes on.
• direction (SwipeDirection=SwipeDirection.all) The direction to accept swipes to.
• threshold (number=30) The minimum distance a finger has to move until a swipe is recognized.

swipeUp, swipeRight, swipeDown, swipeLeft, swipeVertical, swipeHorizontal

Shortcuts for swipe gestures restriced to specific directions or axis.

More to come soon