How to use built-in Ionic/Hammer.js gestures


#1

Hi, I know Ionic uses Hammer.js (it’s well documented), but I can’t figure out how to disable touch gestures on a custom directive. I would prevent iOS scroll bounce, how could I achieve it using Ionic gestures?
Thanks in advance :slight_smile:


#2

BUMP

5 days later I still can’t get something working ahah
A little tip for me would be appreciated a lot :slight_smile:
Thank you!


#3

Take a look through the directives folder about the custom scroll. In the content directive there is a section about just having standard overflow scrolling by having it as

<content overflowScroll = "true" padding="true"></content>

Let me know if this helps


#4

Thank you for replying @mhartington :slight_smile:

What I need to understand is how to use the built in Ionic/HammerJS gestures.
In the example there’s a gesture, but I don’t know which are the available ones and how I could use them.

angular.module('myModule', [])

.directive('myDirective', function(Gesture) {
  return {
    // Other directive stuff ...

    link: function($scope, $element, $attr) {
      var handleDrag = function(e) {
        // Access e.gesture for gesture related information
        console.log('Drag: ', e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, e.gesture.deltaX, e.gesture.deltaY);
      };

      var dragGesture = Gesture.on('drag', handleDrag, $element);

      $scope.$on('$destroy', function() {
        // Unbind drag gesture handler
        Gesture.off(dragGesture, 'drag', handleDrag);
      });
    }
  }
});

Add custom gesture to the list's item
#5

I’m just poking around the github page and saw this which list a few gestures, maybe a good starting point. I’ve never used hammer.js so I wouldn’t be too familiar with it.

gestures.js


#6

'hold', 'tap', 'swipe', 'drag', 'transform', 'touch', 'release', I know which are the available gestures, thank you @mhartington :slight_smile:

Now, how to prevent one of them to achieve my goal: prevent iOS Safari scroll bounce in a standalone webapp?


#7

Hello,

Traditionnaly, you disable some action handled by an event listener by preventing the default action.
I see a topic that could help here :

The preventDefault should be used in the HandleDrag function mentioned here :

http://ionicframework.com/docs/angularjs/utils/gestures/

I hope this is helpful !


#8

Felt like I should just expand a little on what was already provided :smile:

Quickie:
Hammer way
var myGesture = new Hammer(element, options).on(type, callback);

Ionic Way
var myGesture = ionic.onGesture(type, callback, element, options);

Expanded
A possible hammer call would be like so:

new Hammer(element[0], { drag_lock_to_axis: true }).on("release dragleft dragright swipeleft swiperight", handleHammer);

Now if you peer into the Gesture.js file you can see the following. Which basically is a wrapper for the hammer gesture.

onGesture: function(type, callback, element, options) {
  var gesture = new ionic.Gesture(element, options);
  gesture.on(type, callback);
  return gesture;
};

Result
So the result would be for our ionic/hammer gesture:

ionic.onGesture("release dragleft dragright swipeleft swiperight", handleHammer, element[0], { drag_lock_to_axis: true });

Hope this helps someone, as I couldn’t find any specific examples of this.


#9

Sorry for revive an old post but I have a div with an image inside, the parent div has an Ionic Gesture (Hammer.js) for rotation, transform and drag and I see that you can define the minimum scale for transform settings this parameter: transform_min_scale: 0.01 and I can scale up but not scale down less than 1.


#10

@myyellowshoe: Thanks for the good explanation. Even so, I have a follow-up question. Do you know if it is possible to detect the number of touch points during these events? Or if it is possible to constrain events to only be triggered when a minimum number of touch points are active? I tried passing in {“points”: 2} as options for the gesture definition, but that doesn’t seem to have any effect. What I want to achieve is to drag element on single touch point and scroll page on multiple touch points.