GestureEvent.md

GestureEvent

Kind: global class
Npmpackage:

• GestureEvent
  • new GestureEvent()
  • .OVER : string
  • .OUT : string
  • .MOVE : string
  • .PRESS : string
  • .RELEASE : string
  • .CLICK : string
  • .DRAG : string
  • .DRAG_START : string
  • .DRAG_STOP : string
  • .SWIPE : string
  • .Event(name, mouseGlobalX, mouseGlobalY, mouseLocalX, mouseLocalY, elementX, elementY, distanceX, distanceY, velocityX, velocityY)
  • .stop(event)

new GestureEvent()

This module has custom events to be used with the Gesture module. Gesture
Import from ad-events

import { GestureEvent } from 'ad-events'

GestureEvent.OVER : string

Represents a 'mouseover', fired on desktop cursor roll over

Kind: static constant of GestureEvent
Example

GestureEvent.OVER

GestureEvent.OUT : string

Represents a 'mouseout', fired on desktop cursor roll out

Kind: static constant of GestureEvent
Example

GestureEvent.OUT

GestureEvent.MOVE : string

Represents a 'mousemove', fired on desktop cursor move

Kind: static constant of GestureEvent
Example

GestureEvent.MOVE

GestureEvent.PRESS : string

Represents an 'onPress', fired on mousedown / touch start

Kind: static constant of GestureEvent
Example

GestureEvent.PRESS

GestureEvent.RELEASE : string

Represents an 'onRelease', fired on mouseup / touch end

Kind: static constant of GestureEvent
Example

GestureEvent.RELEASE

GestureEvent.CLICK : string

Represents a 'click', fired on click / touch end

Kind: static constant of GestureEvent
Example

GestureEvent.CLICK

GestureEvent.DRAG : string

Represents an 'onDrag', fired after an element is selected and before released.
Element data objects included: selection position, element position, velocity of move

Kind: static constant of GestureEvent
Example

GestureEvent.DRAG

GestureEvent.DRAG_START : string

Represents an 'onDragStart', fired after an element is selected, when first moved and before released.
Element data objects included: selection position, element position

Kind: static constant of GestureEvent
Example

Gesture.addEventListener(myDiv, GestureEvent.DRAG_START, handleDragStart)
//
function handleDragStart(event) {
	// coordinate position of mouse/touch
	console.log(event.position)

	// coordinate position of target element
	console.log(event.element)
}

GestureEvent.DRAG_STOP : string

Represents an 'onDragStop', fired after an element is selected, moved, then released.
Element data objects included: selection position, velocity of last move

Kind: static constant of GestureEvent
Example

Gesture.addEventListener(myDiv, GestureEvent.DRAG_STOP, handleDragStop)
//
function handleDragStop(event) {
	// coordinate position of mouse/touch
	console.log(event.position)

	// velocity, ie change in distance, of target element
	console.log(event.velocity)
}

GestureEvent.SWIPE : string

Represents an 'onSwipe', fired just after a DRAG_STOP, but different event properties available.
Element data objects included: direction, distance, velocity

Kind: static constant of GestureEvent
Example

Gesture.addEventListener(myDiv, GestureEvent.SWIPE, handleSwipe );
//
function handleSwipe(event) {
	// direction of swipe, as strings 
	console.log(event.direction)

	// distance covered from down to release
	console.log(event.distance)

	// velocity, aka speed of swipe
	console.log(event.velocity)
}

GestureEvent.Event(name, mouseGlobalX, mouseGlobalY, mouseLocalX, mouseLocalY, elementX, elementY, distanceX, distanceY, velocityX, velocityY)

Creates a new CustomEvent with properties assigned to it, accessible fomr the passed through event to the handler

Kind: static method of GestureEvent

Param	Type	Description
name	string	The event type name
mouseGlobalX	number	The mouse x on the page
mouseGlobalY	number	The mouse y on the page
mouseLocalX	number	The mouse x relative to the element position
mouseLocalY	number	The mouse y relative to the element position
elementX	number	The element x position
elementY	number	The element y position
distanceX	number	The distance moved on the x, only used for drags and swipes
distanceY	number	The distance moved on the y, only used for drags and swipes
velocityX	number	The distance moved on the x since previous event fired, essentially the speed
velocityY	number	The distance moved on the y since previous event fired, essentially the speed

Example

Gesture.add(myDiv, GestureEvent.CLICK, handleClick)
function handleClick(event) {
	console.log(event)
	console.log('global mouse:', event.mouse.global.x, event.mouse.global.y)
	console.log('local mouse:', event.mouse.local.x, event.mouse.local.y)
	console.log('element:', event.element.x, event.element.y)
}	
Gesture.add(dragDiv, GestureEvent.DRAG, handleDrag)
function handleDrag(event) {
	console.log(event)
	console.log('element:', event.element.x, event.element.y)
	console.log('distance:', event.distance.x, event.distance.y)
	console.log('velocity:', event.velocity.x, event.velocity.y)
}					

GestureEvent.stop(event)

Stops all future events of the type during the event loop, is a native equivilent to event.stopImmediatePropogation(). It does NOT remove any listeners, simply stops the event from bubbling up through the chain.

Kind: static method of GestureEvent

Param	Type	Description
event	event	The event parameter from the event handler

Example

Gesture.add(parentDiv, GestureEvent.CLICK, handleParentClick)
function handleParentClick(event) {
	// This will not be heard
	console.log('parent click heard')
}

Gesture.add(childDiv, GestureEvent.CLICK, handleChildClick)
function handleChildClick(event) {
	GestureEvent.stop(event)
	console.log('child click heard')
}