wzr1337 / angular-gestures

AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.

angular-gestures

AngularJS directive that adds support for multi touch gestures to your app, based on hammer.js.

Usage

• Include gestures.js or gestures.min.js into your page
• Declare 'angular-gestures' as a dependency for your angular app: angular.module('myApp', ['angular-gestures']);
• Config the recognizers before you use the directive like this: hammerDefaultOptsProvider.set({recognizers: [[Hammer.Tap, {time: 250}]] });
• Use attributes on containers the same way you use ng-click: e.g. hm-tap

<button hm-tap="add_something()">Tap me</button>

• You can use angular interpolations like this : hm-swipe="remove_something({{ id }})"
• You can also use Hammer.js options by e.g. hm-tap-opts="{hold: false}"

Note that hammer.js is an additional requirement and is not included in angular-gestures.

Event data

Pass the $event object in the usual way e.g. hm-drag="myDrag($event)" then access its internals like so:

$scope.myDrag = function(event) {
	console.log(event.gesture);
}

Refer to the Hammer.js docs for more details on the properties of event.

Supported events

• hmDoubleTap : 'doubletap',
• hmDragstart : 'dragstart',
• hmDrag : 'drag',
• hmDragUp : 'dragup',
• hmDragDown : 'dragdown',
• hmDragLeft : 'dragleft',
• hmDragRight : 'dragright',
• hmDragend : 'dragend',
• hmHold : 'hold',
• hmPinch : 'pinch',
• hmPinchIn : 'pinchin',
• hmPinchOut : 'pinchout',
• hmRelease : 'release',
• hmRotate : 'rotate',
• hmSwipe : 'swipe',
• hmSwipeUp : 'swipeup',
• hmSwipeDown : 'swipedown',
• hmSwipeLeft : 'swipeleft',
• hmSwipeRight : 'swiperight',
• hmTap : 'tap',
• hmTouch : 'touch',
• hmTransformstart : 'transformstart',
• hmTransform : 'transform',
• hmTransformend : 'transformend'

All Hammerjs events are supported. The corresponding Angularjs attribute has hm- prepended to the name. So for example, the 'doubletap' event becomes hm-double-tap etc.

Attention : *end and *start events are NOT CamelCased because of issues caused by $animate interference.

Default options

To set recognizer default options you can use hammerDefaultOptsProvider. Access it like in the demo:

angular.module('angularGesturesDemoApp', ['angular-gestures', 'ngRoute'])
  .config(function ($routeProvider, hammerDefaultOptsProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    hammerDefaultOptsProvider.set({
        recognizers: [[Hammer.Tap, {time: 250}]]
    });
  });

Bower

If you want to use angular-momentum-scroll with bower, add the following dependency to your component.json

"angular-gestures": "latest"

Require.js/AMD/Node.js

angular-gestures has support for Require.js/AMD/Node.js. When using AMD modules, make sure that you define hammer.js using Hammer, same goes for node.js. If you are not using Require.js/AMD/Node.js, angular-gestures will fall back to using the global Hammer/angular objects.

angular-gestures's Issues

Hold gesture strange behaviour

Hi !
Thanks for the job done with this project !

Everything works perfectly on desktop browsers, but I'm facing a strange behavior with the hm-hold event on tablets:

iOS 7 + Safari: OK
iOS 7 + Chrome: Event does not fire when set on an image map tag (maybe this has nothing to do with hammer or angular-gesture).

W8 (on a pro tablet) + IE: hold event is fired but will cause entire page selection and will show a contextual menu (right click menu ?).

W8 (on a pro tablet) + Firefox: hold event is not firing at all
W8 (on a pro tablet) + Chrome: hold event is also firing a click event
I have no Android device for the moment so I can't tell for Android borwsers.

I use the directive as follow :

<area shape="rect" ng-repeat="item in data.items" id="{{item.id}}" hm-tap="playVowel($event)" hm-hold="showItemDetails($event)" coords="{{item.coords}}"/>

Am I doing something wrong ? Has anyone faced the same issues ? Is there any solution / workaround ? Is this a hammer.js or browser(s) issue ?

Regards

stopPropagation doesn't work (but works with direct Hammer usage)

Here's the sample Plunker: http://plnkr.co/edit/7j2M0dFsk3swuAWKYsS9?p=preview
Whichever square you click the same text is shown: "Wrapper clicked"

To prove there's no mistake in code: go to script.js and comment out line 9. Now "Inner clicked" properly shows.

Now the same Plunker but with raw Hammer + jQuery (same Hammer version, 1.0.5): http://plnkr.co/edit/lIAb8tN8RqtYBikkMI3J?p=preview

To prove stopPropagation actually works here: go to stript.js and comment out line 17. Now it behaves as the 1st one.

BTW updating Hammer would also make sense, 1.0.5 is more than 1 year old.

Double Tap directive name wrong on docs/samples

In all docs that I read the usage of double tap directive is hm-doubletap, but this never worked, what works is hm-double-tap.

Some very basic docs?

Hey!

Just started out on mobile dev and everything is pretty new to me...
I would like to use ng-gestures with appgyver steroids and don't manage to get it working. Not sure if I am implementing it the wrong way, but it is just insanely hard to get basic docs.

So, here is what I have so far:

1. Import the js in html

   <script src="/components/angular-gestures/gestures.min.js"></script>

2. Add the directive to the app
   var organizationApp = angular.module('organizationApp', ['OrganizationModel', 'ionic', 'angular-gestures']);

3. Define a function in the html DOM element on which to apply the gesture
   

the click event works fine, guessing because this is in the standard lib. But I tried everything (or at least a lot) for ng-gestures... no luck so far.
Question here: am I missing something obvious, or could there be something else at play?

Running on Android through appgyver's Steroids.

Thanks!

HUGE BUG - ABSOLUTELY NO STOPPROPAGATION() and NO PREVENTDEFAULT()

How can a plugin based on events have no concept of stop propagation and prevent default especially when it piggy backs off of the Hammer.js that supports this???

I have to say that since I spent the time to integrate this into my solution I will be quite annoyed if there is not a fix or a hot fix or something to hold this BIG BUG.

Disable logs by default

First off, thanks for the lib! It quickly helped me get off of ngTouch.

I disabled logs by setting VERBOSE = false, but it should probably be set to false by default no?

Demo doesn't work ?

I've created a project in VS2013 with the files contained in the demo,made sure all file references and libraries where they need to be and the swipe doesn't work.

What could I be doing wrong ?

Regards

Edson

Error when apply angular-gestures

I did follow your instruction, work OK, but today I update angular-gestures, then I can't use it anymore, it show error Hammer is not defined at hammertime = new Hammer(element[0], opts); I don't know why.
I added 'angular-gestures' to module, and include file gestures.js
Can you help me?

Anything broken or problem with the doc?

I can't make angular-gestures work

• I'm using Angularjs 1.2.1 and the last angular-gestures file I found in the repository
• I declared the module in my app.js file
• I declared angular-gestures and hammer 2.0 in my main html file

I've got no error but no any event response (I got no problem with ngTouch)
Am I missing something ?

bower does not give the dist

Currently 'bower install' does not have the dist folder, although it is referenced in the .bowerrc

Multiple events

From Hammer's FAQ:

var hammertime = new Hammer(element, options);
hammertime.on("dragleft dragright swipeleft swiperight", function(ev){ });

Sometimes it's important to stack hammer events in one call so the redundancy will be handled automatically by hammer. This might require a more generic directive?:

<foo hm-on-events="dragleft dragright swipeleft swiperight", hm-on="functionName" />

Browserify Support

Is it possible somehow to use angular-gestures with browserify?

I'm using browserify, browserify-shim and bower.
I installed angular-gestures via bower, and added a shim to gestures.js
Then, in some of my modules I wrote require('angular-gestures') and added it to angular module.
But the issue is that angular-gestures module can't see Hammer object.

The possible workaround for this issue I see is that we need to separate angular-gestures.js and hammer.js and add hammer.js as a dependency to angular.gestures.js. In this way bower will install hammer.js as dependency and we will be able to shim hammer.js.

Let me know what you think of it!

Support for press?

Just wondering if anyone has extended this module to include the press gesture available in hammer 2.x? Would be nice to include this gesture...

Double Tap

Thanks for the lib!

I was just playing around a little bit with all the events but I can't seem to get the 'double tap' working?
Can somebody tell me what I'm doing wrong?

There's a preview on http://preview.tomhoogenboom.nl

In my view I have:

<div hm-double-tap="test($event)"></div>

In my app.config I'm having the following:

hammerDefaultOptsProvider.set({
        recognizers: [
          [Hammer.Tap, { time: 250 }],
          [Hammer.Swipe]
        ]
    });

If I add a [Hammer.DoubleTap] here I'm getting an error " TypeError: undefined is not a function" from hammer.js when it tries to loop through the recognizers.

Am I doing something wrong and can somebody please help me?

Recognizer check fails on direct reference comparison

I'm seeing the following after upgrading an older project's angular-gestures package to include the new recognizer check added via #41 . Specifically, the line where the direct function reference comparison is made. You can see in this debug output that there is a PanRecognizer defined (2nd entry) but it fails the comparison.

I'm including hammer.js and angular-gestures.js once, so I'm not sure what's creating this reference difference. Maybe making it more resilient by relying on the function name property instead makes sense though?

Double tap also recognizes two single taps

Hi,

Thanks for the lib.
I was trying to use recognizeWith and requireFailure functionality of hammer in this lib but it doesnt seem to have a way. Please guide if we have any particular way to use these two functionality in recognizers.
I am using recognizers in this way:

app.config(function (hammerDefaultOptsProvider) {
hammerDefaultOptsProvider.set({
recognizers: [
[Hammer.Tap],
[Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']],
[Hammer.Press],
[Hammer.Swipe]
]
});
});

Need to know how to add recognizeWith and requireFailure functionality in the same.

Thanks

seems can not work with requirejs

meet Hammer is not defined

Maybe consider removing the dist folder

Since the source is built through grunt tasks end depends on a few packages (currently angular itself and hammer.js), actually everybody is able to build a development and production version on their own.

Did the same with ngTranslate, check it out here: https://github.com/PascalPrecht/ng-translate

Not working in standard browser on andriod

The gestures don't seem to work on the standard browser of an andriod device.

I've tested it on a Android 4.1.2 and 4.0.3.

If I user the chrome browser on those android devices, it works fine, but not when I use the standard browser. Since most people still use the standard browser that is clearly an issue.

GreeTz
Thor

how to use 'drag' events?

like this:

  link: function($scope, iElm, iAttrs, controller) {
        var element = document.getElementById('pro');
        var drag = Hammer(element).on("drag", function(event) {
            alert('hello!');
        });
    }

it doesn't work;

but:

  link: function($scope, iElm, iAttrs, controller) {
        var element = document.getElementById('pro');
        var tap = Hammer(element).on("tap", function(event) {
            alert('hello!');
        });
    }

it's ok

this is my recognizers

 hammerDefaultOptsProvider.set({
    recognizers: [
        [Hammer.Tap, {time: 250}],//ok
        [Hammer.Swipe],//ok
        [Hammer.Drag]// i don't know how to use 'drag' in recognizers     

    ]
 });

thanks your answer,best wishes~

ReferenceError: Hammer is not defined

Why do I get this error message and ng-swipe-up won't work at all?

Not registering any tap

Hi,

since the change of Hammer to Hammer.Manager the taps are not registered. If I change that back manually it starts working again.

I cannot see the reason why this was changed? The Advanced functions with Hammer.Manager are not used (hammer.add(...))

0.3.0 does not work with any other events than tap

they're just not firing.

Support pinchend event

It would be nice, if there would be support for this too.

How to develop "pull to refresh"?

I am trying to develop like this but no luck at all :S Any help?
http://eightmedia.github.io/hammer.js/examples/pull-to-refresh.html

Angular 1.5

angular-gestures appears to work with Angular 1.5.*. Could you update the Angular dependency in bower.json? It's set to 1.4.0.

please update Hammer.JS to v2.0.2 - 2014-07-28

Publish to npm

Could you please publish this package to npm?

https://www.npmjs.com/package/angular-gestures

Pinch and other events

Having an issue with the pinch event in an app, I need to use pinch without blocking the standard scroll but can't work out how to do this.

There is an issue on the hammerjs repo for exactly what I'm wanting but not sure how to do this within the context of the angular wrapper?

hammerjs/hammer.js#691

Deadline is looming and been scratching my head a little while on this so thought I'd reach out and see if there is a tried and tested solution.

Thanks,

Need a new release tag after recent update

The change you made to the bower file for me (thanks!) isn't getting picked-up because you haven't created a new release tag. Could you do so?

Can't scroll down on mobile when using hm-swipe-left and hm-swipe-right on element

Works fine on desktop, but on mobile, the swipable element (left and right only) cannot be used as a handle to scroll the page down.

I realize upgrading to v2 hammer may fix this and that you're working on it. Just wanted to say thanks!

Add the template path to the toastrConfig constant

It would be really nice if the template path were configurable rather than hard coded. I use an html2js build process that puts templates in the $templateCache based on directory structure. While using .run to add my custom template to the hard coded location works; I'd like my "alerts" module directory to have an alerts.tpl.html file that gets swallowed up by my build process and then is recognizable by angular-toastr through something like this

angular.extend(toastrConfig, { templatePath:'alerts/alerts.tpl.html'})

Can't use 0.3.0

I'm using https://rails-assets.org and for some reason, 0.3.0 is not working, anything changed compared to 0.2.3? reverting to 0.2.x worked.

Hammer prevents input from getting focus

When you include a gesture attribute (like 'hm-hold="some_function()"') in an input element, this element can't get focus anymore with regular tap gestures. Is there a way to fix this? I tried to use the option "prevent_default: false", but it didn't work.

Support of release and pressup events (hmRelease / hmPressUp)

Unfortunally, in Hammer.js 2.0 the release event is no longer available. This is already bad enough, but at the moment it is not possible to use the alternative pressup event with angular-gestures.

There is a workaround to use the pressup-event to recognize release events. The problem is, that the behaviour is not exact like it was before when the "real" release was supported. So it could be problematically to map the release event to pressup, maybe it is better to remove the release directive and add a new one named pressup.

However, to support the old release event and provide the new pressup event as angular-gestures features, the two mapping objects HGESTURES and HRECOGNIZERS has to be extended like this:

HGESTURES:
hmPressUp: 'pressup'
hmRelease: 'pressup'

HRECOGNIZERS:
hmPressUp: [Hammer.Press, 'Hammer.Press']
hmRelease: [Hammer.Press, 'Hammer.Press']

1.2 broke attributes ending with "start" or "end"

due to the new support for multi-element directives, its now impossible to have attributes ending with 'start' or 'end'...
see angular/angular.js@e46100f