wzr1337 / angular-gestures Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.
License: MIT License
AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.
License: MIT License
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
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!
It would be nice, if there would be support for this too.
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
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
Currently 'bower install' does not have the dist folder, although it is referenced in the .bowerrc
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
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?
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,
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?
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']
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'})
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.
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.
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?
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.
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?
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.
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
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...
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?
Why do I get this error message and ng-swipe-up won't work at all?
they're just not firing.
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.
Could you please publish this package to npm?
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
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(...))
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.
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?
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" />
meet Hammer is not defined
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
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:
Import the js in html
<script src="/components/angular-gestures/gestures.min.js"></script>Add the directive to the app
var organizationApp = angular.module('organizationApp', ['OrganizationModel', 'ionic', 'angular-gestures']);
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!
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;
link: function($scope, iElm, iAttrs, controller) {
var element = document.getElementById('pro');
var tap = Hammer(element).on("tap", function(event) {
alert('hello!');
});
}
it's ok
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~
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!
I can't make angular-gestures work
I've got no error but no any event response (I got no problem with ngTouch)
Am I missing something ?
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.