feat(gestures): add basic gesture demos

Author: kara

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}
+  };
+}

src/demo-app/demo-app.html

@@ -14,6 +14,7 @@ <h1>Angular Material2 Demos</h1>
     <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()}}

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 { }

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>

src/demo-app/gestures/gestures-demo.scss

@@ -0,0 +1,7 @@
+.demo-gestures div {
+  height: 100px;
+  width: 200px;
+  background: gray;
+  padding: 15px;
+  color: #FFF;
+}

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;
+}

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: {

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})
 ]);