Add keyboard tracking demo to overlay

Author: willshowell

src/demo-app/demo-app/demo-module.ts

@@ -19,7 +19,12 @@ import {ListDemo} from '../list/list-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
 import {GridListDemo} from '../grid-list/grid-list-demo';
 import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
-import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo';
+import {
+  OverlayDemo,
+  RotiniPanel,
+  SpagettiPanel,
+  KeyboardTrackingPanel
+} from '../overlay/overlay-demo';
 import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {ButtonDemo} from '../button/button-demo';
@@ -72,6 +77,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     IconDemo,
     InputDemo,
     JazzDialog,
+    KeyboardTrackingPanel,
     ContentElementDialog,
     IFrameDialog,
     ListDemo,
@@ -117,6 +123,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     RotiniPanel,
     ScienceJoke,
     SpagettiPanel,
+    KeyboardTrackingPanel,
   ],
 })
 export class DemoModule {}

src/demo-app/overlay/overlay-demo.html

@@ -36,3 +36,5 @@
 </ng-template>
 
 <button (click)="openPanelWithBackdrop()">Backdrop panel</button>
+
+<button (click)="openKeyboardTracking()">Keyboard tracking</button>

src/demo-app/overlay/overlay-demo.scss

@@ -27,3 +27,11 @@
   background-color: orangered;
   opacity: 0.5;
 }
+
+.demo-keyboard {
+  margin: 0;
+  padding: 10px;
+  border: 1px solid black;
+  background-color: mediumturquoise;
+  opacity: 0.7;
+}

src/demo-app/overlay/overlay-demo.ts

@@ -17,6 +17,8 @@ import {
     Portal,
     TemplatePortalDirective,
 } from '@angular/material';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/do';
 
 
 @Component({
@@ -110,6 +112,26 @@ export class OverlayDemo {
     overlayRef.backdropClick().subscribe(() => overlayRef.detach());
   }
 
+  openKeyboardTracking() {
+    let config = new OverlayState();
+
+    config.positionStrategy = this.overlay.position()
+      .global()
+      .centerHorizontally()
+      .top(`${this.nextPosition}px`);
+
+    this.nextPosition += 30;
+
+    let overlayRef = this.overlay.create(config);
+    const componentRef = overlayRef
+        .attach(new ComponentPortal(KeyboardTrackingPanel, this.viewContainerRef));
+    overlayRef.keyboardEvents()
+      .filter(e => e.type === 'keydown')
+      .do(e => componentRef.instance.lastKeydown = e.key)
+      .filter(e => e.key === 'Escape')
+      .subscribe(() => overlayRef.detach());
+  }
+
 }
 
 /** Simple component to load into an overlay */
@@ -130,3 +152,12 @@ export class RotiniPanel {
 export class SpagettiPanel {
   value: string = 'Omega';
 }
+
+/** Simple component to load into an overlay */
+@Component({
+  selector: 'keyboard-panel',
+  template: '<div class="demo-keyboard">Last Keydown: {{ lastKeydown }}</div>'
+})
+export class KeyboardTrackingPanel {
+  lastKeydown = '';
+}