0 Replies Latest reply on Jul 4, 2017 3:20 PM by rabernathy RSS
    rabernathy Explorer

    Javascript to enable swipe on iOS and Android.

    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();

     

    }