Gesture Helper

Detect tap and swipe gestures over elements.

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="https://zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Load the gesture helper on the target element

Add the data-ui-load attribute to the element you want to detect gesture on

<div data-ui-load="@lib/controllers/gesture_helper"
     data-ui-options="gesture_options">
    
</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>

Callbacks will receive the tp (TouchPointer) parameter

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

• data-ui-load="@lib/controllers/gesture_helper" constructor
  load the gesture_helper controller on the element.
• data-ui-context optional
  identifier name to be used to reference 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.

Source code

Source code is available in the lib/controllers folder of zKit repository.