Angular.js & Hammer.js

Team

Clayton Canyon

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.

Hammer.js

A powerful and somewhat documented library for handling gesture events.

Getting StartedAdd 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>

Simple TriggersEasy 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”

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 dragup release", function(ev) {

$scope.renderHammer(ev);

});

also: hammertime.off(gestures) and hammertime.enable(toggle)

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;

3. Recursion for animationAs 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) ';

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/

Angular.js & Hammer.jsdemo:

http://tinyurl.com/p96pl7v