feat(): add interaction service for a11y

Closes #289.

Author: devversion

src/core/interaction/interaction.spec.ts

@@ -0,0 +1,45 @@
+import {
+  it,
+  describe,
+  expect,
+  beforeEach,
+  inject,
+  beforeEachProviders,
+} from 'angular2/testing';
+import {MdInteraction, MdInteractionType} from './interaction';
+
+export function main() {
+  describe('MdInteraction', () => {
+    let interaction: MdInteraction;
+
+    beforeEachProviders(() => [MdInteraction]);
+
+    beforeEach(inject([MdInteraction], (_interaction: MdInteraction) => {
+      interaction = _interaction;
+    }));
+
+    it('should correctly detect the keyboard interaction', () => {
+
+      let event = <KeyboardEvent> document.createEvent('Event');
+
+      event.keyCode = 37;
+      event.initEvent('keydown', false, true);
+
+      document.body.dispatchEvent(event);
+
+      expect(interaction.getLastInteractionType()).toBe(MdInteractionType.KEYBOARD);
+    });
+
+    it('should correctly detect the mouse interaction', () => {
+
+      let event = document.createEvent('MouseEvent');
+
+      event.initMouseEvent('mousedown', true, true, window, null, 0, 0, 0, 0,
+                                        false, false, false, false, 0, null);
+      document.body.dispatchEvent(event);
+
+      expect(interaction.getLastInteractionType()).toBe(MdInteractionType.MOUSE);
+    });
+
+  });
+}

src/core/interaction/interaction.ts

@@ -0,0 +1,92 @@
+import {Injectable} from 'angular2/core';
+
+export enum MdInteractionType {
+  KEYBOARD,
+  MOUSE,
+  TOUCH,
+}
+
+// Interface for the interaction mappings, which holds an index definition
+// to avoid implicitly warnings.
+interface MdInteractionMap {
+  [index: string]: any;
+}
+
+@Injectable()
+export class MdInteraction {
+
+  private _isBuffering: boolean = false;
+  private _bufferTimeout: number;
+  private _lastInteractionType: MdInteractionType;
+
+  private _inputTypeMap: MdInteractionMap = {
+    'keydown': MdInteractionType.KEYBOARD,
+    'mousedown': MdInteractionType.MOUSE,
+    'mouseenter': MdInteractionType.MOUSE,
+    'touchstart': MdInteractionType.TOUCH,
+    'pointerdown': 'pointer',
+    'MSPointerDown': 'pointer',
+};
+
+  // IE dispatches `pointerdown` events, which need to be validated separately.
+  // Index numbers referenced here: https://msdn.microsoft.com/library/windows/apps/hh466130.aspx
+  private _iePointerMap: MdInteractionMap = {
+    2: MdInteractionType.TOUCH,
+    3: MdInteractionType.TOUCH,
+    4: MdInteractionType.MOUSE
+  };
+
+  constructor() {
+    let mouseEvent = 'PointerEvent' in window ? 'pointerdown' : 'mousedown';
+
+    document.body.addEventListener('keydown', (e: Event) => this._onInputEvent(e));
+    document.body.addEventListener(mouseEvent, (e: Event) => this._onInputEvent(e));
+    document.body.addEventListener('mouseenter', (e: Event) => this._onInputEvent(e));
+
+    if ('ontouchstart' in document.documentElement) {
+      document.body.addEventListener('touchstart', (e: TouchEvent) => this._onTouchInputEvent(e));
+    }
+  }
+
+  private _onInputEvent(event: Event) {
+    if (this._isBuffering) {
+      return;
+    }
+
+    let type = this._inputTypeMap[event.type];
+
+    if (type === 'pointer') {
+      let pointerType = (<any> event)['pointerType'];
+      type = (typeof pointerType === 'number') ? this._iePointerMap[pointerType]
+        : this._parsePointerType(pointerType);
+    }
+
+    if (type !== undefined) {
+      this._lastInteractionType = type;
+    }
+  }
+
+  private _onTouchInputEvent(event: TouchEvent) {
+    clearTimeout(this._bufferTimeout);
+
+    this._onInputEvent(event);
+    this._isBuffering = true;
+
+    // The timeout of 650ms is needed to delay the touchstart, because otherwise the touch will call
+    // the `onInput` function multiple times.
+    this._bufferTimeout = setTimeout(() => this._isBuffering = false, 650);
+  }
+
+  private _parsePointerType(pointerType: string) {
+    switch (pointerType) {
+      case 'mouse':
+        return MdInteractionType.MOUSE;
+      case 'touch':
+        return MdInteractionType.TOUCH;
+    }
+  }
+
+  getLastInteractionType(): MdInteractionType {
+    return this._lastInteractionType;
+  }
+}

src/demo-app/demo-app.html

@@ -15,6 +15,7 @@ <h1>Angular Material2 Demos</h1>
     <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>
+    <li><a [routerLink]="['InteractionDemo']">Interaction 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

@@ -16,6 +16,7 @@ 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';
+import {InteractionDemo} from './interaction/interaction-demo';
 
 @Component({
   selector: 'home',
@@ -46,6 +47,7 @@ export class Home {}
   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: '/gestures', name: 'GesturesDemo', component: GesturesDemo})
+  new Route({path: '/gestures', name: 'GesturesDemo', component: GesturesDemo}),
+  new Route({path: '/interaction', name: 'InteractionDemo', component: InteractionDemo}),
 ])
 export class DemoApp { }

src/demo-app/interaction/interaction-demo.html

@@ -0,0 +1,11 @@
+<div class="demo-interaction">
+  <p>
+    The MdInteraction service is able to recognize the last interaction type.<br/>
+    This is very helpful when providing special accessibility features for different interactions.
+  </p>
+
+  <button md-raised-button (click)="alertLastInteraction()">
+    Show me the last interaction
+  </button>
+
+</div>

src/demo-app/interaction/interaction-demo.scss

@@ -0,0 +1,3 @@
+.demo-interaction {
+  padding: 8px;
+}

src/demo-app/interaction/interaction-demo.ts

@@ -0,0 +1,31 @@
+import {Component} from 'angular2/core';
+import {MdInteraction, MdInteractionType} from '../../core/interaction/interaction';
+import {MdButton} from '../../components/button/button';
+
+@Component({
+  selector: 'interaction-demo',
+  templateUrl: 'demo-app/interaction/interaction-demo.html',
+  styleUrls: ['demo-app/interaction/interaction-demo.css'],
+  directives: [MdButton]
+})
+export class InteractionDemo {
+
+  constructor(private interaction: MdInteraction) {};
+
+  alertLastInteraction() {
+    let lastInteraction = this.interaction.getLastInteractionType();
+
+    switch (lastInteraction) {
+      case MdInteractionType.KEYBOARD:
+        alert('Keyboards are sometimes very loud - Try switching to a mouse.');
+        break;
+      case MdInteractionType.MOUSE:
+        alert('Using a mouse is cool! What sensitivity are you using?');
+        break;
+      case MdInteractionType.TOUCH:
+        alert('Material also runs well on touch devices.');
+        break;
+    }
+  }
+
+}

src/main.ts

@@ -7,10 +7,12 @@ 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';
+import {MdInteraction} from './core/interaction/interaction';
 
 bootstrap(DemoApp, [
   ROUTER_PROVIDERS,
   MdLiveAnnouncer,
+  MdInteraction,
   provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
   provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig})
 ]);