Concept

contact.js uses a vector based recognition. In most cases, a "live vector" is used, which is the vector of the last 100ms.

PointerListener

The PointerListener prototype is used for activating gesture listening on dom elements. By default, all recognizers are active, but you can configure the gestures you want to be activated. 
var pointerListener = new PointerListener(domElement, options);

Options

Besides configuring the supported gestures, hooks for the native javascript events pointerdown, pointermove, pointerup, pointerout and pointercancel are provided. 
var options = {
	supportedGestures : [Tap, Pan, Pinch, Rotate, TwoFingerPan],
	bubbles : false, // defaults to true
	consecutiveGestures : true, // defaults to true
	simultaneousGestures : true, // defaults to true
	handleTouchEvents : false, // defaults to true
	pointerdown : function(event, pointerListener){},
	pointermove : function(event, pointerListener){},
	pointerup : function(event, pointerListener){},
	pointerout : function(event, pointerListener){},
	pointercancel : function(event, pointerListener){},
	DEBUG : true, // defaults to false
	DEBUG_GESTURES : true, // defaults to false
	DEBUG_CONTACT : true // defaults to false	
};
var pointerListener = new PointerListener(domElement, options);
Option Values Description
supportedGestures Array[]
items can be gesture classes or instances of gesture classes 		Defines which gestures can be recognized
bubbles Boolean
true or false 		Turn event bubbling on or off.
consecutiveGestures Boolean
true or false 		Allow several gestures after one another without lifting the pointer.
simultaneousGestures Boolean
true or false 		Allow two or more gestures at the same time. For example: pinching while rotating.
handleTouchEvents Boolean
true or false 		Let PointerListener block default TouchEvents which might interfere with PointerEvents.
DEBUG Boolean
true or false 		Show console output of the PointerListener instance.
DEBUG_GESTURES Boolean
true or false 		Show console output of the Gesture instances. Displays the recognition process.
DEBUG_CONTACT Boolean
true or false 		Show console output of the Contact and PointerInput instances. Displays information about vectors and collected data.

Events

domElement.addEventListener(EVENTNAME, function(event){
	// do something
});
Event name Recognizer Simplified description
tap Tap fired after pointerUp
press Press fired if pointerDown stays at the same position for a longer time
pressend Press fired when the pointer is relesaed after a press has been detected
panstart Pan fired after pointerDown
pan Pan fired during pointerMove
panend Pan fired after pointerUp, pointerOut or pointerCancel
swipe Pan fired after the pointer left the surface, if the user moved the pointer fast enough at the end of the motion
swipeleft Pan Fired together with swipe, if the pointer was moved to the left at the end of the motion
swiperight Pan Fired together with swipe, if the pointer was moved to the right at the end of the motion
swipeup Pan Fired together with swipe, if the pointer was moved upwards at the end of the motion
swipedown Pan Fired together with swipe, if the pointer was moved downwards at the end of the motion
pinchstart Pinch fired if 2 active pointers (fingers) are present and the distance between those two changed
pinch Pinch fired during changes in distance between 2 pointers (fingers)
pinchend Pinch fired if 2 active pointers (fingers) had been present pinching, and one of them is removed
rotatestart Rotate fired if 2 active pointers (fingers) are present and are moved in a circular motion
rotate Rotate fired during changes in rotation performed with 2 pointers (fingers)
rotateend Rotate fired if 2 active pointers (fingers) had been present rotating, and one of them is removed
twofingerpanstart TwoFingerPan fired if 2 active pointers (fingers) are present and an initial, parallel movement in the same direction occurs
twofingerpan TwoFingerPan fired during the parallel movement of 2 fingers
twofingerpanend TwoFingerPan fired if 2 active pointers (fingers) had been present panning, and one of them is removed

EventObject

All events that contact.js triggers all receive an event object which has the following structure. 
{
	detail : {
		pointerManager : PointerManager instance,
		gesture : gestureInstance, // instance of Tap, Pan recognizer etc
		global : { 		// global covers data spanning the whole pointer contact duration
			deltaX : Number, // traveled distance along the x-axis in px, whole contact duration
			deltaY : Number, // traveled distance along the y-axis in px, whole contact duration
			distance: Number, // traveled distance / length of the vector in px, whole contact duration
			speedX : Number, // px/ms along the x-axis, whole contact duration
			speedY : Number, // px/ms along the y-axis, whole contact duration
			speed : Number, // px/ms, whole contact curation
			direction : DIRECTION, // matches the DIRECTION constants, direction from start to end of whole contact duration
			scale : Number, // scaling if multi pointer, 1 if single pointer, whole contact duration
			rotation : Number, // degrees if multi pointer, 0 if single pointer, whole contact duration
			center : { // center between two pointers if multi pointer, last 100ms
				x : Number,
				y : Number
			},
			srcEvent : Event // original Event (pointerUp, pointerMove, ...)
		},
		live : {	// live covers data spanning the last 100ms
			deltaX : Number, // traveled distance along the x-axis within the last 100ms in px
			deltaY : Number, // traveled distance along the y-axis within the last 100ms in px
			distance: Number, // traveled distance / length of the vector in px, last 100ms
			speedX : Number, // px/ms along the x-axis, whole contact duration, last 100ms
			speedY : Number, // px/ms along the y-axis, whole contact duration, last 100ms
			speed : Number, // px/ms, last 100ms
			direction : DIRECTION, // matches the DIRECTION constants, direction of the last 100ms
			scale : Number, // scaling if multi pointer, 1 if single pointer, last 100ms
			rotation : Number, // degrees if multi pointer, 0 if single pointer, last 100ms
			center : { // center between two pointers if multi pointer, last 100ms
				x : Number,
				y : Number
			},
			srcEvent : Event // original Event (pointerUp, pointerMove, ...)
		}
	}
}

Methods

PointerListener offers an internal event management which takes car eof adding and removing event listeners from dom elements.
Name Usage Example Description
.on( eventType, handlerReference) 
var onPan = function(event) {
	// do something
}

pointerListener.on("pan", onPan);
 attaches an event listener to pointerListener.domElement
.off( eventType, handlerReference) 
pointerListener.off("pan", onPan);
 removes a previously attached handlerReference
.destroy() 
pointerListener.destroy();
 Unbinds all events and input events and makes PointerListener unusable.

Constants

Name Value
DIRECTION_LEFT "left"
DIRECTION_LEFT "left"
DIRECTION_RIGHT "right"
DIRECTION_UP "up"
DIRECTION_DOWN "down"
DIRECTION_HORIZONTAL [DIRECTION_LEFT, DIRECTION_RIGHT]
DIRECTION_VERTICAL [DIRECTION_UP, DIRECTION_DOWN]
DIRECTION_ALL [DIRECTION_UP, DIRECTION_DOWN, DIRECTION_LEFT, DIRECTION_RIGHT]
DIRECTION_CLOCKWISE 1
DIRECTION_COUNTER_CLOCKWISE -1