[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) { function onPinchStart(event) {
console.log("TEST"); console.log("Pinch Start");
}
function onPinchChange(event) {
console.log("Pinch Change");
}
function onPinchEnd(event) {
console.log("Pinch End");
} }
function followDataIfLive() { function followDataIfLive() {
@ -167,7 +175,9 @@ define(
$scope.$on('series:data:add', followDataIfLive); $scope.$on('series:data:add', followDataIfLive);
$scope.$on('user:viewport:change:end', onUserViewportChangeEnd); $scope.$on('user:viewport:change:end', onUserViewportChangeEnd);
$scope.$on('user:viewport:change:start', onUserViewportChangeStart); $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); $scope.$watch('domainObject', linkDomainObject);

View File

@ -37,14 +37,15 @@ define(
return [event.clientX, event.clientY]; return [event.clientX, event.clientY];
} }
function pinchAction(event) { function pinchStart(event) {
if (event.changedTouches.length === 2) { if (event.changedTouches.length === 2 ||
var touchPosition = [trackPosition(event.changedTouches[0]), event.touches.length === 2) {
trackPosition(event.changedTouches[1])], var touchPosition = [trackPosition(event.touches[0]),
trackPosition(event.touches[1])],
touchPositionPrev = posPrev || touchPosition, touchPositionPrev = posPrev || touchPosition,
eventPrev = evePrev || event; eventPrev = evePrev || event;
$scope.$emit('mct:pinch:action', event); $scope.$emit('mct:pinch:start');
// Set current position to be previous position // Set current position to be previous position
// for next touch action // for next touch action
posPrev = touchPosition; 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)) { if (agentService.isMobile(navigator.userAgent)) {
element.on('touchstart', pinchAction); element.on('touchstart', pinchStart);
element.on('touchmove', pinchAction); element.on('touchmove', pinchChange);
element.on('touchend', pinchAction); element.on('touchend', pinchEnd);
element.on('touchcancel', pinchEnd);
} }
// Stop checking for resize when scope is destroyed // Stop checking for resize when scope is destroyed