ryanmullins / angular-hammer Goto Github PK
View Code? Open in Web Editor NEWThis project forked from monospaced/angular-hammer
Hammer.js v2 support for AngularJS
Home Page: http://ryanmullins.github.io/angular-hammer/
License: MIT License
This project forked from monospaced/angular-hammer
Hammer.js v2 support for AngularJS
Home Page: http://ryanmullins.github.io/angular-hammer/
License: MIT License
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}])
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).
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)
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.
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
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.
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;
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?
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.
Starting to use JSDoc 3 to document the inner workings of the code.
I integrated angular-hammer lately into my project, and ng-click stopped working, any idea why?
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
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. ๐ข
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.
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.js
with 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.
I can get the target element (using event.target) but how can i get the element where the hammer directive is located? Thanks
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);
}
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/
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.
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.
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.
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) {But unfortunately this does not work.
Is there a possibility to do something like this?
Any hints appreciated.
thanks
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!
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
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
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?
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"
},
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.
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.
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
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.
Do you intend to add support for angularjs 2 ?
kindly guide
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. ๐ข
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.
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
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.
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
.
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.
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.
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!
The demo links are broken: http://ryanmullins.github.io/angular-hammer/examples/default
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
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?
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.
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?
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.