Change ComponentViewer to use nav-tabs

Author: jelbourn

src/app/app-module.ts

@@ -23,7 +23,6 @@ import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
 import {ThemePickerModule} from './shared/theme-picker/theme-picker';
 import {PlunkerButtonModule} from './shared/plunker/plunker-button';
 import {NavBarModule} from './shared/navbar/navbar';
-import {ExampleViewer} from './shared/example-viewer/example-viewer';
 import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
 import {GuideItems} from './shared/guide-items/guide-items';
 import {DocumentationItems} from './shared/documentation-items/documentation-items';

src/app/material-docs-app.ts

@@ -12,13 +12,30 @@ export class MaterialDocsApp {
   showShadow = false;
 
   constructor(router: Router) {
+    let previousRoute = router.routerState.snapshot.url;
+
     router.events.subscribe((data: NavigationStart) => {
       this.showShadow = data.url.startsWith('/components');
-      resetScrollPosition();
+
+      // We want to reset the scroll position on navigation except when navigating within
+      // the documentation for a single component.
+      if (!isNavigationWithinComponentView(previousRoute, data.url)) {
+        resetScrollPosition();
+      }
+
+      previousRoute = data.url;
     });
   }
 }
 
+function isNavigationWithinComponentView(oldUrl: string, newUrl: string) {
+  const componentViewExpression = /components\/(\w+)/;
+  return oldUrl && newUrl
+      && componentViewExpression.test(oldUrl)
+      && componentViewExpression.test(newUrl)
+      && oldUrl.match(componentViewExpression)[1] === newUrl.match(componentViewExpression)[1];
+}
+
 function resetScrollPosition() {
   if (typeof document === 'object' && document) {
     const sidenavContent = document.querySelector('.mat-sidenav-content');

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

@@ -0,0 +1,3 @@
+  <doc-viewer
+      documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.id}}.html"
+      class="docs-component-view-text-content"></doc-viewer>

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

@@ -0,0 +1,3 @@
+<example-viewer
+    *ngFor="let example of componentViewer.componentDocItem.examples"
+    [example]="example"></example-viewer>

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

@@ -0,0 +1,3 @@
+<doc-viewer
+    documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.id}}.html"
+    class="docs-component-view-text-content"></doc-viewer>

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

@@ -1,22 +1,12 @@
 <!-- TODO(jelbourn): turn this into nav tabs -->
-<md-tab-group class="docs-component-viewer-tabbed-content"
-    (selectedIndexChange)="overviewViewer.releadLiveExamples()">
-  <md-tab label="OVERVIEW">
-    <doc-viewer #overviewViewer
-        documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html"
-        class="docs-component-view-text-content">
-    </doc-viewer>
-  </md-tab>
-
-  <md-tab label="API REFERENCE">
-    <doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"
-        class="docs-component-view-text-content"></doc-viewer>
-  </md-tab>
-
-  <md-tab label="EXAMPLES">
-
-    <example-viewer *ngFor="let example of componentDocItem.examples" [example]="example">
-    </example-viewer>
-
-  </md-tab>
-</md-tab-group>
+<nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
+  <a md-tab-link class="docs-component-viewer-section-tab"
+      *ngFor="let section of ['Overview', 'API', 'Examples']"
+      [routerLink]="section.toLowerCase()"
+      routerLinkActive #rla="routerLinkActive"
+      [active]="rla.isActive">{{section}}</a>
+</nav>
+
+<div class="docs-component-viewer-content">
+  <router-outlet></router-outlet>
+</div>

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

@@ -2,26 +2,19 @@
 
 app-component-viewer {
   font-weight: 400;
+  margin: 20px 70px 50px 70px;
 }
 
-.docs-component-viewer-tabbed-content {
-  margin: 50px 70px;
-  @media (max-width: $small-breakpoint-width) {
-    margin: 16px;
-  }
+.docs-component-viewer-section-tab {
+  text-transform: uppercase;
+}
 
-  // Direct chain is necessary to avoid styling tabs in the example viewer
-  & > .mat-tab-header {
-    border: none;
-    margin-bottom: 30px;
+.docs-component-viewer-tabbed-content {
+  margin-bottom: 50px;
+}
 
-    & > .mat-tab-label-container > .mat-tab-list > .mat-tab-labels > .mat-tab-label {
-      font-weight: 400;
-      margin: 0 10px;
-      min-width: 0;
-      padding: 0 5px;
-    }
-  }
+.docs-component-viewer-content {
+  min-height: 500px;
 }
 
 .docs-example-source {

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

@@ -13,6 +13,7 @@ const docItemsId = 'button';
 const exampleKey = 'button-types';
 
 const mockActivatedRoute = {
+  snapshot: {},
   params: Observable.create(observer => {
     observer.next({id: docItemsId});
     observer.complete();

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

@@ -26,10 +26,35 @@ export class ComponentViewer {
   }
 }
 
+@Component({
+  selector: 'component-overview',
+  templateUrl: './component-overview.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class ComponentOverview {
+  constructor(public componentViewer: ComponentViewer) {}
+}
+
+@Component({
+  selector: 'component-api',
+  templateUrl: './component-api.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class ComponentApi extends ComponentOverview {}
+
+@Component({
+  selector: 'component-examples',
+  templateUrl: './component-examples.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class ComponentExamples extends ComponentOverview {}
+
+
+
 @NgModule({
   imports: [MdTabsModule, RouterModule, DocViewerModule, CommonModule],
   exports: [ComponentViewer],
-  declarations: [ComponentViewer],
+  declarations: [ComponentViewer, ComponentOverview, ComponentApi, ComponentExamples],
   providers: [DocumentationItems, ComponentPageTitle],
 })
 export class ComponentViewerModule {}

src/app/pages/page-title/page-title.ts

@@ -5,7 +5,7 @@ import {Injectable} from '@angular/core';
  */
 @Injectable()
 export class ComponentPageTitle {
-  _title: string = '';
+  _title = '';
 
   get title(): string { return this._title; }
   set title(title: string) { this._title = title; }

src/app/routes.ts

@@ -2,7 +2,12 @@ import {Homepage} from './pages/homepage';
 import {ComponentList} from './pages/component-list';
 import {GuideList} from './pages/guide-list';
 import {Routes} from '@angular/router';
-import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {
+  ComponentApi,
+  ComponentExamples,
+  ComponentOverview,
+  ComponentViewer
+} 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 {GuideViewer} from './pages/guide-viewer/guide-viewer';
@@ -24,7 +29,16 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
       {path: '', component: ComponentCategoryList},
       {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'},
       {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'},
-      {path: ':id', component: ComponentViewer},
+      {
+        path: ':id',
+        component: ComponentViewer,
+        children: [
+          {path: '', redirectTo: 'overview', pathMatch: 'full'},
+          {path: 'overview', component: ComponentOverview, pathMatch: 'full'},
+          {path: 'api', component: ComponentApi, pathMatch: 'full'},
+          {path: 'examples', component: ComponentExamples, pathMatch: 'full'},
+        ],
+      },
     ],
   },
   {path: 'guides', component: GuideList},

src/app/shared/example-viewer/example-viewer.ts

@@ -20,7 +20,7 @@ export class ExampleViewer {
   exampleData: LiveExample;
 
   /** Whether the source for the example is being displayed. */
-  showSource: boolean = false;
+  showSource = false;
 
   get example() {
     return this._example;

src/app/shared/svg-viewer/svg-viewer.ts

@@ -30,7 +30,7 @@ export class SvgViewer implements OnInit {
   private fetchAndInlineSvgContent(path: string): void {
     const svgAbsPath = getAbsolutePathFromSrc(path);
     this.http.get(svgAbsPath).subscribe(svgResponse => {
-      this.inlineSvgContent(svgResponse.text())
+      this.inlineSvgContent(svgResponse.text());
     });
   }
 }

src/app/shared/theme-picker/theme-picker.ts

@@ -45,7 +45,7 @@ export class ThemePicker {
   ];
 
   constructor(
-    public styleManager : StyleManager,
+    public styleManager: StyleManager,
     private _themeStorage: ThemeStorage
   ) {
     const currentTheme = this._themeStorage.getStoredTheme();

src/app/shared/theme-picker/theme-storage/theme-storage.ts

@@ -21,8 +21,7 @@ export class ThemeStorage {
   }
 
   public getStoredTheme(): DocsSiteTheme {
-    const theme = JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
-    return theme
+    return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
   }
 
   public clearStorage() {