Angular.js & Hammer.js
Team
Clayton Canyon
The Challenge:
Create a native like gesture experience for mobile web
applications and cordova phonegap.
Specifically, we ...
Hammer.js
A powerful and somewhat documented library for
handling gesture events.
Getting Started
Add Hammer.js and Modernizr
Add some of this meta
<meta name="viewport" content="user-scalable=no, width=d...
Simple Triggers
Easy Hammer
Hammer(el).on("swipeleft", function() {
alert('you swiped left!');
});
Angular-Gestures makes ...
Our Solution
We created our own directive.
<ui-gesture>
3 main parts make it work...
1. Hammertime
Create a new instance of hammer and tell it which
events to listen for.
$scope.hammertime.on("dragdown dragu...
2. Switch(ev.type)
Set event logic by case - like breakpoint behavior for releases and more!
case "release":
if($scope.dra...
3. Recursion for animation
As you change ev.gesture.deltaY ...
$scope.updateHeight = function() {
$scope.setHeight($scope....
Important tips
ev.prevent_defaults()
Stops the browsers default behavior. A must for vertical gestures.
ev.stopPropogation...
Angular.js & Hammer.js
demo:
http://tinyurl.com/p96pl7v
Upcoming SlideShare
Loading in …5
×

Angular.js & hammer.js - Clayton Meador & Canyon Boak

2,835 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,835
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular.js & hammer.js - Clayton Meador & Canyon Boak

  1. 1. Angular.js & Hammer.js
  2. 2. Team Clayton Canyon
  3. 3. The Challenge: Create a native like gesture experience for mobile web applications and cordova phonegap. Specifically, we were interested in delivering gestures as angular directives. Oh, also we are totes javascript noobs.
  4. 4. Hammer.js A powerful and somewhat documented library for handling gesture events.
  5. 5. Getting Started Add Hammer.js and Modernizr Add some of this meta <meta name="viewport" content="user-scalable=no, width=device- width, initial-scale=1, maximum-scale=1", minimal-ui>
  6. 6. Simple Triggers Easy Hammer Hammer(el).on("swipeleft", function() { alert('you swiped left!'); }); Angular-Gestures makes this a bit easier by providing simple bindings like: hm-swipeleft=”showCoolStuffOnTheRight()” hm-swipeleft-opts=” minimum-touch=”3”
  7. 7. Our Solution We created our own directive. <ui-gesture> 3 main parts make it work...
  8. 8. 1. Hammertime Create a new instance of hammer and tell it which events to listen for. $scope.hammertime.on("dragdown dragup release", function(ev) { $scope.renderHammer(ev); }); also: hammertime.off(gestures) and hammertime.enable(toggle)
  9. 9. 2. Switch(ev.type) Set event logic by case - like breakpoint behavior for releases and more! case "release": if($scope.draggedDown) { // over the breakpoint, trigger the callback if(ev.gesture.deltaY >= $scope.breakpoint) { $scope.container.className = 'animating'; $scope.setHeight($scope.targetHeight); $scope.opened = true;
  10. 10. 3. Recursion for animation As you change ev.gesture.deltaY ... $scope.updateHeight = function() { $scope.setHeight($scope.slidedown_height); $scope.anim = requestAnimationFrame(function() { $scope.updateHeight(); }); }; $scope.setHeight = function(height) { if(Modernizr.csstransforms3d) { this.container.style.transform = 'translate3d(0,'+height+'px,0) ';
  11. 11. Important tips ev.prevent_defaults() Stops the browsers default behavior. A must for vertical gestures. ev.stopPropogation() Prevents Bubble up, so you can nest gestures. requestAnimationFrame() Makes sure your sh*t is performant and your battery life is straight all the time m*th#$ f^!&#@ http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  12. 12. Angular.js & Hammer.js demo: http://tinyurl.com/p96pl7v

×