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
BUMP
5 days later I still can’t get something working ahah
A little tip for me would be appreciated a lot
Thank you!
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
Thank you for replying @mhartington
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);
});
}
}
});
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.
'hold'
, 'tap'
, 'swipe'
, 'drag'
, 'transform'
, 'touch'
, 'release'
, I know which are the available gestures, thank you @mhartington
Now, how to prevent one of them to achieve my goal: prevent iOS Safari scroll bounce in a standalone webapp?
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 !
Felt like I should just expand a little on what was already provided
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.
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.
@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.