Ionic.DomUtil.rectContains coordinates within slidebox to trigger modal


#1

Is this at all possible? I have figured out how to target specific pages in slidebox to trigger a slidebox modal. Now I want to trigger only certain “hotspots” so to speak within slidebox slide


#2

@katmartinez08 you could do a global tap event and just check the coordinates:

controller('SlideCtrl', function($scope, $ionicGesture, $document) {
  $ionicGesture.on('tap', function(e) {
    if(e.gesture.touches[0].pageX < 50) {
      // Left side of the screen
    }
  }, $document);
});

Does that help?


#3

yes it worked! thanks! do think you could help me with how I add pageY coordinate to that conditional? I sort of want to set up a more specific hot spot


#4

I got this to work. Would you recommend doing it this way?

  $scope.check= function(){
  
    var current=$ionicSlideBoxDelegate.currentIndex();
    $ionicGesture.on('tap', function(e) {
      var x1 = e.gesture.touches[0].pageX;
      var y1 = e.gesture.touches[0].pageY;
      if(x1 > 600 && x1 < 900 && y1 > 60 && y1< 400 && current == 3) {
      // over picture of CEO
        $scope.openvideoModal();
      }
      if(x1 > 600 && x1 < 900 && y1 > 60 && y1< 400 && current == 5) {
        $scope.openceoBio();
      }
    }, $document);
  };

#5

Sure, that will work. You could actually set up a rectangle and try to use rectContains:

ionic.DomUtil.rectContains(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, rx1, ry1, rx2, ry2);

Where rx* are the upper left and bottom right coordinates of your rectangle, respectively. That will let you specific a specific rect on the screen for the touch.