際際滷

際際滷Share a Scribd company logo

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

C
cmeador

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 of 12
Download to read offline
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 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>
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
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 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) ';
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.js demo: http://tinyurl.com/p96pl7v

More Related Content

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

  • 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/