The document discusses using Hammer.js and Angular.js to create native-like gesture experiences for mobile web apps. It describes how Hammer.js handles gesture events and provides examples of simple triggers. It then details the team's solution of creating an Angular directive called "ui-gesture" that uses Hammer.js to listen for drag, dragdown, dragup and release events. The directive renders the events, switches logic based on event type, and uses requestAnimationFrame for responsive animations. Tips are provided on preventing default behaviors and propagation. A demo of the solution is linked.

1. Angular.js & Hammer.js

2. Team
Clayton Canyon

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. Hammer.js
A powerful and somewhat documented library for
handling gesture events.

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. 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. Our Solution
We created our own directive.
<ui-gesture>
3 main parts make it work...

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. 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. 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. 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. Angular.js & Hammer.js
demo:
http://tinyurl.com/p96pl7v