ZingTouch

https://github.com/zingchart/zingtouch
Admin
ZingTouch is a modern JavaScript touch gesture library that enables developers to configure...
Tokens:9,072
Snippets:83
Trust Score:8.7
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Complete Image Gallery Application with ZingTouch

Source: https://context7.com/zingchart/zingtouch/llms.txt

This example demonstrates a full image gallery application using ZingTouch, including pan, zoom, rotate, double-tap, and swipe gestures.

```javascript
// Initialize ZingTouch
var ZingTouch = require('zingtouch');

// Set up the gallery region
var gallery = document.getElementById('gallery');
var image = document.getElementById('gallery-image');
var region = new ZingTouch.Region(gallery);

// State tracking
var state = {
  scale: 1,
  rotation: 0,
  translateX: 0,
  translateY: 0
};

function updateTransform() {
  image.style.transform =
    'translate(' + state.translateX + 'px, ' + state.translateY + 'px) ' +
    'scale(' + state.scale + ') ' +
    'rotate(' + state.rotation + 'deg)';
}

// Pan to move the image
var panGesture = new ZingTouch.Pan({
  threshold: 1,
  onMove: function(inputs, stateObj, element, output) {
    if (output.data[0]) {
      state.translateX += output.data[0].change.x;
      state.translateY += output.data[0].change.y;
      updateTransform();
    }
  }
});

// Distance (pinch/expand) to zoom
var zoomGesture = new ZingTouch.Distance({
  threshold: 1,
  onMove: function(inputs, stateObj, element, movement) {
    state.scale = Math.max(0.5, Math.min(4, state.scale + movement.change / 200));
    updateTransform();
  }
});

// Rotate to spin the image
var rotateGesture = new ZingTouch.Rotate({
  onMove: function(inputs, stateObj, element, rotate) {
    state.rotation += rotate.distanceFromLast * (180 / Math.PI);
    updateTransform();
  }
});

// Double-tap to reset
var doubleTap = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 300
});

// Swipe to navigate
var navSwipe = new ZingTouch.Swipe({
  escapeVelocity: 0.3
});

// Bind all gestures
region.bind(image, panGesture, function(e) {});
region.bind(image, zoomGesture, function(e) {});
region.bind(image, rotateGesture, function(e) {});

region.bind(image, doubleTap, function(e) {
  // Reset transform on two-finger tap
  state = { scale: 1, rotation: 0, translateX: 0, translateY: 0 };
  updateTransform();
  console.log('Image reset');
});

region.bind(gallery, navSwipe, function(e) {
  var direction = e.detail.data[0].currentDirection;
  if (direction > 135 && direction < 225) {
    console.log('Next image');
    // loadNextImage();
  } else if (direction < 45 || direction > 315) {
    console.log('Previous image');
    // loadPreviousImage();
  }
});
```

--------------------------------

### Implement Pan Gestures

Source: https://context7.com/zingchart/zingtouch/llms.txt

Tracks continuous movement across the screen. Useful for drag-and-drop interactions by utilizing start, move, and end callbacks.

```javascript
var region = new ZingTouch.Region(document.body);
var draggable = document.getElementById('draggable');
var initialX = 0, initialY = 0;

// Basic pan detection
region.bind(draggable, 'pan', function(e) {
  var panData = e.detail.data[0];
  if (panData) {
    console.log('Distance from origin: ' + panData.distanceFromOrigin);
    console.log('Current direction: ' + panData.currentDirection + ' rad');
    console.log('Direction degrees: ' + panData.currentDegree);
    console.log('Change X: ' + panData.change.x + ', Y: ' + panData.change.y);
  }
});

// Custom pan with callbacks for drag-and-drop
var dragPan = new ZingTouch.Pan({
  numInputs: 1,      // Number of fingers required
  threshold: 1,      // Minimum pixels to move before triggering
  onStart: function(inputs) {
    var rect = draggable.getBoundingClientRect();
    initialX = rect.left;
    initialY = rect.top;
    draggable.classList.add('dragging');
  },
  onMove: function(inputs, state, element, output) {
    if (output.data[0]) {
      var change = output.data[0].change;
      draggable.style.transform =
        'translate(' + change.x + 'px, ' + change.y + 'px)';
    }
  },
  onEnd: function(inputs) {
    draggable.classList.remove('dragging');
  }
});

region.bind(draggable, dragPan, function(e) {
  // Final pan data available here
});
```

--------------------------------

### Creating a Custom 'Hold' Gesture

Source: https://context7.com/zingchart/zingtouch/llms.txt

Extends ZingTouch.Gesture to create a custom 'hold' gesture. It requires implementing start, move, and end hooks and defines duration and tolerance options.

```javascript
// Create a custom "Hold" gesture that triggers after holding for a duration
class Hold extends ZingTouch.Gesture {
  constructor(options) {
    super();
    this.type = 'hold';
    this.duration = (options && options.duration) ? options.duration : 500;
    this.tolerance = (options && options.tolerance) ? options.tolerance : 10;
  }

  start(inputs, state, element) {
    if (inputs.length === 1) {
      var progress = inputs[0].getGestureProgress(this.getId());
      progress.startTime = Date.now();
      progress.startX = inputs[0].current.x;
      progress.startY = inputs[0].current.y;
      progress.timer = setTimeout(() => {
        progress.held = true;
      }, this.duration);
    }
    return null;
  }

  move(inputs, state, element) {
    var progress = inputs[0].getGestureProgress(this.getId());
    var deltaX = Math.abs(inputs[0].current.x - progress.startX);
    var deltaY = Math.abs(inputs[0].current.y - progress.startY);

    // Cancel if moved too far
    if (deltaX > this.tolerance || deltaY > this.tolerance) {
      clearTimeout(progress.timer);
      progress.held = false;
    }
    return null;
  }

  end(inputs) {
    var progress = inputs[0].getGestureProgress(this.getId());
    clearTimeout(progress.timer);

    if (progress.held) {
      return { duration: Date.now() - progress.startTime };
    }
    return null;
  }
}

// Register and use the custom gesture
var region = new ZingTouch.Region(document.body);
var holdGesture = new Hold({ duration: 1000, tolerance: 5 });

region.register('hold', holdGesture);

region.bind(document.getElementById('target'), 'hold', function(e) {
  console.log('Held for ' + e.detail.duration + 'ms');
});
```

--------------------------------

### Registering and Using Custom Gestures

Source: https://context7.com/zingchart/zingtouch/llms.txt

Demonstrates registering custom gestures like 'quickTap' and 'twoFingerSwipe' with a ZingTouch Region and then using them via name in the bind syntax or chainable syntax.

```javascript
var region = new ZingTouch.Region(document.body);

// Register a custom tap gesture with a short delay
var quickTap = new ZingTouch.Tap({ maxDelay: 100 });
region.register('quickTap', quickTap);

// Register a two-finger swipe
var twoFingerSwipe = new ZingTouch.Swipe({ numInputs: 2 });
region.register('twoFingerSwipe', twoFingerSwipe);

// Now use registered gestures by name
region.bind(document.getElementById('target'), 'quickTap', function(e) {
  console.log('Quick tap detected');
});

// Chainable syntax also works with registered gestures
region.bind(document.getElementById('target'))
  .quickTap(function(e) { console.log('Quick tap!'); })
  .twoFingerSwipe(function(e) { console.log('Two-finger swipe!'); });

// Unregister a gesture (also unbinds all elements using it)
var unregisteredGesture = region.unregister('quickTap');
console.log('Unregistered: ' + unregisteredGesture.type);
```

--------------------------------

### Initialize a Gesture instance

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Create a new instance of a gesture class.

```javascript
new ZingTouch.Gesture()
```

--------------------------------

### Configure Tap Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Instantiate a Tap gesture with custom options for maximum delay, number of inputs, and tolerance. Adjust these to fine-tune tap detection sensitivity.

```javascript
new ZingTouch.Tap({
	maxDelay: 200,
	numInputs: 2,
	tolerance: 125
})
```

--------------------------------

### Region Constructor and Usage

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Demonstrates the instantiation of a ZingTouch Region and binding a gesture to an element within that region. The region defines the area for gesture recognition.

```javascript
new Region(element, [capture], [preventDefault])
```

```javascript
var touchArea = document.getElementById('toucharea');
var myRegion = new ZingTouch.Region(touchArea);

myRegion.bind(touchArea, 'swipe', function(e){
	console.log(e.detail);
});
```

--------------------------------

### Configure Tap Gesture

Source: https://context7.com/zingchart/zingtouch/llms.txt

Bind a basic tap gesture or create a custom Tap gesture instance with specific options like delay, number of inputs, and movement tolerance. The onEnd callback provides timing details.

```javascript
var region = new ZingTouch.Region(document.body);
var button = document.getElementById('tap-button');

region.bind(button, 'tap', function(e) {
  console.log('Tapped! Interval: ' + e.detail.interval + 'ms');
});

var doubleTap = new ZingTouch.Tap({
  minDelay: 0,
  maxDelay: 300,
  numInputs: 2,
  tolerance: 10,
  onEnd: function(inputs, timing) {
    console.log('Tap ended, interval: ' + timing.interval);
  }
});

region.bind(button, doubleTap, function(e) {
  document.body.classList.toggle('dark-mode');
});
```

--------------------------------

### Use chainable gesture binding

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Bind multiple gestures to an element using a chainable syntax.

```javascript
var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(myElement);
var chainableObject = myRegion.bind(myElement);

chainableObject
	.tap(function(e){
		console.log(e.detail);
	})
	.swipe(function(e){
		console.log(e.detail);
	}, true)
```

--------------------------------

### Chainable Bind Once Syntax in ZingTouch

Source: https://context7.com/zingchart/zingtouch/llms.txt

The `bindOnce()` method supports a chainable syntax for binding multiple single-use gestures.

```javascript
// Chainable bindOnce syntax
region.bindOnce(introElement)
  .swipe(function(e) {
    console.log('First swipe detected, binding removed');
  });
```

--------------------------------

### Implement Swipe Gestures

Source: https://context7.com/zingchart/zingtouch/llms.txt

Detects quick directional movements. Use custom configuration to adjust velocity thresholds and track progress.

```javascript
var region = new ZingTouch.Region(document.body);
var carousel = document.getElementById('carousel');

// Basic swipe detection
region.bind(carousel, 'swipe', function(e) {
  var swipeData = e.detail.data[0];
  console.log('Velocity: ' + swipeData.velocity + ' px/ms');
  console.log('Direction: ' + swipeData.currentDirection + ' degrees');
  console.log('Distance: ' + swipeData.distance + ' pixels');
});

// Custom swipe with lower velocity threshold
var sensitiveSwipe = new ZingTouch.Swipe({
  numInputs: 1,           // Number of fingers required
  escapeVelocity: 0.15,   // Minimum velocity (px/ms) to trigger
  maxRestTime: 100,       // Max time (ms) between move events
  timeDistortion: 100,    // Time distortion for browser inconsistencies
  maxProgressStack: 10,   // Max move events to track
  onMove: function(inputs, state, element) {
    console.log('Swipe in progress...');
  },
  onEnd: function(inputs, output) {
    console.log('Swipe completed');
  }
});

region.bind(carousel, sensitiveSwipe, function(e) {
  var direction = e.detail.data[0].currentDirection;

  // Determine swipe direction (0=right, 90=up, 180=left, 270=down)
  if (direction > 135 && direction < 225) {
    console.log('Swiped left - next slide');
  } else if (direction < 45 || direction > 315) {
    console.log('Swiped right - previous slide');
  }
});
```

--------------------------------

### Create ZingTouch Region

Source: https://context7.com/zingchart/zingtouch/llms.txt

Import ZingTouch and create a Region instance to capture touch events on a DOM element. Options can control event capture phase and default browser behavior.

```javascript
var ZingTouch = require('zingtouch');

var region = new ZingTouch.Region(document.body);

var customRegion = new ZingTouch.Region(
  document.getElementById('container'),
  false, 
  true
);
```

--------------------------------

### Optimize gesture binding performance

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Reuse gesture instances instead of creating new ones inside loops to improve memory usage.

```javascript
//Poor performance
var delay = 100;
for (var i = 0; i < 100; i++){
	myRegion.bind(myElement, new ZingTouch.Tap({maxDelay : delay}),function(e){...});
}
```

```javascript
//Better performance
var delay = 100;
var customTap = new ZingTouch.Tap({maxDelay : delay});
for (var i = 0; i < 100; i++){
	myRegion.bind(myElement, customTap, function(e){...});
}
```

--------------------------------

### Configure Pan Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Create a Pan gesture with a specified number of inputs. This gesture is detected when the user touches the screen and moves their input(s) across the area.

```javascript
new ZingTouch.Pan({
	numInputs: 2
})
```

--------------------------------

### Region.bindOnce()

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Similar to Region.bind, but the gesture event will only be captured once before the binding is destroyed.

```APIDOC
## Region.bindOnce()

### Description
Identical to both method signatures of `bind`, but is "bound once" meaning the event will only be captured once before it is destroyed.

### Method
`Region.bindOnce`

### See Also
See [Region.bind](#bind)
```

--------------------------------

### Include ZingTouch via Script Tag

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Include the ZingTouch library in your HTML file using a script tag. Ensure the path to the file is correct.

```html
<script src='./path/to/zingtouch.min.js'></script>
```

--------------------------------

### Include ZingTouch via Node.js

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Use this method to include ZingTouch in your project if you are using Node.js or a similar module system.

```javascript
var ZingTouch = require('zingtouch');
```

--------------------------------

### Region.register(key, gesture)

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Registers a new gesture instance to a Region, making it available for binding.

```APIDOC
## Region.register(key, gesture)

### Description
Registers a gesture of the Gesture class to each Region. Allows the newly registered Gesture to be accessible in the bind/unbind syntax including the chainable object of bind.

### Parameters
- **key** (string) - Required - A string to identify the new gesture.
- **gesture** (Object) - Required - An instance of the Gesture class

### Response
- **Returns** (Object) - The gesture object registered

### Request Example
```js
var myTapGesture = new ZingTouch.Tap({ maxDelay : 60 });
var myRegion = new ZingTouch.Region(document.body);
myRegion.register('shortTap', myTapGesture);
```
```

--------------------------------

### Register a custom gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Instantiate a gesture class and register it to a region to enable custom gesture binding.

```js
var myTapGesture = new ZingTouch.Tap({ maxDelay : 60 });

var myRegion = new ZingTouch.Region(document.body);
myRegion.register('shortTap', myTapGesture);
```

--------------------------------

### Configure Swipe Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Create a Swipe gesture with specific settings for the number of inputs, escape velocity, and maximum rest time between events. These parameters control the swipe detection criteria.

```javascript
new ZingTouch.Swipe({
	numInputs: 2,
	maxRestTime: 100,
	escapeVelocity: 0.25
});
```

--------------------------------

### Include ZingTouch via ES6 Import

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Import ZingTouch into your project using ES6 module syntax. This is common in modern JavaScript development.

```javascript
import ZingTouch from 'zingtouch';
```

--------------------------------

### Bind a custom gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Use the registered gesture key with standard or chainable bind syntax.

```js
myRegion.bind(myElement, 'shortTap', function(e){});
```

```js
myRegion.bind(myElement).shortTap(function(e){});
```

--------------------------------

### Create a ZingTouch Region

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Initialize a ZingTouch Region, which is an area that listens for touch events. It's typically bound to a DOM element.

```javascript
var zt = new ZingTouch.Region(document.body);
```

--------------------------------

### Implement Distance Gestures

Source: https://context7.com/zingchart/zingtouch/llms.txt

Detects two-finger pinch and expand movements. Ideal for zoom interactions by calculating scale changes based on distance deltas.

```javascript
var region = new ZingTouch.Region(document.body);
var zoomArea = document.getElementById('zoom-container');
var currentScale = 1;

// Basic distance detection
region.bind(zoomArea, 'distance', function(e) {
  console.log('Distance between fingers: ' + e.detail.distance + 'px');
  console.log('Center point: X=' + e.detail.center.x + ', Y=' + e.detail.center.y);
  console.log('Change: ' + e.detail.change + 'px');

  // Positive change = expand (zoom in), negative = pinch (zoom out)
  if (e.detail.change > 0) {
    console.log('Expanding');
  } else {
    console.log('Pinching');
  }
});

// Custom distance gesture for image zoom
var zoomGesture = new ZingTouch.Distance({
  threshold: 1,     // Minimum pixel change to emit
  onStart: function(inputs, state, element) {
    console.log('Zoom gesture started');
  },
  onMove: function(inputs, state, element, movement) {
    // Scale based on distance change
    var scaleDelta = movement.change / 100;
    currentScale = Math.max(0.5, Math.min(3, currentScale + scaleDelta));
    zoomArea.style.transform = 'scale(' + currentScale + ')';
  }
});

region.bind(zoomArea, zoomGesture, function(e) {
  // e.detail contains: { distance, center: {x, y}, change }
});
```

--------------------------------

### Instantiate Rotate Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Initialize a Rotate gesture. This gesture can be detected by two inputs moving in a circular pattern or a single input moving circularly around a center point.

```javascript
new ZingTouch.Rotate()
```

--------------------------------

### Instantiate Distance Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Initialize a Distance gesture. This gesture detects when two inputs move closer or further apart on the screen.

```javascript
new ZingTouch.Distance()
```

--------------------------------

### Region.bind(element, gesture, handler, [capture])

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Binds a single DOM element to a specific gesture, executing a handler function when the gesture is detected. Supports default or registered gestures, and allows for optional capture phase event handling.

```APIDOC
## Region.bind(element, gesture, handler, [capture])

### Description
Binds a single element to a gesture, executing the handler when the gesture is emitted.

### Method
`Region.bind`

### Parameters
#### Path Parameters
* `element` - (DOM Element) - Required - The DOM element to bind the gesture to.
* `gesture` - (String or Gesture Instance) - Required - Either the key (string) of a default or registered gesture, or an instance of the `Gesture` class.
* `handler` - (Function) - Required - A function to be called every time the gesture is emitted. The handler receives an Event object from the CustomEvent interface, with gesture details in `event.detail`.
* `capture` - (Boolean) - Optional - Designates the event to be fired on the capture or bubbling phase.

### Request Example
```js
var myRegion = new ZingTouch.Region(document.body);
var myElement = document.getElementById('some-div');

myRegion.bind(myElement, 'tap', function(e) {
	console.log('Tap gesture emitted: ' + e.detail.interval);
});
```

### Request Example 2
```js
var myElement = document.getElementById('some-div');
var myTapGesture = new ZingTouch.Tap({ maxDelay : 100 });
var myRegion = new ZingTouch.Region(document.body);

myRegion.bind(myElement, myTapGesture, function(e) {
	console.log('Custom Tap gesture emitted: ' + e.detail.interval);
}, false);
```

### Response
This method does not return a value directly, but triggers the handler function upon gesture detection.
```

--------------------------------

### Region.bind(element)

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Binds a DOM element to a Region, returning a chainable object that allows binding of the 6 main gestures (tap, swipe, pinch, expand, pan, rotate) or any registered custom gestures.

```APIDOC
## Region.bind(element)

### Description
Passing a qualified DOM element to the bind function will return an object that can be chainable with the 6 main gestures, or any other gestures that you may have registered with `Region.register`.

### Method
`Region.bind`

### Parameters
#### Path Parameters
* `element` - (DOM Element) - Required - The DOM element to bind gestures to.

### Returns
* A chainable object with methods for binding gestures: `.tap()`, `.swipe()`, `.pinch()`, `.expand()`, `.pan()`, `.rotate()`. Custom gestures are accessible via `ZingTouch.register`.

### Request Example
```js
var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(myElement);
var chainableObject = myRegion.bind(myElement);

chainableObject
	.tap(function(e){
		console.log(e.detail);
	})
	.swipe(function(e){
		console.log(e.detail);
	}, true);
```

### Response
Returns a chainable object for gesture binding.
```

--------------------------------

### Bind Gestures to Elements

Source: https://context7.com/zingchart/zingtouch/llms.txt

Use the bind method on a Region to attach gesture handlers to DOM elements. Supports direct binding with gesture names or custom gesture instances, and chainable syntax for multiple gestures.

```javascript
var region = new ZingTouch.Region(document.body);
var myElement = document.getElementById('touch-target');

region.bind(myElement, 'tap', function(e) {
  console.log('Tap detected! Duration: ' + e.detail.interval + 'ms');
}, false);

var customTap = new ZingTouch.Tap({ maxDelay: 200, numInputs: 2 });
region.bind(myElement, customTap, function(e) {
  console.log('Two-finger tap detected!');
});

region.bind(myElement)
  .tap(function(e) {
    console.log('Tap: ' + e.detail.interval);
  })
  .swipe(function(e) {
    console.log('Swipe velocity: ' + e.detail.data[0].velocity);
  })
  .pan(function(e) {
    console.log('Pan distance: ' + e.detail.data[0].distanceFromOrigin);
  });
```

--------------------------------

### Custom Rotate Gesture with Callback

Source: https://context7.com/zingchart/zingtouch/llms.txt

Implements a custom rotate gesture using ZingTouch.Rotate, allowing for configuration of the number of inputs and defining an onMove callback to apply transformations.

```javascript
var rotateGesture = new ZingTouch.Rotate({
  numInputs: 2,     // Number of fingers (1 or 2)
  onMove: function(inputs, state, element, rotate) {
    // Convert radians to degrees and apply rotation
    var degrees = rotate.distanceFromOrigin * (180 / Math.PI);
    totalRotation += rotate.distanceFromLast * (180 / Math.PI);
    rotatable.style.transform = 'rotate(' + totalRotation + 'deg)';
  }
});

region.bind(rotatable, rotateGesture, function(e) {
  // e.detail contains: { angle, distanceFromOrigin, distanceFromLast }
});
```

--------------------------------

### ZingTouch.Pan

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Detects a panning motion across the screen.

```APIDOC
## ZingTouch.Pan

### Description
A pan is detected when the user touches the screen and moves about the area.

### Options
- **options.numInputs** (number) - Optional - Number of inputs to trigger the event (default: 1).
- **options.threshold** (number) - Optional - Minimum pixels to move to trigger the gesture (default: 1).

### Request Example
new ZingTouch.Pan({
	numInputs: 2
})

### Emits
- **distanceFromOrigin** (number) - Pixels traveled from starting position.
- **directionFromOrigin** (number) - Angle in degrees relative to the unit circle from origin.
- **currentDirection** (number) - Angle in degrees relative to the unit circle from the last point.
```

--------------------------------

### Basic Rotate Gesture Detection

Source: https://context7.com/zingchart/zingtouch/llms.txt

Detects basic rotation events on an element. Logs the current angle, total rotation, and rotation change in radians.

```javascript
var region = new ZingTouch.Region(document.body);
var rotatable = document.getElementById('rotatable');
var totalRotation = 0;

// Basic rotate detection
region.bind(rotatable, 'rotate', function(e) {
  console.log('Current angle: ' + e.detail.angle + ' radians');
  console.log('Total rotation: ' + e.detail.distanceFromOrigin + ' radians');
  console.log('Rotation change: ' + e.detail.distanceFromLast + ' radians');

  // Positive = counter-clockwise, negative = clockwise
});

```

--------------------------------

### Bind gestures to elements

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Bind specific gestures to DOM elements using string identifiers or gesture instances.

```javascript
var myRegion = new ZingTouch.Region(document.body);
var myElement = document.getElementById('some-div');

myRegion.bind(myElement, 'tap', function(e) {
	console.log('Tap gesture emitted: ' + e.detail.interval);
});
```

```javascript
var myElement = document.getElementById('some-div');
var myTapGesture = new ZingTouch.Tap({ maxDelay : 100 });
var myRegion = new ZingTouch.Region(document.body);

myRegion.bind(myElement, myTapGesture, function(e) {
	console.log('Custom Tap gesture emitted: ' + e.detail.interval);
}, false);
```

--------------------------------

### ZingTouch.Tap

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Detects a quick touch and release gesture.

```APIDOC
## ZingTouch.Tap

### Description
A tap is detected when the user touches the screen and releases in quick succession.

### Options
- **options.maxDelay** (number) - Optional - Maximum delay between start and end event in ms (default: 300).
- **options.numInputs** (number) - Optional - Number of inputs to trigger the tap (default: 1).
- **options.tolerance** (number) - Optional - Radius in pixels the user can move during the tap (default: 10).

### Request Example
new ZingTouch.Tap({
	maxDelay: 200,
	numInputs: 2,
	tolerance: 125
})

### Emits
- **interval** (number) - Time in milliseconds between the start and end of the gesture.
```

--------------------------------

### Bind Once Gesture in ZingTouch

Source: https://context7.com/zingchart/zingtouch/llms.txt

Use `bindOnce()` to create gesture bindings that automatically unbind after the first trigger. This is useful for one-time actions.

```javascript
var region = new ZingTouch.Region(document.body);
var introElement = document.getElementById('intro');

// Binding that fires only once
region.bindOnce(introElement, 'tap', function(e) {
  console.log('Welcome tap received - this will only fire once');
  introElement.classList.add('dismissed');
});
```

--------------------------------

### Region with Parent Element

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Illustrates using a parent element as the ZingTouch Region to allow gesture recognition to extend beyond the bounds of a specific child element. This provides forgiveness for gestures that slightly exceed the element's boundaries.

```javascript
var parentTouchArea = document.getElementById('parent-toucharea')
var touchArea = document.getElementById('toucharea')
var myRegion = new ZingTouch.Region(parentTouchArea);

myRegion.bind(touchArea, 'swipe', function(e){
	console.log(e.detail);
});
```

--------------------------------

### ZingTouch.Rotate

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Detects circular motion gestures.

```APIDOC
## ZingTouch.Rotate

### Description
A Rotate is detected when two inputs move in a circle or one input moves in a circular motion around the target element.

### Request Example
new ZingTouch.Rotate()

### Emits
- **angle** (number) - Angle of the initial right-most input relative to the unit circle.
- **distanceFromOrigin** (number) - Angular distance traveled by the initial right-most input.
- **distanceFromLast** (number) - Change of angle between last and current position (positive: counter-clockwise, negative: clockwise).
```

--------------------------------

### ZingTouch.Distance

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Detects pinch or expand gestures using two inputs.

```APIDOC
## ZingTouch.Distance

### Description
A distance gesture is detected when two inputs move closer or away from each other.

### Request Example
new ZingTouch.Distance()

### Emits
- **distance** (number) - Distance in pixels between the two inputs.
- **center** (object) - X/Y coordinates of the gesture's center.
- **change** (number) - Pixels changed from the last event (positive for expand, negative for pinch).
```

--------------------------------

### ZingTouch.Swipe

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Detects a swipe gesture based on velocity.

```APIDOC
## ZingTouch.Swipe

### Description
A swipe is detected when the user touches the screen and moves with increasing velocity, leaving the screen before velocity drops.

### Options
- **options.numInputs** (number) - Optional - Number of inputs to trigger the event (default: 1).
- **options.escapeVelocity** (number) - Optional - Minimum velocity (px/ms) at end event (default: 0.2).
- **options.maxRestTime** (number) - Optional - Time in ms allowed between events (default: 100).

### Request Example
new ZingTouch.Swipe({
	numInputs: 2,
	maxRestTime: 100,
	escapeVelocity: 0.25
});

### Emits
- **velocity** (number) - Pixels per millisecond at the ending point.
- **currentDirection** (number) - Angle in degrees relative to the unit circle.
```

--------------------------------

### Bind Element to Gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Bind a specific DOM element within a ZingTouch Region to a gesture. A callback function is executed when the gesture is recognized.

```javascript
var myElement = document.getElementById('my-div');

zt.bind(myElement, 'tap', function(e){
	//Actions here
}, false);
```

--------------------------------

### Region.unbind(element, [gesture])

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Unbinds a DOM element from a specific gesture or all gestures if no gesture is specified. Returns an array of the unbound gestures.

```APIDOC
## Region.unbind(element, [gesture])

### Description
Unbinds an element from a specific gesture, or all gestures if none is specified.

### Method
`Region.unbind`

### Parameters
#### Path Parameters
* `element` - (DOM Element) - Required - The DOM element to unbind gestures from.
* `gesture` - (String or Gesture Instance) - Optional - Either a registered gesture's key (String) or the gesture object used to bind the element.

### Returns
* (Array) - An array of bindings containing the gestures that were unbound.

### Request Example (Specific Gesture)
```js
var myElement = document.getElementById('mydiv');
myRegion.unbind(myElement, 'tap');
```

### Request Example (All Gestures)
```js
var myElement = document.getElementById('mydiv');
myRegion.unbind(myElement);
```

### Request Example (Gesture Instance)
```js
var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(document.body);
var myTapGesture = new ZingTouch.Tap({ maxDelay : 100 });

myRegion.bind(myElement, myTapGesture, function(e) {});

myRegion.unbind(myElement, myTapGesture);
```
```

--------------------------------

### Region.unregister(key)

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Unregisters a previously registered gesture and automatically unbinds associated elements.

```APIDOC
## Region.unregister(key)

### Description
Unregisters a gesture that was previously registered. Unregistering a gesture will automatically unbind any elements that were bound to this gesture.

### Parameters
- **key** (string) - Required - A string to identify the gesture that will be unregistered.

### Response
- **Returns** (Object) - The gesture that was unregistered.

### Request Example
```js
myRegion.unregister('shortTap');
```
```

--------------------------------

### Unbind All Gestures in ZingTouch

Source: https://context7.com/zingchart/zingtouch/llms.txt

To remove all gesture bindings from an element, call `unbind()` with only the element as an argument.

```javascript
// Unbind ALL gestures from an element
var allUnbound = region.unbind(element);
console.log('Unbound ' + allUnbound.length + ' total bindings');
```

--------------------------------

### Unbind gestures from elements

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Remove gesture bindings from DOM elements by gesture type or instance.

```javascript
var myElement = document.getElementById('mydiv');
myRegion.unbind(myElement, 'tap');
```

```javascript
var myElement = document.getElementById('mydiv');
myRegion.unbind(myElement);
```

```javascript
var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(document.body);
var myTapGesture = new ZingTouch.Tap({ maxDelay : 100 });

myRegion.bind(myElement, myTapGesture, function(e) {});

myRegion.unbind(myElement, myTapGesture);
```

--------------------------------

### Unbind Specific Gestures in ZingTouch

Source: https://context7.com/zingchart/zingtouch/llms.txt

Use the `unbind()` method to remove specific gesture bindings from an element. You can unbind by gesture name or by gesture instance.

```javascript
var region = new ZingTouch.Region(document.body);
var element = document.getElementById('target');
var customTap = new ZingTouch.Tap({ maxDelay: 150 });

// Bind multiple gestures
region.bind(element, 'tap', function(e) { console.log('tap'); });
region.bind(element, 'swipe', function(e) { console.log('swipe'); });
region.bind(element, customTap, function(e) { console.log('custom tap'); });

// Unbind a specific gesture by name
var unboundTap = region.unbind(element, 'tap');
console.log('Unbound ' + unboundTap.length + ' tap bindings');

// Unbind a specific gesture instance
var unboundCustom = region.unbind(element, customTap);
```

--------------------------------

### Unregister a gesture

Source: https://github.com/zingchart/zingtouch/blob/master/readme.md

Remove a previously registered gesture, which automatically unbinds associated elements.

```js
myRegion.unregister('shortTap');
```
Tokens:
Raw