JAVASCRIPT
Swipe gestures
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
Subscribe swipe gestures.
Supports filtering swipes be any combination of the criteria supported in the options.
The onStart
, onMove
, and onEnd
options receive as argument an object containing:
event
: the DOMEvent objectelement
: the target elementInstance
: the Ink.UI.Swipe_1
instanceposition
: Array
with [x, y]
coordinates of current positiondt
: Time passed between now and the first event (onMove only)gesture
: an Array containing [x,y] coordinates of every touchmove event received (only if options.storeGesture is enabled) (onEnd only)time
: an Array containing all the dt
values for every touchmove event (onEnd only)overallMovement
: X and Y distance traveled by the touch movement ([x, y]
) (onEnd only)overallTime
: total time passed (onEnd only)Method name | Description |
---|---|
new Swipe(el, options) | Constructor |
el
Element or Selectoroptions
Options Objectoptions.onEnd
Callback function for the `touchend` event. Gets all the gesture information, and is filtered by min/max Dist and Duration options (see below)options.onStart
Callback function for `touchstart` event.options.onMove
Callback function for every `touchmove` event. Gets current gesture information.options.minDist
Minimum allowed distance, in pixels.options.maxDist
Maximum allowed distance, in pixels.options.minDuration
Minimum allowed duration, in seconds.options.maxDuration
Maximum allowed duration, in seconds.options.axis
If either 'x' or 'y' is passed, only swipes where the dominant axis is the given one trigger the callbackoptions.storeGesture
If to store gesture information and provide it to the callback. Defaults to true.options.stopEvents
Flag to stop (default and propagation) of the received events. Defaults to true.Basic usage
Demo
Swipe vertically:
Swipe horizontally:
Drag:
Code