Add CDK section to material.angular.io. (#244)

Author: josephperrott

package-lock.json

@@ -29,6 +29,9 @@ import {DocumentationItems} from './shared/documentation-items/documentation-ite
 import {GuideListModule} from './pages/guide-list/guide-list';
 import {GuideViewerModule} from './pages/guide-viewer/guide-viewer';
 import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
+import {
+  CanActivateComponentSidenav
+} from './pages/component-sidenav/component-sidenav-can-load-guard';
 
 @NgModule({
   imports: [
@@ -62,6 +65,7 @@ import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
     GuideItems,
     StyleManager,
     ThemeStorage,
+    CanActivateComponentSidenav,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
     {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
   ],

src/app/app-module.ts

@@ -1,7 +1,7 @@
 <div class="docs-component-category-list">
-  <a *ngFor="let category of docItems.getItemsInCategories()"
-    class="docs-component-category-list-item"
-    [routerLink]="['/categories/', category.id]">
+  <a *ngFor="let category of docItems.getCategories((params | async)?.section)"
+     class="docs-component-category-list-item"
+    [routerLink]="['../', category.id]">
     <mat-card class="docs-component-category-list-card">
       <mat-card-title>{{category.name}}</mat-card-title>
     </mat-card>

src/app/pages/component-category-list/component-category-list.html

@@ -1,4 +1,6 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {Observable} from 'rxjs/Observable'
 import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 
@@ -16,18 +18,21 @@ describe('ComponentCategoryList', () => {
     fixture = TestBed.createComponent(ComponentCategoryList);
   });
 
-  it('should set page title on init', () => {
+  it('should set set up base param observable on init', () => {
     const component = fixture.componentInstance;
     spyOn(component, 'ngOnInit').and.callThrough();
     fixture.detectChanges();
     expect(component.ngOnInit).toHaveBeenCalled();
-    expect(component._componentPageTitle.title).toEqual('Component Categories');
+    expect(component.params).toBeDefined();
   });
 
   it('should render a card for every category', () => {
-    const component = fixture.componentInstance;
     fixture.detectChanges();
-    const categories = component.docItems.getItemsInCategories();
+    // Params is replaced after ngOnit runs since params is set on init.
+    fixture.componentInstance.params = Observable.of({'section': 'components'});
+    fixture.detectChanges();
+    const component = fixture.componentInstance;
+    const categories = component.docItems.getCategories('components');
     const cards = fixture
       .nativeElement.querySelectorAll('.docs-component-category-list-card');
     expect(cards.length).toEqual(categories.length);

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -1,23 +1,31 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, OnInit} from '@angular/core';
 import {MatCardModule} from '@angular/material';
 import {CommonModule} from '@angular/common';
-import {RouterModule} from '@angular/router';
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ActivatedRoute, Params, RouterModule} from '@angular/router';
+import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/observable/combineLatest';
 
 
 @Component({
   selector: 'app-component-category-list',
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss']
 })
-export class ComponentCategoryList {
+export class ComponentCategoryList implements OnInit {
+  params: Observable<Params>;
+
   constructor(public docItems: DocumentationItems,
-              public _componentPageTitle: ComponentPageTitle) {}
+              public _componentPageTitle: ComponentPageTitle,
+              private _route: ActivatedRoute) {}
 
   ngOnInit() {
-    this._componentPageTitle.title = 'Component Categories';
+    // Combine params from all of the path into a single object.
+    this.params = Observable.combineLatest(
+      this._route.pathFromRoot.map(route => route.params),
+      Object.assign);
   }
 }
 

src/app/pages/component-category-list/component-category-list.ts

@@ -1,7 +1,7 @@
 <div class="docs-component-list-category">
   <a *ngFor="let component of category.items"
     class="docs-component-list-item"
-    [routerLink]="['/components/', component.id]">
+    [routerLink]="'/' + section + '/' + component.id">
     <mat-card class="docs-component-list-card">
       <mat-card-title class="docs-component-list-card-title">{{component.name}}</mat-card-title>
       <div class="docs-component-list-icon-spacer"></div>

src/app/pages/component-list/component-list.html

@@ -6,8 +6,13 @@ import {DocsAppTestingModule} from '../../testing/testing-module';
 
 const CATEGORY_ID = 'forms';
 const mockActivatedRoute = {
-  params: Observable.create(observer => {
-    observer.next({id: CATEGORY_ID});
+  pathFromRoot: Observable.create(observer => {
+    observer.next({
+      params: {
+        section: 'components',
+        id: CATEGORY_ID,
+      }
+    });
     observer.complete();
   })
 };

src/app/pages/component-list/component-list.spec.ts

@@ -8,6 +8,8 @@ import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {CommonModule} from '@angular/common';
 import {MatCardModule} from '@angular/material';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/observable/combineLatest';
 
 @Component({
   selector: 'app-components',
@@ -16,20 +18,24 @@ import {MatCardModule} from '@angular/material';
 })
 export class ComponentList {
   category: DocCategory;
+  section: string;
 
   constructor(public docItems: DocumentationItems,
               private _componentPageTitle: ComponentPageTitle,
               private _route: ActivatedRoute,
-              private router: Router) {
-    _route.params.subscribe(p => {
-      this.category = docItems.getCategoryById(p['id']);
+              public router: Router) {
+    Observable
+      .combineLatest(_route.pathFromRoot.map(route => route.params), Object.assign)
+      .subscribe(p => {
+        this.category = docItems.getCategoryById(p['id']);
+        this.section = p['section'];
 
-      if (this.category) {
-        this._componentPageTitle.title = this.category.name;
-      } else {
-        this.router.navigate(['/categories']);
-      }
-    });
+        if (this.category) {
+          this._componentPageTitle.title = this.category.name;
+        } else {
+          this.router.navigate(['../'], {relativeTo: this._route});
+        }
+      });
   }
 }
 

src/app/pages/component-list/component-list.ts

@@ -0,0 +1,23 @@
+import {Injectable} from '@angular/core';
+import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
+import {SECTIONS} from '../../shared/documentation-items/documentation-items';
+
+/**
+ * Guard to determine if the sidenav can load, based on if the section exists in documentation
+ * items.
+ */
+@Injectable()
+export class CanActivateComponentSidenav implements CanActivate {
+  constructor(private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    // Searches if the section defined the base UrlSegment is a valid section from the documentation
+    // items.  If found, returns true to allow activation, otherwise blocks activation and navigates
+    // to '/'.
+    const sectionFound = Object.keys(SECTIONS).find(
+      (val => val.toLowerCase() === route.url[0].path.toLowerCase()));
+    if (sectionFound) { return true; }
+    this.router.navigateByUrl('/');
+    return false;
+  }
+}

src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -2,11 +2,11 @@
   <mat-sidenav #sidenav class="docs-component-viewer-sidenav"
               [opened]="!isScreenSmall()"
               [mode]="isScreenSmall() ? 'over' : 'side'">
-    <nav *ngFor="let category of docItems.getItemsInCategories()">
+    <nav *ngFor="let category of docItems.getCategories((params | async)?.section)">
       <h3>{{category.name}}</h3>
       <ul>
         <li *ngFor="let component of category.items">
-          <a [routerLink]="['/components/', component.id]"
+          <a [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
              routerLinkActive="docs-component-viewer-sidenav-item-selected">
             {{component.name}}
           </a>

src/app/pages/component-sidenav/component-sidenav.html

@@ -37,7 +37,7 @@ describe('ComponentSidenav', () => {
 
     fixture.detectChanges();
 
-    const totalItems = component.docItems.getAllItems().length;
+    const totalItems = component.docItems.getItems('categories').length;
     const totalLinks = fixture
       .nativeElement
       .querySelectorAll('.docs-component-viewer-sidenav li a')

src/app/pages/component-sidenav/component-sidenav.spec.ts

@@ -2,10 +2,11 @@ import {Component, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule} from
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatSidenav, MatSidenavModule} from '@angular/material';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {Router, RouterModule} from '@angular/router';
+import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
+import {Observable} from 'rxjs/Observable';
 
 const SMALL_WIDTH_BREAKPOINT = 840;
 
@@ -18,7 +19,10 @@ const SMALL_WIDTH_BREAKPOINT = 840;
 export class ComponentSidenav implements OnInit {
   private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
 
+  params: Observable<Params>;
+
   constructor(public docItems: DocumentationItems,
+              private _route: ActivatedRoute,
               private _router: Router,
               zone: NgZone) {
     // TODO(josephperrott): Move to CDK breakpoint management once available.
@@ -33,6 +37,10 @@ export class ComponentSidenav implements OnInit {
         this.sidenav.close();
       }
     });
+    // Combine params from all of the path into a single object.
+    this.params = Observable.combineLatest(
+      this._route.pathFromRoot.map(route => route.params),
+      Object.assign);
   }
 
   isScreenSmall(): boolean {

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,7 +1,7 @@
 <div class="docs-component-viewer">
   <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content">
     <a mat-tab-link class="docs-component-viewer-section-tab"
-        *ngFor="let section of ['Overview', 'API', 'Examples']"
+        *ngFor="let section of sections"
         [routerLink]="section.toLowerCase()"
         routerLinkActive #rla="routerLinkActive"
         [active]="rla.isActive">{{section}}</a>

src/app/pages/component-viewer/component-viewer.html

@@ -16,6 +16,8 @@ import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-con
 export class ComponentViewer {
   componentDocItem: DocItem;
 
+  sections: Set<string> = new Set(['overview', 'api']);
+
   constructor(private _route: ActivatedRoute,
               private router: Router,
               public _componentPageTitle: ComponentPageTitle,
@@ -25,6 +27,10 @@ export class ComponentViewer {
 
       if (this.componentDocItem) {
         this._componentPageTitle.title = `${this.componentDocItem.name}`;
+        this.componentDocItem.examples.length ?
+          this.sections.add('examples') :
+          this.sections.delete('examples');
+
       } else {
         this.router.navigate(['/components']);
       }

src/app/pages/component-viewer/component-viewer.ts

@@ -10,25 +10,31 @@ import {
 } from './pages/component-viewer/component-viewer';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
+import {
+  CanActivateComponentSidenav
+} from './pages/component-sidenav/component-sidenav-can-load-guard';
 import {GuideViewer} from './pages/guide-viewer/guide-viewer';
 
 export const MATERIAL_DOCS_ROUTES: Routes = [
-  {path: '', component: Homepage, pathMatch: 'full'},
-  {
-    path: 'categories',
-    component: ComponentSidenav,
-    children: [
-      {path: '', component: ComponentCategoryList},
-      {path: ':id', component: ComponentList},
-    ],
-  },
+  {path: '', component: Homepage, pathMatch: 'full', data: {}},
+  {path: 'categories', redirectTo: '/components/categories'},
+  {path: 'guides', component: GuideList, data: {}},
+  {path: 'guide/:id', component: GuideViewer, data: {}},
   {
-    path: 'components',
+    path: ':section',
+    canActivate: [CanActivateComponentSidenav],
     component: ComponentSidenav,
     children: [
-      {path: '', component: ComponentCategoryList},
+      {path: '', redirectTo: 'categories', pathMatch: 'full'},
       {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'},
       {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'},
+      {
+        path: 'categories',
+        children: [
+          {path: '', component: ComponentCategoryList},
+          {path: ':id', component: ComponentList},
+        ],
+      },
       {
         path: ':id',
         component: ComponentViewer,
@@ -42,7 +48,5 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
       },
     ],
   },
-  {path: 'guides', component: GuideList},
-  {path: 'guide/:id', component: GuideViewer},
   {path: '**', redirectTo: ''},
 ];

src/app/routes.ts

@@ -1,6 +1,7 @@
 import {TestBed, inject, async} from '@angular/core/testing';
 import {DocumentationItems} from './documentation-items';
 
+const COMPONENTS = 'components';
 
 describe('DocViewer', () => {
   let docsItems: DocumentationItems;
@@ -16,9 +17,9 @@ describe('DocViewer', () => {
   }));
 
   it('get a list of categories', () => {
-    expect(docsItems.getItemsInCategories()).toBeDefined();
-    expect(docsItems.getItemsInCategories().length).toBeGreaterThan(0);
-    for (const category of docsItems.getItemsInCategories()) {
+    expect(docsItems.getCategories(COMPONENTS)).toBeDefined();
+    expect(docsItems.getCategories(COMPONENTS).length).toBeGreaterThan(0);
+    for (const category of docsItems.getCategories(COMPONENTS)) {
       expect(category.id).toBeDefined();
       expect(category.name).toBeDefined();
       expect(category.items).toBeDefined();
@@ -27,9 +28,9 @@ describe('DocViewer', () => {
   });
 
   it('should get a list of all doc items', () => {
-    expect(docsItems.getAllItems()).toBeDefined();
-    expect(docsItems.getAllItems().length).toBeGreaterThan(0);
-    for (const item of docsItems.getAllItems()) {
+    expect(docsItems.getItems(COMPONENTS)).toBeDefined();
+    expect(docsItems.getItems(COMPONENTS).length).toBeGreaterThan(0);
+    for (const item of docsItems.getItems(COMPONENTS)) {
       expect(item.id).toBeDefined();
       expect(item.name).toBeDefined();
     }