From 694239fca0b7496eee96a59b3c4ba128d960ecd9 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Fri, 22 Jul 2016 09:28:42 -0700
Subject: [PATCH] fix(gestures): ensure drag and pan are recognized with slide

---
 src/core/gestures/MdGestureConfig.ts     | 40 +++++++++++-------------
 src/demo-app/gestures/gestures-demo.html |  3 +-
 src/demo-app/gestures/gestures-demo.ts   |  1 +
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts
index 85d35437485a..e80493152d37 100644
--- a/src/core/gestures/MdGestureConfig.ts
+++ b/src/core/gestures/MdGestureConfig.ts
@@ -33,34 +33,32 @@ 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)
+    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;
   }
 
 }
diff --git a/src/demo-app/gestures/gestures-demo.html b/src/demo-app/gestures/gestures-demo.html
index d13beb1914c4..9f2467659efb 100644
--- a/src/demo-app/gestures/gestures-demo.html
+++ b/src/demo-app/gestures/gestures-demo.html
@@ -1,7 +1,7 @@
 <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>
@@ -9,4 +9,5 @@
     <p>Longpress: {{longpressCount}}</p>
     <p>Press: {{pressCount}}</p>
     <p>Swipe: {{swipeCount}}</p>
+    <p>Slide: {{slideCount}}</p>
 </div>
diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts
index 08284dab1c95..51a38345e6c9 100644
--- a/src/demo-app/gestures/gestures-demo.ts
+++ b/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;
 }