ecomp-portal-FE/client/bower_components/angular-gestures/README.md

   1 # angular-gestures
   2
   3 AngularJS directive that adds support for multi touch gestures to your app, based on hammer.js.
   4
   5 ## Usage
   6
   7 * Include `gestures.js` or `gestures.min.js` into your page
   8 * Declare `'angular-gestures'` as a dependency for your angular app: `angular.module('myApp', ['angular-gestures']);`
   9 * Use attributes on containers the same way you use `ng-click`: e.g. `hm-tap`
  10 ```HTML
  11 <button hm-tap="add_something()">Tap me</button>
  12 ```
  13 * You can use angular interpolations like this : `hm-swipe="remove_something({{ id }})"`
  14 * You can also use Hammer.js options by e.g. `hm-tap-opts="{hold: false}"`
  15
  16 ### Event data
  17
  18 Pass the `$event` object in the usual way e.g. `hm-drag="myDrag($event)"` then access its internals like so:
  19 ```JS
  20 $scope.myDrag = function(event) {
  21         console.log(event.gesture);
  22 }
  23 ```
  24 Refer to the [Hammer.js docs](https://github.com/EightMedia/hammer.js/wiki/Getting-Started) for more details on the properties of `event`.
  25
  26 ## Supported events
  27
  28
  29 * hmDoubleTap : 'doubletap',
  30 * hmDragstart : 'dragstart',
  31 * hmDrag : 'drag',
  32 * hmDragUp : 'dragup',
  33 * hmDragDown : 'dragdown',
  34 * hmDragLeft : 'dragleft',
  35 * hmDragRight : 'dragright',
  36 * hmDragend : 'dragend',
  37 * hmHold : 'hold',
  38 * hmPinch : 'pinch',
  39 * hmPinchIn : 'pinchin',
  40 * hmPinchOut : 'pinchout',
  41 * hmRelease : 'release',
  42 * hmRotate : 'rotate',
  43 * hmSwipe : 'swipe',
  44 * hmSwipeUp : 'swipeup',
  45 * hmSwipeDown : 'swipedown',
  46 * hmSwipeLeft : 'swipeleft',
  47 * hmSwipeRight : 'swiperight',
  48 * hmTap : 'tap',
  49 * hmTouch : 'touch',
  50 * hmTransformstart : 'transformstart',
  51 * hmTransform : 'transform',
  52 * hmTransformend : 'transformend'
  53
  54
  55 All [Hammerjs events](https://github.com/EightMedia/hammer.js/wiki/Getting-Started) are supported. The corresponding Angularjs attribute has `hm-` prepended to the name. So for example, the 'doubletap' event becomes `hm-double-tap` etc.
  56
  57 *Attention* : *end and *start events are NOT CamelCased because of issues caused by $animate interference.
  58
  59 ## Default options
  60 To set recognizer default options you can use `hammerDefaultOptsProvider`. Access it like in the demo:
  61
  62 ```
  63 angular.module('angularGesturesDemoApp', ['angular-gestures', 'ngRoute'])
  64   .config(function ($routeProvider, hammerDefaultOptsProvider) {
  65     $routeProvider
  66       .when('/', {
  67         templateUrl: 'views/main.html',
  68         controller: 'MainCtrl'
  69       })
  70       .otherwise({
  71         redirectTo: '/'
  72       });
  73     hammerDefaultOptsProvider.set({
  74         recognizers: [[Hammer.Tap, {time: 250}]]
  75     });
  76   });
  77 ```
  78
  79 ## Bower
  80 If you want to use angular-momentum-scroll with bower, add the following dependency to your component.json
  81
  82 `"angular-gestures": "latest"`