WIP feat(docs): new aside menu

demo/src/app/app.component.ts

@@ -13,7 +13,7 @@ import {
   PageScrollService
 } from 'ng2-page-scroll';
 import { DOCUMENT } from '@angular/common';
-import { Analytics } from './api-docs/analytics/analytics';
+import { Analytics } from './shared/api-docs/analytics/analytics';
 
 PageScrollConfig.defaultDuration = 11;
 PageScrollConfig.defaultScrollOffset = 70;

demo/src/app/app.module.ts

@@ -6,13 +6,11 @@ import { RouterModule } from '@angular/router';
 import { Ng2PageScrollModule } from 'ng2-page-scroll/ng2-page-scroll';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ngdoc } from '../ng-api-doc';
-import { NgApiDoc } from './api-docs/api-docs.model';
+import { NgApiDoc } from './shared/api-docs/api-docs.model';
 
-import { NgApiDocModule } from './api-docs/index';
 import { AppComponent } from './app.component';
 import { routes } from './app.routing';
 import { LandingComponent } from './common/landing/landing.component';
-import { DocumentationComponent } from './common/documentation/documentation.component';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { GettingStartedComponent } from './common/getting-started/getting-started.component';
 import { ThemeStorage } from './theme/theme-storage';
@@ -24,12 +22,10 @@ import { SharedModule } from './shared/shared.module';
     AppComponent,
     GettingStartedComponent,
     TopMenuComponent,
-    LandingComponent,
-    DocumentationComponent
+    LandingComponent
   ],
   imports: [
     SharedModule,
-    NgApiDocModule,
     BrowserModule,
     FormsModule,
     HttpModule,

demo/src/app/common/add-nav/add-nav.component.html

@@ -0,0 +1,9 @@
+<ul *ngIf="componentContent" (click)="goToSection($event)">
+  <li *ngFor="let item of componentContent">
+    <a routerLink="." fragment="{{ item.anchor }}">{{ item.name }}</a>
+    <ul *ngIf="item.content && item.content.length">
+      <li *ngFor="let subItem of item.content">
+        <a routerLink="." fragment="{{ subItem.anchor }}">{{ subItem.title }}</a>
+    </ul>
+  </li>
+</ul>

demo/src/app/common/add-nav/add-nav.component.ts

@@ -1,13 +1,26 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { routes } from '../../app.routing';
-import { StyleManager } from '../../theme/style-manager';
-import { ThemeStorage } from '../../theme/theme-storage';
+import { Component, Inject, Input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+import { ContentSection } from '../../shared/models/content-section.model';
 
 @Component({
   selector: 'add-nav',
   templateUrl: './add-nav.component.html'
 })
 export class AddNavComponent {
-  constructor() {}
+  @Input() componentContent: ContentSection[];
+
+  constructor(@Inject(DOCUMENT) private document: Document) { }
+
+  goToSection(event): void {
+    const item: HTMLElement = event.target;
+
+    if (item.hasAttribute('ng-reflect-fragment')) {
+      const anchor: string = item.getAttribute('ng-reflect-fragment');
+      const target: HTMLElement = this.document.getElementById(anchor);
+      const header: HTMLElement = this.document.getElementById('header');
+      const headerIndent: number = header.offsetHeight + 6;
+      this.document.body.scrollTop = target.offsetTop - headerIndent;
+    }
+  }
 }

demo/src/app/components/+accordion/accordion-section.component.ts

@@ -1,19 +1,41 @@
 // todo: add more samples https://jqueryui.com/accordion/#default
 // todo: add more samples http://getbootstrap.com/components/#panels-alternatives
 
-import { Component } from '@angular/core';
-import { DEMOS } from './demos';
+import {
+  ChangeDetectionStrategy, Component, Injector,
+  ReflectiveInjector
+} from '@angular/core';
+import { demoComponentContent } from './accordion-section.list';
+import { ContentSection } from '../../shared/models/content-section.model';
 
 // webpack html imports
-let titleDoc = require('html-loader!markdown-loader!./docs/usage.md');
-
 @Component({
   selector: 'accordion-section',
-  templateUrl: './accordion-section.components.html'
+  templateUrl: './accordion-section.components.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AccordionSectionComponent {
   name = 'Accordion';
   src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/accordion';
-  titleDoc: string = titleDoc;
-  demos: any = DEMOS;
+  componentContent: ContentSection[] = demoComponentContent;
+  content: any;
+
+  _injectors = new Map<ContentSection, ReflectiveInjector>();
+
+  constructor(private injector: Injector) { }
+
+  sectionInjections(content: ContentSection) {
+    if (this._injectors.has(content)) {
+      return this._injectors.get(content);
+    }
+
+    const _injector = ReflectiveInjector.resolveAndCreate([{
+      provide: ContentSection,
+      useValue: content
+    }], this.injector);
+
+    this._injectors.set(content, _injector);
+
+    return _injector;
+  }
 }

demo/src/app/components/+accordion/accordion-section.components.html

@@ -1,67 +1,12 @@
-<demo-section [name]="name" [src]="src">
+<demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Displays collapsible content panels for presenting information in a limited amount of space</p>
-  <p>The <strong>accordion component</strong> builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
-
-  <h2>Contents</h2>
-  <ul>
-    <li><a routerLink="." fragment="usage">Usage</a></li>
-    <li><a routerLink="." fragment="examples">Examples</a>
-      <ul>
-        <li><a routerLink="." fragment="simple">Simple accordion</a></li>
-        <li><a routerLink="." fragment="disabled">Disabled</a></li>
-        <li><a routerLink="." fragment="dynamic">Dynamic accordion</a></li>
-        <li><a routerLink="." fragment="one-time">Open only one at a time</a></li>
-        <li><a routerLink="." fragment="styling">Styling</a></li>
-        <li><a routerLink="." fragment="config">Configuring defaults</a></li>
-      </ul>
-    </li>
-    <li><a routerLink="." fragment="api-reference">API Reference</a>
-      <ul>
-        <li><a routerLink="." fragment="accordion-panel-component">AccordionPanelComponent</a></li>
-        <li><a routerLink="." fragment="accordion-config">AccordionConfig</a></li>
-      </ul>
-    </li>
-  </ul>
-
-  <h2 routerLink="." fragment="usage" id="usage">Usage</h2>
-
-  <p [innerHtml]="titleDoc"></p>
-
-  <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
-
-  <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
-
-  <h3 routerLink="." fragment="simple" id="simple">Simple accordion</h3>
-  <ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
-    <demo-accordion-basic></demo-accordion-basic>
-  </ng-sample-box>
-
-  <h3 routerLink="." fragment="disabled" id="disabled">Disabled</h3>
-  <ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
-    <demo-accordion-disabled></demo-accordion-disabled>
-  </ng-sample-box>
-
-  <h3 routerLink="." fragment="dynamic" id="dynamic">Dynamic accordion</h3>
-  <ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html">
-    <demo-accordion-dynamic></demo-accordion-dynamic>
-  </ng-sample-box>
-
-  <h3 routerLink="." fragment="one-time" id="one-time">Open only one at a time</h3>
-  <ng-sample-box [ts]="demos.oneAtATime.component" [html]="demos.oneAtATime.html">
-    <demo-accordion-one-time></demo-accordion-one-time>
-  </ng-sample-box>
-
-  <h3 routerLink="." fragment="styling" id="styling">Styling</h3>
-  <ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html" [style]="demos.styling.css">
-    <demo-accordion-styling></demo-accordion-styling>
-  </ng-sample-box>
-
-  <h3 routerLink="." fragment="config" id="config">Configuring defaults</h3>
-  <ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
-    <demo-accordion-config></demo-accordion-config>
-  </ng-sample-box>
-
-  <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
-  <ng-api-doc routerLink="." fragment="accordion-panel-component" id="accordion-panel-component" directive="AccordionPanelComponent"></ng-api-doc>
-  <ng-api-doc-config routerLink="." fragment="accordion-config" id="accordion-config" type="AccordionConfig"></ng-api-doc-config>
+  <p>The <strong>accordion component</strong> builds on top of the collapse directive to provide a list
+  of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
+
+  <ng-container *ngFor="let section of componentContent">
+    <ng-container
+      *ngComponentOutlet="section.outlet;
+      injector: sectionInjections(section)">
+    </ng-container>
+  </ng-container>
 </demo-section>

demo/src/app/components/+accordion/accordion-section.list.ts

@@ -0,0 +1,90 @@
+import { DemoAccordionBasicComponent } from './demos/basic/basic';
+import { DemoAccordionDisabledComponent } from './demos/disabled/disabled';
+import { DemoAccordionDynamicComponent } from './demos/dymanic/dynamic';
+import { DemoAccordionOneAtATimeComponent } from './demos/one-at-a-time/one-at-a-time';
+import { DemoAccordionStylingComponent } from './demos/styling/styling';
+import { DemoAccordionConfigComponent } from './demos/config/config';
+
+import { ContentSection } from '../../shared/models/content-section.model';
+import { DemoTopSectionComponent } from '../../shared/demo-section-components/demo-top-section/index';
+import { ExamplesComponent } from '../../shared/demo-section-components/demo-examples-section/index';
+import { ApiSectionsComponent } from '../../shared/demo-section-components/demo-api-section/index';
+
+export const demoComponentContent: ContentSection[] = [
+  {
+    name: 'Usage',
+    anchor: 'usage',
+    outlet: DemoTopSectionComponent,
+    content: {
+      doc: require('html-loader!markdown-loader!./docs/usage.md')
+    }
+  },
+  {
+    name: 'Examples',
+    anchor: 'examples',
+    outlet: ExamplesComponent,
+    content: [
+      {
+        title: 'Simple accordion',
+        anchor: 'simple-accordion',
+        description: `<p>Click headers to expand/collapse content that is broken into logical sections, much
+          like tabs.</p>`,
+        component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
+        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
+        outlet: DemoAccordionBasicComponent
+      },
+      {
+        title: 'Disabled',
+        anchor: 'disabled',
+        component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled'),
+        html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.html'),
+        outlet: DemoAccordionDisabledComponent
+      },
+      {
+        title: 'Dynamic accordion',
+        anchor: 'dynamic-accordion',
+        component: require('!!raw-loader?lang=typescript!./demos/dymanic/dynamic'),
+        html: require('!!raw-loader?lang=markup!./demos/dymanic/dynamic.html'),
+        outlet: DemoAccordionDynamicComponent
+      },
+      {
+        title: 'Open only one at a time',
+        anchor: 'one-time',
+        component: require('!!raw-loader?lang=typescript!./demos/one-at-a-time/one-at-a-time'),
+        html: require('!!raw-loader?lang=markup!./demos/one-at-a-time/one-at-a-time.html'),
+        outlet: DemoAccordionOneAtATimeComponent
+      },
+      {
+        title: 'Styling',
+        anchor: 'styling',
+        component: require('!!raw-loader?lang=typescript!./demos/styling/styling'),
+        html: require('!!raw-loader?lang=markup!./demos/styling/styling.html'),
+        css: require('!!raw-loader?lang=markup!./demos/styling/styling.css'),
+        outlet: DemoAccordionStylingComponent
+      },
+      {
+        title: 'Configuring defaults',
+        anchor: 'config',
+        component: require('!!raw-loader?lang=typescript!./demos/config/config'),
+        html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
+        outlet: DemoAccordionConfigComponent
+      }
+    ]
+  },
+  {
+    name: 'API Reference',
+    anchor: 'api-reference',
+    outlet: ApiSectionsComponent,
+    content: [
+      {
+        title: 'AccordionPanelComponent',
+        anchor: 'AccordionPanelComponent'
+      },
+      {
+        title: 'AccordionConfig',
+        anchor: 'AccordionConfig',
+        component: 'config'
+      }
+    ]
+  }
+];

demo/src/app/components/+accordion/demo-accordion.module.ts

@@ -11,15 +11,19 @@ import { DEMO_COMPONENTS } from './demos';
 import { routes } from './demo-accordion.routes';
 
 @NgModule({
-  declarations: [AccordionSectionComponent, ...DEMO_COMPONENTS],
+  declarations: [
+    AccordionSectionComponent,
+    ...DEMO_COMPONENTS
+  ],
   imports: [
     AccordionModule.forRoot(),
     CommonModule,
     FormsModule,
     SharedModule,
     RouterModule.forChild(routes)
   ],
-  exports: [AccordionSectionComponent]
+  exports: [AccordionSectionComponent],
+  entryComponents: [...DEMO_COMPONENTS]
 })
 export class DemoAccordionModule {
   static routes: any = routes;

demo/src/app/components/+accordion/demos/index.ts

@@ -13,31 +13,3 @@ export const DEMO_COMPONENTS = [
   DemoAccordionDynamicComponent,
   DemoAccordionConfigComponent
 ];
-
-export const DEMOS = {
-  basic: {
-    component: require('!!raw-loader?lang=typescript!./basic/basic'),
-    html: require('!!raw-loader?lang=markup!./basic/basic.html')
-  },
-  disabled: {
-    component: require('!!raw-loader?lang=typescript!./disabled/disabled'),
-    html: require('!!raw-loader?lang=markup!./disabled/disabled.html')
-  },
-  dynamic: {
-    component: require('!!raw-loader?lang=typescript!./dymanic/dynamic'),
-    html: require('!!raw-loader?lang=markup!./dymanic/dynamic.html')
-  },
-  oneAtATime: {
-    component: require('!!raw-loader?lang=typescript!./one-at-a-time/one-at-a-time'),
-    html: require('!!raw-loader?lang=markup!./one-at-a-time/one-at-a-time.html')
-  },
-  config: {
-    component: require('!!raw-loader?lang=typescript!./config/config'),
-    html: require('!!raw-loader?lang=markup!./config/config.html')
-  },
-  styling: {
-    component: require('!!raw-loader?lang=typescript!./styling/styling'),
-    html: require('!!raw-loader?lang=markup!./styling/styling.html'),
-    css: require('!!raw-loader?lang=markup!./styling/styling.css')
-  }
-};