[Mobile, Gestures] Pinch

Split the pinch gesture into start,
change, and end/cancel. Each of those
are read in and then they emit through
the scope to functions in the controller.
This commit is contained in:
Shivam Dave
2015-08-17 13:12:53 -07:00
parent 5c3fe78bd5
commit dfe3409a98
2 changed files with 51 additions and 11 deletions

View File

@ -154,8 +154,16 @@ define(
};
}
function onPinchAction(event) {
console.log("TEST");
function onPinchStart(event) {
console.log("Pinch Start");
}
function onPinchChange(event) {
console.log("Pinch Change");
}
function onPinchEnd(event) {
console.log("Pinch End");
}
function followDataIfLive() {
@ -167,7 +175,9 @@ define(
$scope.$on('series:data:add', followDataIfLive);
$scope.$on('user:viewport:change:end', onUserViewportChangeEnd);
$scope.$on('user:viewport:change:start', onUserViewportChangeStart);
$scope.$on('mct:pinch:action', onPinchAction);
$scope.$on('mct:pinch:start', onPinchStart);
$scope.$on('mct:pinch:change', onPinchChange);
$scope.$on('mct:pinch:end', onPinchEnd);
$scope.$watch('domainObject', linkDomainObject);

View File

@ -37,14 +37,15 @@ define(
return [event.clientX, event.clientY];
}
function pinchAction(event) {
if (event.changedTouches.length === 2) {
var touchPosition = [trackPosition(event.changedTouches[0]),
trackPosition(event.changedTouches[1])],
function pinchStart(event) {
if (event.changedTouches.length === 2 ||
event.touches.length === 2) {
var touchPosition = [trackPosition(event.touches[0]),
trackPosition(event.touches[1])],
touchPositionPrev = posPrev || touchPosition,
eventPrev = evePrev || event;
$scope.$emit('mct:pinch:action', event);
$scope.$emit('mct:pinch:start');
// Set current position to be previous position
// for next touch action
posPrev = touchPosition;
@ -58,10 +59,39 @@ define(
}
}
function pinchChange(event) {
if (event.changedTouches.length === 2) {
var touchPosition = [trackPosition(event.changedTouches[0]),
trackPosition(event.changedTouches[1])],
touchPositionPrev = posPrev || touchPosition,
eventPrev = evePrev || event;
$scope.$emit('mct:pinch:change');
// Set current position to be previous position
// for next touch action
posPrev = touchPosition;
// Set current event to be previous event
// for next touch action
evePrev = event;
// Stops other gestures/button clicks from being active
event.preventDefault();
}
}
function pinchEnd(event) {
$scope.$emit('mct:pinch:end');
// Stops other gestures/button clicks from being active
event.preventDefault();
}
if (agentService.isMobile(navigator.userAgent)) {
element.on('touchstart', pinchAction);
element.on('touchmove', pinchAction);
element.on('touchend', pinchAction);
element.on('touchstart', pinchStart);
element.on('touchmove', pinchChange);
element.on('touchend', pinchEnd);
element.on('touchcancel', pinchEnd);
}
// Stop checking for resize when scope is destroyed