fix(gestures): ensure default gestures are not overwritten by custom gestures

Author: kara

src/core/gestures/MdGestureConfig.ts

@@ -5,22 +5,46 @@ import {HammerGestureConfig} from '@angular/platform-browser';
 @Injectable()
 export class MdGestureConfig extends HammerGestureConfig {
   /* List of new event names to add to the gesture support list */
-  events: string[] = ['drag', 'longpress'];
+  events: string[] = [
+    'drag',
+    'dragstart',
+    'dragend',
+    'dragright',
+    'dragleft',
+    'longpress',
+  ];
 
   /*
-  * Overrides default recognizer event names and thresholds.
-  *
-  * Our gesture names come from the Material Design gestures spec:
-  * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
-  *
-  * More information on default recognizers can be found in Hammer docs:
-  * http://hammerjs.github.io/recognizer-pan/
-  * http://hammerjs.github.io/recognizer-press/
-  *
-  * TODO: Confirm threshold numbers with Material Design UX Team
-  * */
-  overrides: {[key: string]: Object} = {
-    'pan': {event: 'drag', threshold: 6},
-    'press': {event: 'longpress', time: 500}
-  };
+   * Builds Hammer instance manually to add custom recognizers that match the Material Design spec.
+   *
+   * Our gesture names come from the Material Design gestures spec:
+   * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
+   *
+   * More information on default recognizers can be found in Hammer docs:
+   * http://hammerjs.github.io/recognizer-pan/
+   * http://hammerjs.github.io/recognizer-press/
+   *
+   * TODO: Confirm threshold numbers with Material Design UX Team
+   * */
+  buildHammer(element: HTMLElement) {
+    var mc = new Hammer(element);
+
+    // create custom gesture recognizers
+    var drag = new Hammer.Pan({event: 'drag', threshold: 6});
+    var longpress = new Hammer.Press({event: 'longpress', time: 500});
+
+    // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe)
+    var pan = new Hammer.Pan();
+    var press = new Hammer.Press();
+    var swipe = new Hammer.Swipe();
+    drag.recognizeWith(pan);
+    drag.recognizeWith(swipe);
+    pan.recognizeWith(swipe);
+    longpress.recognizeWith(press);
+
+    // add customized gestures to Hammer manager
+    mc.add([drag, pan, swipe, press, longpress]);
+    return mc;
+  }
+
 }

src/demo-app/gestures/gestures-demo.html

@@ -1,9 +1,12 @@
 <div class="demo-gestures">
-    <div (longpress)="pressCount = pressCount + 1" (drag)="dragCount = dragCount + 1"
+    <div (drag)="dragCount = dragCount + 1" (pan)="panCount = panCount + 1"
+         (longpress)="longpressCount = longpressCount + 1" (press)="pressCount = pressCount + 1"
          (swipe)="swipeCount = swipeCount + 1">
-        Drag or press me.
+        Drag, swipe, or press me.
     </div>
-    drag: {{dragCount}}
-    swipe: {{swipeCount}}
-    longpress: {{pressCount}}
+    <p>Drag: {{dragCount}}</p>
+    <p>Pan: {{panCount}}</p>
+    <p>Longpress: {{longpressCount}}</p>
+    <p>Press: {{pressCount}}</p>
+    <p>Swipe: {{swipeCount}}</p>
 </div>

src/demo-app/gestures/gestures-demo.ts

@@ -8,6 +8,8 @@ import {Component} from '@angular/core';
 })
 export class GesturesDemo {
   dragCount: number = 0;
+  panCount: number = 0;
   pressCount: number = 0;
+  longpressCount: number = 0;
   swipeCount: number = 0;
 }

typings.json

@@ -6,6 +6,7 @@
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee"
   },
   "ambientDependencies": {
-    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
+    "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#de8e80dfe5360fef44d00c41257d5ef37add000a"
   }
 }