From 3391e0608b96b34be751ccb60d945e113d5d053a Mon Sep 17 00:00:00 2001 From: josketres Date: Fri, 24 Apr 2015 09:53:14 +0000 Subject: [PATCH] Add a check to validate the recognizers configuration for the directives. --- bower.json | 7 ++++- karma.conf.js | 1 + src/gestures.js | 49 +++++++++++++++++++++++++++++++++++ test/gestures.Spec.js | 60 ++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 113 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 57dd62b..30a05ce 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,9 @@ "name": "angular-gestures", "description": "AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.", "version": "0.3.0", - "main": ["dist/gestures.min.js"], + "main": [ + "dist/gestures.min.js" + ], "homepage": "http://github.com/wzr1337/angular-gestures", "repository": { "type": "git", @@ -14,5 +16,8 @@ "dependencies": { "angular": ">=1.2.0 <=1.4.0", "hammerjs": "~2.0.0" + }, + "devDependencies": { + "angular-mocks": ">=1.2.0 <=1.4.0" } } diff --git a/karma.conf.js b/karma.conf.js index e3a954b..7e62faf 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -16,6 +16,7 @@ module.exports = function(config) { // list of files / patterns to load in the browser files: [ 'components/**/*.min.js', // dependecies + 'components/angular-mocks/angular-mocks.js', // dependecies 'src/**/*.js', 'test/**/*.Spec.js' ], diff --git a/src/gestures.js b/src/gestures.js index 6746ffe..3ab488a 100644 --- a/src/gestures.js +++ b/src/gestures.js @@ -50,6 +50,36 @@ var HGESTURES = { hmTransformend: 'transformend' }; +var HRECOGNIZERS = { + hmDoubleTap: [Hammer.Tap, 'Hammer.Tap'], + hmDragstart: [Hammer.Pan, 'Hammer.Pan'], + hmDrag: [Hammer.Pan, 'Hammer.Pan'], + hmDragUp: [Hammer.Pan, 'Hammer.Pan'], + hmDragDown: [Hammer.Pan, 'Hammer.Pan'], + hmDragLeft: [Hammer.Pan, 'Hammer.Pan'], + hmDragRight: [Hammer.Pan, 'Hammer.Pan'], + hmDragend: [Hammer.Pan, 'Hammer.Pan'], + hmPanstart: [Hammer.Pan, 'Hammer.Pan'], + hmPan: [Hammer.Pan, 'Hammer.Pan'], + hmPanUp: [Hammer.Pan, 'Hammer.Pan'], + hmPanDown: [Hammer.Pan, 'Hammer.Pan'], + hmPanLeft: [Hammer.Pan, 'Hammer.Pan'], + hmPanRight: [Hammer.Pan, 'Hammer.Pan'], + hmPanend: [Hammer.Pan, 'Hammer.Pan'], + hmHold: [Hammer.Press, 'Hammer.Press'], + hmPinch: [Hammer.Pinch, 'Hammer.Pinch'], + hmPinchIn: [Hammer.Pinch, 'Hammer.Pinch'], + hmPinchOut: [Hammer.Pinch, 'Hammer.Pinch'], + hmPress: [Hammer.Press, 'Hammer.Press'], + hmRotate: [Hammer.Rotate, 'Hammer.Rotate'], + hmSwipe: [Hammer.Swipe, 'Hammer.Swipe'], + hmSwipeUp: [Hammer.Swipe, 'Hammer.Swipe'], + hmSwipeDown: [Hammer.Swipe, 'Hammer.Swipe'], + hmSwipeLeft: [Hammer.Swipe, 'Hammer.Swipe'], + hmSwipeRight: [Hammer.Swipe, 'Hammer.Swipe'], + hmTap: [Hammer.Tap, 'Hammer.Tap'] + }; + var VERBOSE = false; angular.forEach(HGESTURES, function(eventName, directiveName) { @@ -64,6 +94,25 @@ angular.forEach(HGESTURES, function(eventName, directiveName) { angular.extend(defaultOpts, opts); 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"); + } + } + element.hammer = new Hammer.Manager(element[0], defaultOpts); scope.$on('$destroy', function() { element.hammer.off(eventName); diff --git a/test/gestures.Spec.js b/test/gestures.Spec.js index 522ed91..ba8f50d 100644 --- a/test/gestures.Spec.js +++ b/test/gestures.Spec.js @@ -1,5 +1,59 @@ describe("A suite", function() { - it("contains spec with an expectation", function() { - expect(true).toBe(true); - }); + it("contains spec with an expectation", function() { + expect(true).toBe(true); + }); +}); + +describe("Gesture recognizers validation", function() { + + var $compile, + $rootScope; + + beforeEach(module('angular-gestures', function(hammerDefaultOptsProvider) { + hammerDefaultOptsProvider.set({ + recognizers: [ + [Hammer.Tap, {}], + [Hammer.Pinch, { + enable: false + }], + [Hammer.Rotate, { + enable: true + }], + ] + }); + })); + + beforeEach(inject(function(_$compile_, _$rootScope_) { + $compile = _$compile_; + $rootScope = _$rootScope_; + })); + + it("should throw if no swipe recognizer is not configured and hmSwipe directive is used", function() { + expect(function() { + var element = $compile("
")($rootScope); + $rootScope.$digest(); + }).toThrow("Directive hmSwipe requires gesture recognizer [Hammer.Swipe] to be enabled"); + }); + + it("should not throw if tap recognizer is configured and hmTap directive is used", function() { + var element = $compile("
")($rootScope); + $rootScope.$digest(); + }); + + it("should throw if pinch recognizer is configured but disabled and hmPinch directive is used", function() { + expect(function() { + var element = $compile("
")($rootScope); + $rootScope.$digest(); + }).toThrow("Directive hmPinch requires gesture recognizer [Hammer.Pinch] to be enabled"); + }); + + it("should not throw if rotate recognizer is configured and explicitly enabled and hmRotate directive is used", function() { + var element = $compile("
")($rootScope); + $rootScope.$digest(); + }); + + it("should not throw if hmTouch directive is used (no recognizer needed)", function() { + var element = $compile("
")($rootScope); + $rootScope.$digest(); + }); }); \ No newline at end of file