Alpine Gestures

Touch gesture recognition for Alpine.js

Install

CDN

<script defer src="https://unpkg.com/alpine-gestures@0.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

As module

$ npm install --save alpinejs alpine-gestures

import Alpine from 'alpinejs';
import AlpineGestures  from 'alpine-gestures';

Alpine.plugin(AlpineGestures);
Alpine.start();

Usage

Listening for gesture events

• x-gesture:pinch="console.log($gesture)"
  • type
  • distance
  • scale
• x-gesture:pan="console.log($gesture)"
  • type
  • clientX
  • clientY
  • deltaX
  • deltaY
• x-gesture:doubletap="console.log($gesture)"
  • type
• .prevent modifier

Deriving state from gestures

$pinchable()

• $pinchable(initialValue)
  • initialValue
• $pinchable(options)
  • options
    • value
    • min
    • max
    • pinchEl
• returned state
  • value
  • min
  • max

$pannable()

• $pannable(initialX, initialY)
  • initialX
  • initialY
• $pannable(options)
  • options
    • x
    • y
    • minX
    • maxX
    • minY
    • maxY
    • panEl
• returned state
  • x
  • y
  • minX
  • maxX
  • minY
  • maxY