From d4a3cde52ba736da64285bdfaf039129d0dd8312 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Wed, 13 Apr 2016 16:19:14 -0700
Subject: [PATCH] feat(gestures): add basic gesture demos

---
 src/core/gestures/MdGestureConfig.ts     | 26 ++++++++++++++++++++++++
 src/demo-app/demo-app.html               |  1 +
 src/demo-app/demo-app.ts                 |  5 +++--
 src/demo-app/gestures/gestures-demo.html |  9 ++++++++
 src/demo-app/gestures/gestures-demo.scss |  7 +++++++
 src/demo-app/gestures/gestures-demo.ts   | 13 ++++++++++++
 src/index.html                           |  3 +++
 src/main.ts                              |  3 +++
 8 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/core/gestures/MdGestureConfig.ts
 create mode 100644 src/demo-app/gestures/gestures-demo.html
 create mode 100644 src/demo-app/gestures/gestures-demo.scss
 create mode 100644 src/demo-app/gestures/gestures-demo.ts

diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts
new file mode 100644
index 00000000000..21a7f295fb4
--- /dev/null
+++ b/src/core/gestures/MdGestureConfig.ts
@@ -0,0 +1,26 @@
+import {Injectable} from 'angular2/core';
+import {HammerGestureConfig} from 'angular2/src/platform/browser_common';
+
+/* Adjusts configuration of our gesture library, Hammer. */
+@Injectable()
+export class MdGestureConfig extends HammerGestureConfig {
+  /* List of new event names to add to the gesture support list */
+  events: string[] = ['drag', '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}
+  };
+}
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index c7e961ce53b..76a1d72b49e 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -14,6 +14,7 @@
     <li><a [routerLink]="['ListDemo']">List demo</a></li>
     <li><a [routerLink]="['LiveAnnouncerDemo']">Live Announcer demo</a></li>
     <li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
+    <li><a [routerLink]="['GesturesDemo']">Gestures demo</a></li>
   </ul>
   <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
     {{root.dir.toUpperCase()}}
diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app.ts
index a8c7828ee19..ee665e384dc 100644
--- a/src/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app.ts
@@ -15,7 +15,7 @@ import {OverlayDemo} from './overlay/overlay-demo';
 import {ListDemo} from './list/list-demo';
 import {InputDemo} from './input/input-demo';
 import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-
+import {GesturesDemo} from './gestures/gestures-demo';
 
 @Component({
   selector: 'home',
@@ -45,6 +45,7 @@ export class Home {}
   new Route({path: '/input', name: 'InputDemo', component: InputDemo}),
   new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
   new Route({path: '/list', name: 'ListDemo', component: ListDemo}),
-  new Route({path: '/live-announcer', name: 'LiveAnnouncerDemo', component: LiveAnnouncerDemo})
+  new Route({path: '/live-announcer', name: 'LiveAnnouncerDemo', component: LiveAnnouncerDemo}),
+  new Route({path: '/gestures', name: 'GesturesDemo', component: GesturesDemo})
 ])
 export class DemoApp { }
diff --git a/src/demo-app/gestures/gestures-demo.html b/src/demo-app/gestures/gestures-demo.html
new file mode 100644
index 00000000000..ff4caabadac
--- /dev/null
+++ b/src/demo-app/gestures/gestures-demo.html
@@ -0,0 +1,9 @@
+<div class="demo-gestures">
+    <div (longpress)="pressCount = pressCount + 1" (drag)="dragCount = dragCount + 1"
+         (swipe)="swipeCount = swipeCount + 1">
+        Drag or press me.
+    </div>
+    drag: {{dragCount}}
+    swipe: {{swipeCount}}
+    longpress: {{pressCount}}
+</div>
diff --git a/src/demo-app/gestures/gestures-demo.scss b/src/demo-app/gestures/gestures-demo.scss
new file mode 100644
index 00000000000..62d259164b3
--- /dev/null
+++ b/src/demo-app/gestures/gestures-demo.scss
@@ -0,0 +1,7 @@
+.demo-gestures div {
+  height: 100px;
+  width: 200px;
+  background: gray;
+  padding: 15px;
+  color: #FFF;
+}
\ No newline at end of file
diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts
new file mode 100644
index 00000000000..87f93d82b65
--- /dev/null
+++ b/src/demo-app/gestures/gestures-demo.ts
@@ -0,0 +1,13 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'gestures-demo',
+  templateUrl: 'demo-app/gestures/gestures-demo.html',
+  styleUrls: ['demo-app/gestures/gestures-demo.css'],
+  directives: []
+})
+export class GesturesDemo {
+  dragCount: number = 0;
+  pressCount: number = 0;
+  swipeCount: number = 0;
+}
diff --git a/src/index.html b/src/index.html
index 2fdf8e56d74..2c858ba58bd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,6 +20,9 @@
   <script src="vendor/angular2/bundles/angular2.dev.js"></script>
   <script src="vendor/angular2/bundles/http.dev.js"></script>
   <script src="vendor/angular2/bundles/router.dev.js"></script>
+
+  <!-- TODO: Replace with updated Hammer version in Google CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js"></script>
   <script>
     System.config({
       packages: {
diff --git a/src/main.ts b/src/main.ts
index f436a9cb7a5..c0ace470e4d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,13 +1,16 @@
 import {bootstrap} from 'angular2/platform/browser';
+import {HAMMER_GESTURE_CONFIG} from 'angular2/src/platform/browser_common';
 import {DemoApp} from './demo-app/demo-app';
 import {ROUTER_PROVIDERS} from 'angular2/router';
 import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay';
 import {MdLiveAnnouncer} from './core/live-announcer/live-announcer';
 import {provide} from 'angular2/core';
 import {createOverlayContainer} from './core/overlay/overlay-container';
+import {MdGestureConfig} from './core/gestures/MdGestureConfig';
 
 bootstrap(DemoApp, [
   ROUTER_PROVIDERS,
   MdLiveAnnouncer,
   provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
+  provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig})
 ]);