Gesture Helper

Detect tap and swipe gestures over elements.

Try me!

Usage

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Load the gesture helper on the target element

Add the ctrl z-load attributes to the element you want to detect gesture over

<div ctrl z-load="@lib/controllers/gesture-helper"
z-options="gesture_options">


<!-- gesture detection area -->

</div>
<script>
gesture_options = {
on: {
'gesture:touch': function(e, tp) {
// TODO: handle touch
},
'gesture:pan': function(e, tp) {
// TODO: handle pan
},
'gesture:release': function(e, tp) {
// TODO: handle release
},
'gesture:tap': function(e, tp) {
// TODO: handle tap
},
'gesture:swipe': function(e, tp) {
// TODO: handle swipe
switch(tp.direction) {
case 'up':
break;
case 'down':
break;
case 'left':
break;
case 'right':
break;
}
}
}
}
</script>

Event callbacks receive the tp (TouchPointer) argument that is described below:

tp = {

// time frame
startTime,
endTime,

// initial touch position
startX,
startY,

// relative movement
shiftX,
shiftY,

// actual direction, speed, position
direction, // 'left' | 'right' | 'up' | 'down'
velocity,
x: x,
y: y,

// guessed scrolling direction
scrollIntent(), // false | 'horizontal' | 'vertical'

// original event + cancel method
event,
cancel()
};

Option attributes

  • ctrl z-load="@lib/controllers/gesture-helper" constructor
    load the gesture-helper controller on the element.
  • z-context optional
    identifier name to be used to access this component from JavaScript.
  • data-o-passive optional
    use passive mode for best performance or disable passive mode to prevent default scrolling.
    The default value is true.
arrow_left  Previous
Next arrow_right 
extension
zKit components v1.1.1
web enhancing bits