Gesture phase event


(swagner) #1

How to cancel a gesture phase during the phase event ? What exactly mean the cancel event ?


#2

@swagner

Below is a thread on the Forum discussing PhaseCancel:




@Daniel - How are we coming with the additional documentation for PhaseCancel?

@stephen can speak more eloquently about this, as he put it together! Regardless, we should add more detail in our documentation for this.


(Hans-Gerd Claßen) #3

whatever will cause the HypeGesturePhaseCancel it’s an event that occurs and not something you can trigger.


#4

I did a little digging into the code, and it appears that ‘cancel’ is only fired when a drag tries to leave the bounds of an iframe. Due to the way that mobile devices handle touch events, this is only firing on mouse-enabled browsers at the moment. A drag on a mobile device retains hold of the element (or drag phase state) until the touch event stops, and in that case the ‘PhaseEnd’ action occurs.

I made a quick testing document here:
DragGestureOutput.hype.zip (121.8 KB)

It gets a little ‘inception’-ey, since the document is placed in itself within an iframe for testing the ‘cancel’ event: http://tumult.com/support/examples/7622-phase-gesture/DragGestureOutput.html

When dragging the element, I run this function to output events into boxes:

//	These two area are receiving the event names:
var outputarea = hypeDocument.getElementById('output');
var outputareamove = hypeDocument.getElementById('outputareamove');

// We want to detect if any of these events have been triggered:
//hypeDocument.kHypeGesturePhaseStart
//hypeDocument.kHypeGesturePhaseMove
//hypeDocument.kHypeGesturePhaseEnd
//hypeDocument.kHypeGesturePhaseCancel
// if Event has been detected, write some text in the 'outputarea' element: 	
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseEnd<br>');
}
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseStart<br>');
}
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseMove) {
	outputareamove.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseMove<br>');
}
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseCancel) {
	outputarea.insertAdjacentHTML('beforeend', 'hypeDocument.kHypeGesturePhaseCancel<br>');
}


How can we use HypeGesturePhaseCancel
#5

@Daniel - Thank You for the research & the demo!