fix(gestures): ensure drag and pan are recognized with slide (#901)

Author: kara

src/core/gestures/MdGestureConfig.ts

@@ -33,34 +33,34 @@ export class MdGestureConfig extends HammerGestureConfig {
    * TODO: Confirm threshold numbers with Material Design UX Team
    * */
   buildHammer(element: HTMLElement) {
-    var mc = new Hammer(element);
+    const mc = new Hammer(element);
 
-    // Create custom gesture recognizers
-    let drag = this._createRecognizer(Hammer.Pan, {event: 'drag', threshold: 6}, Hammer.Swipe);
-    let slide = this._createRecognizer(Hammer.Pan, {event: 'slide', threshold: 0}, Hammer.Swipe);
-    let longpress = this._createRecognizer(Hammer.Press, {event: 'longpress', time: 500});
+    // create custom gesture recognizers
+    const drag = new Hammer.Pan({event: 'drag', threshold: 6});
+    const longpress = new Hammer.Press({event: 'longpress', time: 500});
+    const slide = new Hammer.Pan({event: 'slide', threshold: 0});
 
-    let pan = new Hammer.Pan();
-    let swipe = new Hammer.Swipe();
+    // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe)
+    // custom recognizers can overwrite default recognizers if they aren't configured to
+    // "recognizeWith" others that listen to the same base events.
+    const pan = new Hammer.Pan();
+    const press = new Hammer.Press();
+    const swipe = new Hammer.Swipe();
 
-    // Overwrite the default `pan` event to use the swipe event.
-    pan.recognizeWith(swipe);
-
-    // Add customized gestures to Hammer manager
-    mc.add([drag, slide, pan, longpress]);
+    drag.recognizeWith(pan);
+    drag.recognizeWith(swipe);
+    drag.recognizeWith(slide);
 
-    return mc;
-  }
+    pan.recognizeWith(swipe);
+    pan.recognizeWith(slide);
 
-  /** Creates a new recognizer, without affecting the default recognizers of HammerJS */
-  private _createRecognizer(type: RecognizerStatic, options: any, ...extra: RecognizerStatic[]) {
-    let recognizer = new type(options);
+    slide.recognizeWith(swipe);
 
-    // Add the default recognizer to the new custom recognizer.
-    extra.push(type);
-    extra.forEach(entry => recognizer.recognizeWith(new entry()));
+    longpress.recognizeWith(press);
 
-    return recognizer;
+    // add customized gestures to Hammer manager
+    mc.add([drag, pan, swipe, press, longpress, slide]);
+    return mc;
   }
 
 }

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

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

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

@@ -13,4 +13,5 @@ export class GesturesDemo {
   pressCount: number = 0;
   longpressCount: number = 0;
   swipeCount: number = 0;
+  slideCount: number = 0;
 }