All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Swipe class

Subscribe swipe gestures.

Supports filtering swipes be any combination of the criteria supported in the options.

Arguments received by the callbacks

The onStart, onMove, and onEnd options receive as argument an object containing:

event: the DOMEvent object
element: the target element
Instance: the Ink.UI.Swipe_1 instance
position: Array with [x, y] coordinates of current position
dt: 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)

Methods
Method name	Description
new Swipe(el, options)	Constructor

new Ink.UI.Swipe(el, options)

Accepts

el
Element or Selector
options
Options Object
options.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 callback
options.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

<style>
    .swipe{
        display: block;
        width: 320px;
        height: 320px;
        background-color: #eeebe5;
    }
</style>
<p>Swipe vertically:</p>
<div class="swipe swipe-vertical"></div>

<p>Swipe horizontally:</p>
<div class="swipe swipe-horizontal"></div>

<p>Drag:</p>
<div class="swipe swipe-drag"></div>

<script>
    Ink.requireModules(['Ink.UI.Swipe_1', 'Ink.Dom.Element_1'], function (Swipe, InkElement) {
        new Swipe('.swipe-vertical', {
            axis: 'y',
            minDist: 20,
            onEnd: function (o) {
                InkElement.setTextContent(o.element, 'Swiped vertically!');
                setTimeout(
                    Ink.bindMethod(InkElement, 'setTextContent', o.element, ''), 500);
            }
        });
        new Swipe('.swipe-horizontal', {
            axis: 'x',
            minDist: 50,
            onEnd: function (o) {
                InkElement.setTextContent(o.element, 'Swiped horizontally!');
                setTimeout(
                    Ink.bindMethod(InkElement, 'setTextContent', o.element, ''), 500);
            }
        })

        new Swipe('.swipe-drag', {
            onStart: function (o) {
                o.element.style.position = 'absolute'
            },
            onMove: function (o) {
                var style = o.element.style
                style.left = o.position[0] + 'px'
                style.top = o.position[1] + 'px'
            },
            onEnd: function (o) {
                o.element.style.position = 'static'
            }
        })
    });
</script>