some cleanup

Author: mmalerba

src/demo-app/a11y/a11y.html

@@ -1,11 +1,15 @@
-<h1>Accessibility Demo</h1>
+<ng-container *ngIf="!fullscreen">
+  <h1>
+    Accessibility Demo
+  </h1>
 
-<nav>
-  <a (click)="skipNavigation()" href="javascript:void(0)">Skip navigation</a>
-  <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]" (click)="skipNavigation()">
-    {{navItem.name}}
-  </a>
-</nav>
+  <nav>
+    <a (click)="skipNavigation()" href="javascript:void(0)">Skip navigation</a>
+    <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]" (click)="skipNavigation()">
+      {{navItem.name}}
+    </a>
+  </nav>
+</ng-container>
 
 <div #maincontent tabindex="-1">
   <h1 #header tabindex="-1" *ngIf="!!currentComponent">{{currentComponent}} Demo</h1>

src/demo-app/a11y/a11y.ts

@@ -1,5 +1,6 @@
-import {Component, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, OnDestroy, ViewChild, ViewEncapsulation} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
@@ -16,9 +17,13 @@ export class AccessibilityHome {}
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class AccessibilityDemo {
+export class AccessibilityDemo implements OnDestroy {
   currentComponent: string = '';
 
+  fullscreen = false;
+
+  private _routerSubscription = Subscription.EMPTY;
+
   @ViewChild('maincontent') mainContent: ElementRef;
   @ViewChild('header') sectionHeader: ElementRef;
 
@@ -51,16 +56,26 @@ export class AccessibilityDemo {
   ];
 
   constructor(router: Router) {
-    router.events.subscribe(event => {
-      let nav = this.navItems.find(navItem => {
-        let fragments = (event as NavigationEnd).url.split('/');
-        return fragments[fragments.length - 1] === navItem.route;
-      });
-      this.currentComponent = nav ? nav.name : '';
+    this._routerSubscription = router.events.subscribe((e) => {
+      if (e instanceof NavigationEnd) {
+        let fragments = e.url.split('/');
+        let nav = this.navItems.find(navItem => {
+          return fragments[fragments.length - 1] === navItem.route;
+        });
+        this.currentComponent = nav ? nav.name : '';
+
+        let routerState = router.routerState.root;
+        while (routerState.children.length) routerState = routerState.children[0];
+        this.fullscreen = !!routerState.snapshot.data.fullscreen;
+      }
     });
   }
 
   skipNavigation() {
     (this.currentComponent ? this.sectionHeader : this.mainContent).nativeElement.focus();
   }
+
+  ngOnDestroy() {
+    this._routerSubscription.unsubscribe();
+  }
 }

src/demo-app/a11y/routes.ts

@@ -49,9 +49,9 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'select', component: SelectAccessibilityDemo},
   {path: 'sidenav', component: SidenavAccessibilityDemo},
-  {path: 'sidenav/basic', component: SidenavBasicAccessibilityDemo},
-  {path: 'sidenav/dual', component: SidenavDualAccessibilityDemo},
-  {path: 'sidenav/mobile', component: SidenavMobileAccessibilityDemo},
+  {path: 'sidenav/basic', component: SidenavBasicAccessibilityDemo, data: {fullscreen: true}},
+  {path: 'sidenav/dual', component: SidenavDualAccessibilityDemo, data: {fullscreen: true}},
+  {path: 'sidenav/mobile', component: SidenavMobileAccessibilityDemo, data: {fullscreen: true}},
   {path: 'slide-toggle', component: SlideToggleAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
   {path: 'snack-bar', component: SnackBarAccessibilityDemo},

src/demo-app/a11y/sidenav/mobile-sidenav-a11y.html

@@ -8,6 +8,7 @@ <h1 class="a11y-demo-sidenav-app-name">Responsive Sidenav App</h1>
 
 <md-sidenav-container
     class="a11y-demo-sidenav-container"
+    [class.a11y-demo-sidenav-container-fixed]="mobileQuery.matches"
     [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
   <md-sidenav
       #snav
@@ -20,12 +21,14 @@ <h1 class="a11y-demo-sidenav-app-name">Responsive Sidenav App</h1>
       <a md-list-item routerLink="../mobile">Responsive sidenav example</a>
       <a md-list-item routerLink="../dual">Dual sidenavs example</a>
     </md-nav-list>
+    <p class="a11y-demo-sidenav-filler" *ngFor="let f of filler">Filler content</p>
   </md-sidenav>
 
   <md-sidenav-content role="region">
     <button md-raised-button aria-label="Close responsive sidenav example" color="primary"
             class="a11y-demo-sidenav-close" routerLink="..">
       Close example
     </button>
+    <p class="a11y-demo-sidenav-filler" *ngFor="let f of filler">Filler content</p>
   </md-sidenav-content>
 </md-sidenav-container>

src/demo-app/a11y/sidenav/mobile-sidenav-a11y.ts

@@ -12,6 +12,8 @@ import {ChangeDetectorRef, Component, OnDestroy, ViewEncapsulation} from '@angul
 export class SidenavMobileAccessibilityDemo implements OnDestroy {
   mobileQuery = matchMedia('(max-width: 600px)');
 
+  filler = Array(20).fill(0);
+
   _mobileQueryListener: () => void;
 
   constructor(changeDetectorRef: ChangeDetectorRef) {

src/demo-app/a11y/sidenav/shared.scss

@@ -12,10 +12,18 @@
   flex: 1;
 }
 
+.a11y-demo-sidenav-container-fixed {
+  flex: none;
+}
+
 h1.a11y-demo-sidenav-app-name {
   margin-left: 8px;
 }
 
 button.a11y-demo-sidenav-close {
   margin: 20px;
 }
+
+.a11y-demo-sidenav-filler {
+  margin: 100px 20px;
+}