This code will enable swipe up, swipe down, swipe left, swipe right, swipe from left edge, swipe from right edge, swipe from top edge, and swipe from bottom edge capabilities on iOS and Android. Replace the valueDisplay lines below with the code you want to run for each swipe. There is a function to turn the touch listeners off; you'll likely want to exclude the coordinates of the 2d elements like sliders or disable the listeners while users are using the sliders. If you don't, moving the slider will cause the swipe to execute.
//Touch gesture variables
var NumberofFingersTouch;
var FingerStartX;
var FingerStartY;
var LeftEdgeSwipeOffset = 50;
var RightEdgeSwipeOffset = 50;
var TopEdgeSwipeOffset = 50;
var BottomEdgeSwipeOffset = 50;
var SwipeDistance = 120;
//Enable touch controls for swipe, move, and rotate
$scope.EnableTouchControls = function() {
window.addEventListener("touchstart", $scope.TouchStartFunction);
window.addEventListener("touchmove", $scope.TouchMoveFunction);
window.addEventListener("touchend", $scope.TouchEndFunction);
}
//Disable touch controls for swipe, move, and rotate
$scope.DisableTouchControls = function() {
window.removeEventListener("touchstart", $scope.TouchStartFunction);
window.removeEventListener("touchmove", $scope.TouchMoveFunction);
window.removeEventListener("touchend", $scope.TouchEndFunction);
}
$scope.TouchStartFunction = function(event) {
//event.touches.length gives the number of fingers touching the screen
NumberofFingersTouch = event.touches.length;
if (NumberofFingersTouch == 1) {
//Finger starting X location
FingerStartX = event.touches[0].pageX;
//Finger starting Y location
FingerStartY = event.touches[0].pageY;
}
//Update the scope
$scope.$apply();
}
$scope.TouchMoveFunction = function(event) {
if (NumberofFingersTouch == 1) {
//Check for swipe from left edge
if (((event.touches[0].pageX - FingerStartX) >= SwipeDistance) && (FingerStartX <= LeftEdgeSwipeOffset)) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from left edge.'
//Check for swipe from right edge
} else if (((FingerStartX - event.touches[0].pageX) >= SwipeDistance) && (FingerStartX >= (window.innerWidth - RightEdgeSwipeOffset))) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from right edge.'
//Check for swipe from top edge
} else if (((event.touches[0].pageY - FingerStartY) >= SwipeDistance) && (FingerStartY <= TopEdgeSwipeOffset)) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from top edge.'
//Check for swipe from bottom edge
} else if (((FingerStartY - event.touches[0].pageY) >= SwipeDistance) && (FingerStartY >= (window.innerHeight - BottomEdgeSwipeOffset))) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe from bottom edge.'
//Check for swipe left
} else if ((FingerStartX - event.touches[0].pageX) >= SwipeDistance) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe left.'
//Check for swipe right
} else if ((event.touches[0].pageX - FingerStartX) >= SwipeDistance) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe right.'
//Check for swipe down
} else if ((event.touches[0].pageY - FingerStartY) >= SwipeDistance) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe down.'
//Check for swipe up
} else if ((FingerStartY - event.touches[0].pageY) >= SwipeDistance) {
$scope.view.wdg['valueDisplay-1']['value'] = 'Swipe up.'
}
}
//Update the scope
$scope.$apply();
}
$scope.TouchEndFunction = function(event) {
//Update the scope
$scope.$apply();
}
