ryanmullins/angular-hammer

Hammer.js v2 support for AngularJS

angular-hammer's Issues

Sections swipe

I have 3 sections that can be swiped through in a cordova app.

<section hm-swipe-left="swipe('next')" hm-swipe-right="swipe('previous')">
<h1>long content page 1</h2>
</section>

<section hm-swipe-left="swipe('next')" hm-swipe-right="swipe('previous')">
<h1>long content page 2</h2>
</section>

<section hm-swipe-left="swipe('next')" hm-swipe-right="swipe('previous')">
<h1>long content page 2</h2>
</section>

The problem is that when the content is long, those sections aren't scrollable anymore.

I already tried a bunch of options that should fix this but not one is working appropriate.

Hope someone can help us with this.

Cannot scroll down when using swipe left/right

Hi, I am trying to use the left/right swipe and it is working properly. The problem is that if I use them the element does not scroll down anymore as it did by default.
What I want is to perform certain actions when swiping left/right but still let the element scroll down when making the down-to-top gesture. I thought this could be achieved by calling event.preventDefault() but it is not the case.

Am I forgeting anything here?
Thanks in advance.

Unable to trigger .click() and .stopPropagation() events

Hi,
i am looking into implementing hammer on my project... the code looks nice and solid so thanks for the hard work.

I have however noticed that .click(), dblclick(), and $event.stopPropagation() dont work with hm-tap /hm-doubletap.
Isnt hm-tap supposed to mimic ng-click since it replaces the ng-click in browsers as well?
while .click()/.dblclick() arent really the angular way of doing things, i would imagine they should be there for the sake of consistency, while stopPropagation is a pretty vital feature.

example of the issue: http://plnkr.co/edit/ybwPz4a7ow8QeEB7FFlZ?p=preview

any plans of including them somewhere along the line or are they left out for a specific purpose?

Add pressup directive

requireFailure.. um, failure

I'm not clear on how to wire up several recognizers with requireFail via the hmRecognizerOptions attribute... if it's even possible.
My perusal of the source left me with the impression it could be done, but I'm having a problem with sequencing the creation of the recognizers on a given element.
To see the problem firsthand, take the existing default demo, and add the following hm-recognizer-options attribute,

    <div id="target"
      ng-controller="hmCtrl"
      hm-pan="onHammer"
      hm-pinch="onHammer"
      hm-press="onHammer"
      hm-rotate="onHammer"
      hm-swipe="onHammer"
      hm-tap="onHammer"
      hm-doubletap="onHammer"
      hm-recognizer-options='[
      {"type":"pan","requireFailure":"swipe"}
      ]'>
      {{eventType}}
    </div>

My hope was this would cause pan to be recognized only after swipe fails. However, stepping through the code reveals that the swipe recognizer has not been instantiated when pan is trying to reference it during the requireFail call.
It's also not clear how this would ever work since requireFailure (in HammerJS) automatically creates the reverse reference as well.
In short, it appears both recognizers have to be instantiated before calling requireFailure, but angular.hammer.js treats the recognizer-options on creation of each recognizer.

Am i missing a trick somewhere?
Or will I be creating my own directive that manages the requireFailure (and/or recognizeWith) wiring?

ghostclicks and iScroll

For some reason, while using ng-hammerjs + ng-iscroll ghostClicks prevention some times fails: tap event handler triggers twice and even scrolls parent ng-iscroll element

some settings I'm using:
ng-hammer preventGhost : true -- need it for touch laptops
ng-iscroll preventDefault: false -- need it for forms to interact properly (see this issue)

so I've come up with a bit different ghost clicks elimination implementation, based on blocking touch events for some time after mouse events were triggered on the element and vice versa.

Please, see this gist

replace preventGhosts function in your angular.hammer.jswith code from the gist ( uncomment the console calls if needed to see whats happening )

Note: this has been tested only against chrome's "notebook with touch" emulation and HAS NOT been tested on a real device.

So, to sum up: if I'm not alone in running into such an issue and if this code works well on real touch devices I could create a PR.

Thanks.

RFC: Switch to model based options

Currently the Manager and Recogniser options are both attributes that accept JSON (L124), this causes issues when it is necessary to change things like the inputClass as that method requires a function and not a string.

Switching to model based options would be better. This could be done with isolate scope (I don't know if that would cause issues as I haven't tested) or by calling a model on the scope using a value passed into an attribute. For example, Line 124 could become:

managerOpts = scope[attrs.hmManagerOptions]

And instead of passing through JSON you instead pass through a model name:

hm-manager-options="options"

Then all options can be set in a model on the controller.

I'm happy to submit a pull request for this if you're happy with the change. Obviously this would be a breaking change but it would mean that you could change the inputClass, something we need to do in this project.

broken ios scrolling

Hello everyone, I'm working on an app that has a div with an absolute position, an overflow-y: scroll, z-index:1 and a hm-swipeleft attribute (sort of a navigation drawer that hides when swipe to the left). Everything works fine on all devices except in iOS (safari and chrome). The problem I'm having is that the content of the div won't scroll unless I remove the hm-swipeleft attribute. I tried disabling preventDefault and stopPropagation with hm-recognizer-options but I couldn't get it to work. Here is a code sample to test

<div style="height: 400px; width:100px; position:absolute; overflow-y:scroll; z-index:1;" hm-swipeleft="toggleMenu"> <button style="height:50px; width:100%;" ng-repeat="a in array ">{{a}}</button> </div>

any ideas will be appreciated. Thanks in advance

Don't depend on window.Hammer

I use requirejs modules to load hammer. Therefore, hammer does not initialize itself into window.Hammer. Your code depends on window.Hammer. I am sad. 😢

Demo links broken

The demo links are broken: http://ryanmullins.github.io/angular-hammer/examples/default

How to get access to element from controller?

I can get the target element (using event.target) but how can i get the element where the hammer directive is located? Thanks

preventGhosts not needed?

I'm trying to verify that ng-click is indeed firing if I do not set prevetnGhosts. however my sample is not showing any ng-clicks being evented , so I checked out your demo (see link below) and it is also not showing anything for any ng-clicks. Does this mean preventGhosts is no longer needed? Or do I misunderstand the purpose?

http://ryanmullins.github.io/angular-hammer/examples/raw/tap

Also, the demo does not record anything at all when tapping or clicking on the 2nd and 4th options (recognizer with prevent ghosts and stop propogation)

Support for angular 2

Do you intend to add support for angularjs 2 ?

kindly guide

Pressup not fired when pointer leaves boundaries of initial press container

I need to fire a handler when the user touches down on a div element and also when the user releases the touch. In the old monospaced/hammer library I used the touchdown and touchrelease, and touchrelease was fired when the user released the touch which included when they dragged their finger out of bounds. The new press and pressup implementation does not seem to support this use case. I think we either need to fire pressup when the pointer leaves div boundaries, or allow it to still be fired even after the pointer has left the boundaries. Currently if the user presses down inside the div and then drags outside of it and releases, pressup is never fired.

Minification Error

Line 168 of angular.hammer.js conditionally executes fn.call(...) if typeof fn === 'function'.
Corresponding code in angular.hammer.min.js only checks for existence, i.e. b&&b.call(...) where b is the fn variable from the unminified version.
This causes an error, as b is sometimes an angular object.

Add checker to prevent a ghost-click from being sent to the browser

We've been having problems at work with the tap gesture recognizer sending two events, a tap and a click, for each single tap on the screen. This seems to be a larger problem in Hammer, as its covered in the Tips page.

Jorik has created a workaround for this, PreventGhostClick, that I want to add into Angular Hammer. The simple solution seems to be to apply this functionality when the prevent_default option is set to true.

How to remove/unbind an event

Hi,
I'm using angular-hammer to allow saving an object on vertical pan after passing a certain threshold. The logic is, if the dragging position event.center.y passes the threshold, it should trigger a save on panend. If it does not pass the threshold, the object returns to its starting position and by the next pan, it should reset. It works the first time, however, the event panend is registered — so if the first pan didn't reach the threshold (it still emit panend) which by the second pan (passing the threshold) the emitted panend would be called even though the current pan does not end.

Is there a way to remove/unbind the panend event?

Thank you

Does it make sense to make use of requestAnimationFrame?

I wonder if you could increase performance by using requestAnimationFrame. For example on a pan event you could $apply your scope in a requestAnimationFrame. Do you have any experience on this topic and do you know why this would/wouldn't work?

recognizer bugs

the new stuff is pretty buggy and isn't working at all for me. it is also VASTLY more complicated code than what i wrote before. now i have to spend a bunch of time trying to debug it all. 😢

Dynamic hm-manager-options

I wanted to know if there is a way to make this work:
on element:
hm-manager-options='{"enable":panFlag}'

on js:
$scope.panFlag = false;

Option to disable callable return values

First of all, thanks for porting this library to Hammer v2.

So, this guy has been giving me no end of trouble.

I write my JS to be as composable as possible, which means two things: (1) the internal logic doesn't know anything about the UI, (2) most things return functions.

Even accounting for this, whenever you integrate a 3rd-party lib you have no control over, you need to make sure you wrap all your calls in something that'll nuke the return value. I get why the behavior is the way it is, but it'd sure be nice to have a module-level setting to disable it.

Lemme know if this seems reasonable and if you'd like a PR.

jsdoc-default.css loaded by webpack

When I load angular-hammer with npm and then include the .js with webpack, it automatically loads multiple other files, including jsdoc-default.css.

This behaviour doesn't happen with other libraries so I assume there is some wrong reference/include in angular-hammer.

Doesn't Install Dependencies Automatically When Used with Browserify

When I use this module with browserify, it works great except that it doesn't install angular or hammerjs by itself, so I have to manually go in and install them with (cd node_modules/angular-hammer && npm i angular hammer). This seems like a simple fix: just put them into a dependencies field in the package.json. Any reason why this has not been done yet?

Besides this minor quibble, great job with the directives! It's been working great with browserify, even without browserify-shim.

Automate build process with Grunt

latest version in bower is only v2.1.10

I recently installed via bower and it installed v2.1.10. This gave errors within my angular app regarding require() and noticed some commits regarding that issue.

It looks like github includes version(s) that are newer than what is currently available on bower. Is this an error, or are the newer versions such as v3 not released yet?

Thank you

Consume via nuget

For projects already using nuget for package management it would be nice to have this as an option, could we have a nuget package published? The process should be straightforward, also I would be more than happy to assist with this, I could publish the package myself initially and then transfer ownership.

Browserify compile error.

I get a browserify error that says Angular and Hammer cannot be found. I import them right above the angular-hammer import. When I took a closer look, it was searching inside the wrong folders for them: (node_modules\angular-hammer\node_modules\hammerjs\hammer.js) something like that. So I went into angular-hammer's package.json and removed angular and hammerjs from the browser property and all got fixed... Is this really how it should be acting?

ng-click stopped working

I integrated angular-hammer lately into my project, and ng-click stopped working, any idea why?

demo page broken

[Question] How to recognize swipe from the edge

Hello,

I'm trying to implement some custom functionality when user swipes from the left edge of the display in the right direction.

It's probably my misunderstanding of hummer.js, which is the biggest problem, but here is what I tried:

html:

<div class="my-main-container" hm-panright="onHammer" hm-recognizer-options='[{"deltaX":"1"}]'>
</div>

js:

$scope.onHammer = function() {
   console.log('hit'); // never gets hit
}

if I replace hm-panright with hm-pan, it get's hit, but it gets hit on any swipe, not just from the edge.
Do you see anything obvious that I'm doing wrong?
Any help is appreciated!

mixing tap and doubletap on the same element not working on the latest version

Using the latest version, tap and double tap can't be used at the same time on the same element,

the issue seems to be that the "type" passed into "function addRecognizer (manager, type)" is in one case an object {type:tap} instead of string "tap"

ive made an example here (see the console for errors and button actions):
http://codepen.io/anon/pen/ByYMqx

Ryan- Thanks for this directive. We have a couple of issues, hopefully you can help with...

Problem #1 - We're using hm-tap on several elements but we were getting 'ghost' taps and problems with the tap being propagated despite our attempts to prevent propagation.

We tried to resolve this with by including hm-manager-options='{"enabled":true,"preventGhosts":true}' with the hm-tap elements but we didn't see any result from including the hm-manager-options.

To make it work, we had to put a timeout on all of our hmtap functions to prevent 'ghost' taps or double taps. The timeout solution seems to work on some devices but not on others.

Do you have any idea why the hm-manager-options isn't working for us?

Problem #2 - hm-swipe-left - Our app contains infinite vertical scrolling like twitter or instagram. We tried to include swipe/left/right functionality on elements inside the vertical scroll and it completely disable vertical scrolling. Again we tried to use hm-manager-options to enable default vertical scrolling (i.e. preventDefault:false,) by including hm-swipe, but again we didn't have a positive result, so we have had to disable all swipe/left/right functionality because it disables our default vertical scrolling.

Are we implementing the hm-manager-options wrong?

Should we be focusing on hm-recognizer-options?

Thanks again for this. Hope all is well.

vertical pan

I'm having trouble making angular-hammer detect a vertical pan only. Only after panning horizontally is a vertical pan detected.

As mentioned in the Getting Started section of Hammerjs, by default, pan does not respond to vertical events initially. To override this DIRECTION_ALL has to be set - not as an option parameter on the object instantiation, but on a separate call to set(). An example can be seen here: http://codepen.io/jtangelder/pen/ABFnd

How would I achieve this with angular-hammer?

I've tried using hm-custom like so:

[{"type":"pan", "event":"vertPan", "pointers":0, "direction":"DIRECTION_ALL", "val":"onHammer"}]

But that's not working. See: http://jsfiddle.net/40a1693m/2/

Add sanitizer for recognizer and manger options

I want to add some checks to the recognizer and manager options that check to make sure that options and their values are correct before they're applied. This should also do some checking to ensure proper requireFailure and recognizeWith behavior that was mentioned in #23.

scope.$apply should be optional

Would be great to have a way to disable the scope.$apply that gets run. For hmPan this can degrade performance quite a bit on big apps with no way to tell the lib to not do the apply.

Should probably call hammer.destroy on scope $destroy event

I was chasing a memory leak and looks like it was caused by this module. I tried to replace code in $destroy event from:

              scope.$on('$destroy', function () {
                hammer.off(eventName, handler);
              });

to this:

            scope.$on('$destroy', function () {
              hammer.destroy();
            });

This change seems to fix my memory leaks.

Unable to use defaults.

There should be a provision, where we can override default options.

The below code doesn't work.

window.Hammer.defaults.preset.push([Hammer.Tap,{time: 800, threshold: 12}])

Event no longer passing after updating to 2.1.3, 2.1.4

I'm using angular-hammer like this:

    <a ng-repeat="someItem in someList" hm-tap="myFunction( $event, someItem )">My Link</a>

The directive used to pass $event, but it no longer does in 2.1.3 or 2.1.4.

I know that the usage doesn't really follow your examples. I wasn't sure how else to get the object in my repeated into the tap function.

Dynamic hm-recognizer-options

Hello,

I have managed to insert variables from my $scope into the attributes of the hm-recognizer-options directive.

hm-recognizer-options='[
    {"type":"tap","enable":{{!cac.isReduced}}},
    {"type":"press","time":2000,"enable":{{!cac.isReduced}}},
    {"type":"pan","enable":{{!cac.isReduced}}},
    {"type":"pinch","enable":{{!cac.isReduced}}}
]'

However, the options seem to be compiled with the initial value of the variables, and then not updated when the variable cac.isReduced changes its value. I have tried to initialize the app with the variable assigned to true and assigned to false and then change it through the corresponding interaction in the app, resulting in the same events being recognized.

I would say there are some $watch(...) functions missing, but I do not have time to check it.

Can you have a look at this problem?, I think it would improve a lot the library :).

Thank you in advance!

broken ios scrolling

Check out this issue:
#62

How do you make such a basic functionality so hard to implement? I mean getting swipable navigation menu is probably the biggest reason people start using touch events in the first place. I cannot get this to work no matter how hard I try. Only tested on iPhone Safari, here's the Codepen, visit it on iPhone:
http://codepen.io/waterplea/pen/aNYaOe
I've made 3 different approaches there that I've tried, Codepen is pretty self explainatory. Note that it doesn't matter in which order I define hm-recognizer-options or put hm-swipeleft/hm-swiperight in the first approach - it only works for swipeleft if there are both used. Also note that leaving out type or making it empty does not work either (it is mentioned that if no type value is provided then options will be applied to all types - this either isn't true or "preventDefault" doesn't work in this case).

[Accessibility] Cannot trigger "hm-tap" in button using keyboard

When you use the keyboard "tab" key to focus the button and then press "enter" key, hm-tap does not get triggered, but ng-click does.
http://plnkr.co/edit/ooecDAoIrGRLmcbvOsDA?p=preview

Additionally, if I use anchor elements instead, neither one of the events gets focus unless they have an href attribute and if that is the case, then it behaves the same way as the buttons, hm-tap does not trigger, but ng-click does.
http://plnkr.co/edit/aE99UzMiTJk4khzSjEBK?p=preview

It may be related to: hammerjs/hammer.js#312

hm-swiperight stops me from scrolling...

I don't know if this is intended behaviour or not, but when I use the hm-swipeleft or hm-swiperight directive on an li, I can't scroll the list by dragging that li normally.

preventGhosts not working

A simple setup like this is triggering the tap event multiple times. Tested in Chrome, Safari, Firefox, Mobile Safari.

Template:

<a hm-tap="myFunction( $event, someItem )">My Link</a>

Controller:

$scope.myFunction = function ( ev, item ) {
  ev.preventDefault();
  console.log ( 'hello' ); 
};

This fires console.log twice.

I tried adding Hammer Manager Options didn't help, but the event still fires twice:

<a hm-tap="myFunction( $event, someItem )" hm-manager-options='{"enabled":true,"preventGhosts":true}'>My Link</a>

The repeated call issue seems to have existed since 2.1.2. I tried both 2.1.3 and 2.1.4 with event.preventDefault() back when the event was being passed, as well as preventGhosts, and the problem still exists. Note that when I was getting the event, the type was 'tap for both calls, so it wasn't a 'tap' and then a 'click'.

It this related to the way I'm calling the $scope function? I can't see how else I can easily pass a $scope object to myFunction.

Passing arguments to function besides event arguments

Hi there

I want to call a function on a hammer pan and I want to pass a custom value with it.

`

I thought I could use something like this:$scope.startPan = function (event, string) {
//... handler
}``

But unfortunately this does not work.

Is there a possibility to do something like this?

Any hints appreciated.
thanks

Add JSDoc3 Support

Starting to use JSDoc 3 to document the inner workings of the code.

When I use it into browserify, it went wrong

it shows Cannot find module 'hammer'

This is my package.json:

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "selector": "./node_modules/china-area-selector/dist/china-area-selector.js",
    "ngAnimate": "./node_modules/angular-animate/angular-animate.js",
    "ngCookies": "./node_modules/angular-cookies/angular-cookies.js",
    "Hammer": "./node_modules/hammerjs/hammer.js"
  },
  "browserify-shim": {
    "angular": "angular",
    "selector": "china-area-selector",
    "ngAnimate": "ngAnimate",
    "ngCookies": "ngCookies",
    "Hammer": "Hammer"
  },

Multiple custom recognizers is not working

Currently, adding multiple recognizers to the same element ends up in a last in wins.

If you need to create custom recognizers, you can put 1 per element.

This can be repro'd via your demo

Angular-hammer throws TypeError when evaluating angular expressions

Fiddle here: http://jsfiddle.net/ramoneguru/b1sckc80/

I was using the hm-tap feature to evaluate the following:

<h1 ng-init="test1 = true" hm-tap="test1 = !test1">Click here to see value: {{test1}}</h1>

When toggling the test1 value I get an error in the console, "TypeError: undefined is not a function"
Updating test1's value from "false" to "true": "TypeError: undefined is not a function"
Updating test1's value from "true" to "false": No error

Error seems to happen on line 168 of angular.hammer.js

if (fn) {
  fn.call(scope, event);
}

ERROR: Angular Hammer could not require() a reference to Hammer

I'm trying to use this with require.js

Im getting the ERROR: Angular Hammer could not require() a reference to Hammer.

So have gone and tried changing line 28 to require 'hammer' instead of 'hammerjs', and it works,

I looked back in your commit history and on dec 4 you had a commit that would account for that, but then it looks like after that you removed it again. it was first noted and fixed in #8

any chance of putting it back in again?

requireFailure not working with doubletap

When you add requireFailure of doubletap you get a TypeError: "TypeError: Cannot read property 'requireFailure' of null at db.V.requireFailure".

Changing the requireFailure to swipe, pan, etc. all works.

<div id="trigger"
    hm-tap="onHammer"
    hm-doubletap="onHammer"
    hm-recognizer-options='[
        {"type":"singletap", "requireFailure":"doubletap"}
    ]' ></div>

Simillarly, using a recognizeWith of singletap also doesn't work.

This example from hammerjs shows the regular usage of these options: http://codepen.io/jtangelder/pen/pBuIw