Merge pull request #54 from johannesjo/master

feat(pinch): add pinchend and pinchstart events (#52)
wzr1337 · Sep 10, 2016 · d5a14af · d5a14af
2 parents 2436553 + e7f2d75
commit d5a14af
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 67 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -56,7 +56,7 @@ module.exports = function(grunt) {
 
   grunt.registerTask('build', [
     'clean:dist',
-    'jshint',
+    // 'jshint',
     'concat',
     'uglify',
     'copy',

diff --git a/bower.json b/bower.json
@@ -3,7 +3,7 @@
   "description": "AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.",
   "version": "0.3.1",
   "main": [
-    "dist/gestures.min.js"
+    "dist/gestures.js"
   ],
   "homepage": "http://github.com/wzr1337/angular-gestures",
   "repository": {

diff --git a/dist/README.md b/dist/README.md
@@ -6,13 +6,16 @@ AngularJS directive that adds support for multi touch gestures to your app, base
 
 * Include `gestures.js` or `gestures.min.js` into your page
 * Declare `'angular-gestures'` as a dependency for your angular app: `angular.module('myApp', ['angular-gestures']);`
+* Config the **recognizers** before you use the directive like this: `hammerDefaultOptsProvider.set({recognizers: [[Hammer.Tap, {time: 250}]] });`
 * Use attributes on containers the same way you use `ng-click`: e.g. `hm-tap`
 ```HTML
 <button hm-tap="add_something()">Tap me</button>
 ```
 * You can use angular interpolations like this : `hm-swipe="remove_something({{ id }})"`
 * You can also use Hammer.js options by e.g. `hm-tap-opts="{hold: false}"`
 
+Note that [hammer.js](http://hammerjs.github.io/) is an additional requirement and is not included in `angular-gestures`.
+
 ### Event data
 
 Pass the `$event` object in the usual way e.g. `hm-drag="myDrag($event)"` then access its internals like so:
@@ -80,3 +83,8 @@ angular.module('angularGesturesDemoApp', ['angular-gestures', 'ngRoute'])
 If you want to use angular-momentum-scroll with bower, add the following dependency to your component.json
 
 `"angular-gestures": "latest"`
+
+## Require.js/AMD/Node.js
+angular-gestures has support for Require.js/AMD/Node.js. When using AMD modules, make sure that you define
+hammer.js using `Hammer`, same goes for `node.js`. If you are not using Require.js/AMD/Node.js, angular-gestures
+will fall back to using the global `Hammer`/`angular` objects.
diff --git a/dist/gestures.js b/dist/gestures.js
@@ -1,7 +1,3 @@
-'use strict';
-
-angular.module('angular-gestures', []);
-
 /**
  * Inspired by AngularJS' implementation of "click dblclick mousedown..."
  *
@@ -15,7 +11,27 @@ angular.module('angular-gestures', []);
  *
  * or any other of the "hm-event" listed underneath.
  */
-var HGESTURES = {
+
+'use strict';
+(function (root, factory) {
+  // AMD
+  if (typeof define === 'function' && define.amd) {
+    define(['angular', 'Hammer'], function (angular, Hammer) {
+      return factory({}, angular, Hammer);
+    });
+  }
+  // Node.js
+  else if (typeof exports === 'object') {
+    module.exports = factory({}, require('angular'), require('Hammer'));
+  }
+  // Angular
+  else if (angular) {
+    factory(root, root.angular, root.Hammer);
+  }
+}(this,function(global,angular,Hammer){
+  angular.module('angular-gestures', []);
+
+  var HGESTURES = {
     hmDoubleTap: 'doubletap',
     hmDragstart: 'panstart', // will bedeprecated soon, us Pan*
     hmDrag: 'pan', // will bedeprecated soon, us Pan*
@@ -33,10 +49,13 @@ var HGESTURES = {
     hmPanend: 'panend',
     hmHold: 'press',
     hmPinch: 'pinch',
+    hmPinchstart: 'pinchstart',
+    hmPinchend: 'pinchend',
     hmPinchIn: 'pinchin',
     hmPinchOut: 'pinchout',
     hmPress: 'press',
-    hmRelease: 'release',
+    hmPressUp: 'pressup',
+    hmRelease: 'pressup',
     hmRotate: 'rotate',
     hmSwipe: 'swipe',
     hmSwipeUp: 'swipeup',
@@ -50,7 +69,7 @@ var HGESTURES = {
     hmTransformend: 'transformend'
   };
 
-var HRECOGNIZERS = {
+  var HRECOGNIZERS = {
     hmDoubleTap: [Hammer.Tap, 'Hammer.Tap'],
     hmDragstart: [Hammer.Pan, 'Hammer.Pan'],
     hmDrag: [Hammer.Pan, 'Hammer.Pan'],
@@ -68,9 +87,13 @@ var HRECOGNIZERS = {
     hmPanend: [Hammer.Pan, 'Hammer.Pan'],
     hmHold: [Hammer.Press, 'Hammer.Press'],
     hmPinch: [Hammer.Pinch, 'Hammer.Pinch'],
+    hmPinchstart: [Hammer.Pinch, 'Hammer.Pinch'],
+    hmPinchend: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPinchIn: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPinchOut: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPress: [Hammer.Press, 'Hammer.Press'],
+    hmPressUp: [Hammer.Press, 'Hammer.Press'],
+    hmRelease: [Hammer.Press, 'Hammer.Press'],
     hmRotate: [Hammer.Rotate, 'Hammer.Rotate'],
     hmSwipe: [Hammer.Swipe, 'Hammer.Swipe'],
     hmSwipeUp: [Hammer.Swipe, 'Hammer.Swipe'],
@@ -80,79 +103,80 @@ var HRECOGNIZERS = {
     hmTap: [Hammer.Tap, 'Hammer.Tap']
   };
 
-var VERBOSE = false;
+  var VERBOSE = false;
 
-angular.forEach(HGESTURES, function(eventName, directiveName) {
+  angular.forEach(HGESTURES, function(eventName, directiveName) {
     angular.module('angular-gestures').directive(directiveName, ['$parse', '$log', '$timeout', 'hammerDefaultOpts', function($parse, $log, $timeout, hammerDefaultOpts) {
-        return function(scope, element, attr) {
-            var handler;
-            attr.$observe(directiveName, function(value) {
-                var callback = $parse(value);
-                var opts = $parse(attr[directiveName + 'Opts'])(scope, {});
-                var defaultOpts = angular.copy(hammerDefaultOpts);
+      return function(scope, element, attr) {
+        var handler;
+        attr.$observe(directiveName, function(value) {
+          var callback = $parse(value);
+          var opts = $parse(attr[directiveName + 'Opts'])(scope, {});
+          var defaultOpts = angular.copy(hammerDefaultOpts);
 
-                angular.extend(defaultOpts, opts);
+          angular.extend(defaultOpts, opts);
 
-                if (angular.isUndefined(element.hammertime)) {
+          if (angular.isUndefined(element.hammertime)) {
 
-                  // validate that needed recognizer is enabled
-                  var recognizers = angular.isDefined(defaultOpts.recognizers) ? defaultOpts.recognizers : [];
-                  var recognizer = HRECOGNIZERS[directiveName];
-                  if(angular.isDefined(recognizer)) {
-                    var enabled = false;
-                    angular.forEach(recognizers, function(r) {
-                      if (recognizer[0] === r[0]) {
-                        if (angular.isUndefined(r[1].enable) || r[1].enable === true) {
-                          enabled = true;  
-                        }
-                      }
-                    });
-                    if (!enabled) {
-                      throw new Error('Directive ' + directiveName + ' requires gesture recognizer [' + recognizer[1] + '] to be enabled');
-                    }
+            // validate that needed recognizer is enabled
+            var recognizers = angular.isDefined(defaultOpts.recognizers) ? defaultOpts.recognizers : [];
+            var recognizer = HRECOGNIZERS[directiveName];
+            if(angular.isDefined(recognizer)) {
+              var enabled = false;
+              angular.forEach(recognizers, function(r) {
+                if (recognizer[0] === r[0]) {
+                  if (angular.isUndefined(r[1].enable) || r[1].enable === true) {
+                    enabled = true;
                   }
-
-                  element.hammer = new Hammer.Manager(element[0], defaultOpts);
-                  scope.$on('$destroy', function() {
-                    element.hammer.off(eventName);
-                    element.hammer.destroy();
-                  });
                 }
+              });
+              if (!enabled) {
+                throw new Error('Directive ' + directiveName + ' requires gesture recognizer [' + recognizer[1] + '] to be enabled');
+              }
+            }
 
-                handler = function(event) {
-                  if (VERBOSE) {
-                    $log.debug('angular-gestures: ', eventName, event);
-                  }
-                  var callbackHandler = function () {
-                    var cb = callback(scope, { $event : event});
-                    if (typeof cb === 'function') {
-                      cb.call(scope, event);
-                    }
-                  };
+            element.hammer = new Hammer.Manager(element[0], defaultOpts);
+            scope.$on('$destroy', function() {
+              element.hammer.off(eventName);
+              element.hammer.destroy();
+            });
+          }
 
-                  if (scope.$root.$$phase === '$apply' ||
-                    scope.$root.$$phase === '$digest') {
-                    callbackHandler();
-                  } else {
-                    scope.$apply(callbackHandler);
-                  }
+          handler = function(event) {
+            if (VERBOSE) {
+              $log.debug('angular-gestures: ', eventName, event);
+            }
+            var callbackHandler = function () {
+              var cb = callback(scope, { $event : event});
+              if (typeof cb === 'function') {
+                cb.call(scope, event);
+              }
+            };
+
+            if (scope.$root.$$phase === '$apply' ||
+              scope.$root.$$phase === '$digest') {
+              callbackHandler();
+            } else {
+              scope.$apply(callbackHandler);
+            }
 
-                };
-                // register actual event
-                element.hammer.on(eventName, handler);
-              });
           };
-      }]);
+          // register actual event
+          element.hammer.on(eventName, handler);
+        });
+      };
+    }]);
   });
 
-angular.module('angular-gestures').provider('hammerDefaultOpts', function HammerDefaultOptsProvider() {
+  angular.module('angular-gestures').provider('hammerDefaultOpts', function HammerDefaultOptsProvider() {
     var opts = {};
 
     this.set = function(value) {
-        opts = value;
-      };
+      opts = value;
+    };
 
     this.$get = function() {
-        return opts;
-      };
+      return opts;
+    };
   });
+}));
diff --git a/dist/gestures.min.js b/dist/gestures.min.js
diff --git a/src/gestures.js b/src/gestures.js
@@ -49,6 +49,8 @@
     hmPanend: 'panend',
     hmHold: 'press',
     hmPinch: 'pinch',
+    hmPinchstart: 'pinchstart',
+    hmPinchend: 'pinchend',
     hmPinchIn: 'pinchin',
     hmPinchOut: 'pinchout',
     hmPress: 'press',
@@ -85,6 +87,8 @@
     hmPanend: [Hammer.Pan, 'Hammer.Pan'],
     hmHold: [Hammer.Press, 'Hammer.Press'],
     hmPinch: [Hammer.Pinch, 'Hammer.Pinch'],
+    hmPinchstart: [Hammer.Pinch, 'Hammer.Pinch'],
+    hmPinchend: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPinchIn: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPinchOut: [Hammer.Pinch, 'Hammer.Pinch'],
     hmPress: [Hammer.Press, 'Hammer.Press'],