Recognizers: Fix incorrect event order

There is always one last event after the end event this should be emitted first

Closes #818
Fixes #824

Author: mixed

src/recognizer.js

@@ -174,20 +174,24 @@ Recognizer.prototype = {
         var self = this;
         var state = this.state;
 
-        function emit(withState) {
-            self.manager.emit(self.options.event + (withState ? stateStr(state) : ''), input);
+        function emit(event) {
+            self.manager.emit(event, input);
         }
 
         // 'panstart' and 'panmove'
         if (state < STATE_ENDED) {
-            emit(true);
+            emit(self.options.event + stateStr(state));
         }
 
-        emit(); // simple 'eventName' events
+        emit(self.options.event); // simple 'eventName' events
+
+        if (input.additionalEvent) { // additional event(panleft, panright, pinchin, pinchout...)
+            emit(input.additionalEvent);
+        }
 
         // panend and pancancel
         if (state >= STATE_ENDED) {
-            emit(true);
+            emit(self.options.event + stateStr(state));
         }
     },
 

src/recognizers/pan.js

@@ -65,14 +65,15 @@ inherit(PanRecognizer, AttrRecognizer, {
     },
 
     emit: function(input) {
+
         this.pX = input.deltaX;
         this.pY = input.deltaY;
 
         var direction = directionStr(input.direction);
+
         if (direction) {
-            this.manager.emit(this.options.event + direction, input);
+            input.additionalEvent = this.options.event + direction;
         }
-
         this._super.emit.call(this, input);
     }
 });

src/recognizers/pinch.js

@@ -29,10 +29,10 @@ inherit(PinchRecognizer, AttrRecognizer, {
     },
 
     emit: function(input) {
-        this._super.emit.call(this, input);
         if (input.scale !== 1) {
             var inOut = input.scale < 1 ? 'in' : 'out';
-            this.manager.emit(this.options.event + inOut, input);
+            input.additionalEvent = this.options.event + inOut;
         }
+        this._super.emit.call(this, input);
     }
 });

tests/unit/gestures/test_pan.js

@@ -34,3 +34,30 @@ test('`panstart` and `panmove` should be recognized', function() {
 
     equal(panMoveCount, 1);
 });
+
+asyncTest('Pan event flow should be start -> left -> end', function() {
+    expect(1);
+    var pan = new Hammer.Pan({threshold: 1});
+    hammer.add(pan);
+
+    var eventflow = "";
+    var isCalledPanleft = false;
+    hammer.on('panstart', function() {
+        eventflow += "start";
+    });
+    hammer.on('panleft', function() {
+        if(!isCalledPanleft){
+            isCalledPanleft = true;
+            eventflow += "left";
+        }
+    });
+    hammer.on('panend', function() {
+        eventflow += "end";
+        isCalledPanleft = true;
+    });
+
+    Simulator.gestures.pan(el, { deltaX: -100, deltaY: 0 }, function() {
+        equal(eventflow,"startleftend");
+        start();
+    });
+});

tests/unit/gestures/test_pinch.js

@@ -0,0 +1,43 @@
+var el,
+    hammer;
+
+module('Pinch Gesture', {
+    setup: function() {
+        el = document.createElement('div');
+        document.body.appendChild(el);
+
+        hammer = new Hammer(el, {recognizers: []});
+    },
+    teardown: function() {
+        document.body.removeChild(el);
+        hammer.destroy();
+    }
+});
+
+asyncTest('Pinch event flow should be start -> in -> end', function() {
+    expect(1);
+    var pinch = new Hammer.Pinch({enable: true, threshold: .1});
+    hammer.add(pinch);
+
+    var eventflow = "";
+    var isFiredPinchin = false;
+    hammer.on('pinchstart', function() {
+        eventflow += "start";
+    });
+    hammer.on('pinchin', function() {
+        if(!isFiredPinchin){
+            isFiredPinchin = true;
+            eventflow += "in";
+        }
+    });
+    hammer.on('pinchend', function() {
+        eventflow += "end";
+        isFiredPinchin = false;
+    });
+
+    Simulator.gestures.pinch(el, { duration: 500, scale: .5 }, function() {
+        equal(eventflow,"startinend");
+        start();
+    });
+});
+

tests/unit/index.html

@@ -36,6 +36,7 @@
 
 <script src="test_jquery_plugin.js"></script>
 <script src="gestures/test_pan.js"></script>
+<script src="gestures/test_pinch.js"></script>
 <script src="gestures/test_swipe.js"></script>
 
 </body>