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; }