feat(ngTouch): override mouse event directives

The mouse directives handle the touch events too.

Closes angular#5334

Author: douglasduteil

angularFiles.js

@@ -106,6 +106,7 @@ var angularFiles = {
       'src/ngTouch/touch.js',
       'src/ngTouch/swipe.js',
       'src/ngTouch/directive/ngClick.js',
+      'src/ngTouch/directive/ngEventDirs.js',
       'src/ngTouch/directive/ngSwipe.js'
     ],
     'ngAria': [

src/ngTouch/swipe.js

@@ -2,6 +2,41 @@
 
 /* global ngTouch: false */
 
+// The pointer event matching map
+var POINTER_EVENTS = {
+  'mouse': {
+    start: 'mousedown',
+    move: 'mousemove',
+    end: 'mouseup'
+  },
+  'touch': {
+    start: 'touchstart',
+    move: 'touchmove',
+    end: 'touchend',
+    cancel: 'touchcancel'
+  }
+};
+
+var ngTouchPointerEventStuff = (function pointerEventHandler(){
+
+
+  var POINTER_TYPES = ['mouse', 'touch'];
+
+  return function getEvents(eventType, pointerTypes) {
+    pointerTypes = pointerTypes || POINTER_TYPES;
+    var res = [];
+    angular.forEach(pointerTypes, function(pointerType) {
+      var eventName = POINTER_EVENTS[pointerType][eventType];
+      if (eventName) {
+        res.push(eventName);
+      }
+    });
+    return res.join(' ');
+  }
+
+})();
+
+
     /**
      * @ngdoc service
      * @name $swipe
@@ -25,20 +60,6 @@ ngTouch.factory('$swipe', [function() {
   // The total distance in any direction before we make the call on swipe vs. scroll.
   var MOVE_BUFFER_RADIUS = 10;
 
-  var POINTER_EVENTS = {
-    'mouse': {
-      start: 'mousedown',
-      move: 'mousemove',
-      end: 'mouseup'
-    },
-    'touch': {
-      start: 'touchstart',
-      move: 'touchmove',
-      end: 'touchend',
-      cancel: 'touchcancel'
-    }
-  };
-
   function getCoordinates(event) {
     var touches = event.touches && event.touches.length ? event.touches : [event];
     var e = (event.changedTouches && event.changedTouches[0]) ||
@@ -52,17 +73,6 @@ ngTouch.factory('$swipe', [function() {
     };
   }
 
-  function getEvents(pointerTypes, eventType) {
-    var res = [];
-    angular.forEach(pointerTypes, function(pointerType) {
-      var eventName = POINTER_EVENTS[pointerType][eventType];
-      if (eventName) {
-        res.push(eventName);
-      }
-    });
-    return res.join(' ');
-  }
-
   return {
     /**
      * @ngdoc method
@@ -106,24 +116,23 @@ ngTouch.factory('$swipe', [function() {
       // Whether a swipe is active.
       var active = false;
 
-      pointerTypes = pointerTypes || ['mouse', 'touch'];
-      element.on(getEvents(pointerTypes, 'start'), function(event) {
+      element.on(ngTouchPointerEventStuff('start', pointerTypes), function(event) {
         startCoords = getCoordinates(event);
         active = true;
         totalX = 0;
         totalY = 0;
         lastPos = startCoords;
         eventHandlers['start'] && eventHandlers['start'](startCoords, event);
       });
-      var events = getEvents(pointerTypes, 'cancel');
+      var events = ngTouchPointerEventStuff( 'cancel', pointerTypes);
       if (events) {
         element.on(events, function(event) {
           active = false;
           eventHandlers['cancel'] && eventHandlers['cancel'](event);
         });
       }
 
-      element.on(getEvents(pointerTypes, 'move'), function(event) {
+      element.on(ngTouchPointerEventStuff('move', pointerTypes), function(event) {
         if (!active) return;
 
         // Android will send a touchcancel if it thinks we're starting to scroll.
@@ -157,7 +166,7 @@ ngTouch.factory('$swipe', [function() {
         }
       });
 
-      element.on(getEvents(pointerTypes, 'end'), function(event) {
+      element.on(ngTouchPointerEventStuff('end', pointerTypes), function(event) {
         if (!active) return;
         active = false;
         eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event);

test/ngTouch/directive/ngEventDirsSpec.js

@@ -0,0 +1,86 @@
+'use strict';
+
+describe('ngMousedown (touch)', function() {
+  var element;
+
+  beforeEach(function() {
+    module('ngTouch');
+  });
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should pass event object on mousedown', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mousedown="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'mousedown');
+    expect($rootScope.event).toBeDefined();
+  }));
+
+  it('should pass event object on touchstart too', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mousedown="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'touchstart');
+    expect($rootScope.event).toBeDefined();
+  }));
+});
+
+
+describe('ngMousemove (touch)', function() {
+  var element;
+
+  beforeEach(function() {
+    module('ngTouch');
+  });
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should pass event object on mousemove', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mousemove="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'mousemove');
+    expect($rootScope.event).toBeDefined();
+  }));
+
+  it('should pass event object on touchstart too', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mousemove="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'mousemove');
+    expect($rootScope.event).toBeDefined();
+  }));
+});
+
+describe('ngMouseup (touch)', function() {
+  var element;
+
+  beforeEach(function() {
+    module('ngTouch');
+  });
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should pass event object on mouseup', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mouseup="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'mouseup');
+    expect($rootScope.event).toBeDefined();
+  }));
+
+  it('should pass event object on touchstart too', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-mouseup="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'mouseup');
+    expect($rootScope.event).toBeDefined();
+  }));
+});