feat(docs): clickable examples

.gitignore

@@ -12,6 +12,8 @@ npm-debug.log
 # docs
 docs/docs.json
 docs/src/input.json
+docs/src/assets/examples-build
+docs/src/examples.json
 
 # config
 config/index.js

docs/src/app/@theme/services/iframe-communicator.service.ts

@@ -18,7 +18,11 @@ export class NgdIframeCommunicatorService {
   public receive(id: string): Observable<any> {
     return observableFromEvent(this.window, 'message')
       .pipe(
-        filter((msg: any) => msg.data && msg.data.id === id),
+        filter((msg: any) => {
+          if (msg.data && msg.data.id && msg.data.id.length !== 0) {
+            return msg.data && msg.data.id === id
+          }
+        }),
         map((msg: any) => msg.data),
       );
   }

docs/src/app/@theme/services/structure.service.ts

@@ -8,17 +8,24 @@ import { Inject, Injectable } from '@angular/core';
 
 import { NgdTabbedService } from './tabbed.service';
 import { NgdTextService } from './text.service';
-import { DOCS, STRUCTURE } from '../../app.options';
+import {
+  DOCS,
+  STRUCTURE,
+  EXAMPLES_STRUCTURE,
+} from '../../app.options';
 
 @Injectable()
 export class NgdStructureService {
 
   protected prepared;
+  protected examplesHelperArray: any[];
 
   constructor(private textService: NgdTextService,
               private tabbedService: NgdTabbedService,
               @Inject(STRUCTURE) structure,
-              @Inject(DOCS) docs) {
+              @Inject(DOCS) docs,
+              @Inject(EXAMPLES_STRUCTURE) examples) {
+    this.examplesHelperArray = examples;
     this.prepared = this.prepareStructure(structure, docs);
   }
 
@@ -105,6 +112,9 @@ export class NgdStructureService {
       images = imagesObj ? imagesObj.images : [];
     }
 
+    component.overviewExamples = this.processExamples(component.overviewExamples);
+    component.examples = this.processExamples(component.examples);
+
     return {
       ...component,
       slag: this.textService.createSlag(component.name),
@@ -121,6 +131,35 @@ export class NgdStructureService {
     };
   }
 
+  protected processExamples(examples: any[]): any[] {
+    if (examples && examples.length !== 0) {
+      return examples
+        .map((example: any) => {
+          const helper: any = this.examplesHelperArray.find(item => {
+            return example.description === item.name;
+          });
+          return helper ? this.prepareExample(helper, example) : example;
+        })
+        .filter(Boolean);
+    } else {
+      return [];
+    }
+  }
+
+  protected prepareExample(helper: any, example: any): any {
+    return {
+      id: example.description,
+      name: example.description.split(/(?=[A-Z])/).join(' '),
+      files: [{
+        path: helper.path,
+        code: helper.code,
+        extension: helper.path.slice(helper.path.length - 3),
+      }],
+      code: helper.code,
+      url: `/assets/examples-build/#/${helper.name}`,
+    };
+  }
+
   protected prepareToc(item: any) {
     return item.children.reduce((acc: any[], child: any) => {
       if (child.block === 'markdown') {

docs/src/app/app.module.ts

@@ -27,11 +27,13 @@ import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
 
 import { structure  } from '../structure';
+const docs = require('../input.json');
+const examples = require('../examples.json');
 import {
   DOCS,
   STRUCTURE,
+  EXAMPLES_STRUCTURE,
 } from './app.options';
-const docs = require('../input.json');
 
 @NgModule({
   imports: [
@@ -58,6 +60,7 @@ const docs = require('../input.json');
     Title,
     { provide: STRUCTURE, useValue: structure },
     { provide: DOCS, useValue: docs },
+    { provide: EXAMPLES_STRUCTURE, useValue: examples },
   ],
   entryComponents: [
   ],

docs/src/app/app.options.ts

@@ -8,3 +8,4 @@ import { InjectionToken } from '@angular/core';
 
 export const STRUCTURE = new InjectionToken<any>('Docs Structure');
 export const DOCS = new InjectionToken<any>('Docs Structure');
+export const EXAMPLES_STRUCTURE = new InjectionToken<any>('Docs Structure');

docs/src/app/blocks/components/examples-block/examples-block.component.ts

@@ -16,8 +16,10 @@ import {
     <nb-card [ngdFragment]="source.slag">
       <nb-card-body>
         <h2>{{ source.name }}</h2>
-        <ngd-stacked-example-block *ngIf="hasExamples()" [content]="examples"
-                                   class="widget-block">
+        <ngd-stacked-example-block
+          *ngFor="let example of source.examples"
+          [content]="example"
+          class="widget-block">
         </ngd-stacked-example-block>
       </nb-card-body>
     </nb-card>
@@ -32,10 +34,9 @@ export class NgdExamplesBlockComponent {
   @Input('source')
   set setExamples(source: any) {
     this.source = source;
-    this.examples = source.examples;
   }
 
   hasExamples(): boolean {
-    return this.examples.length !== 0;
+    return this.source.examples.length !== 0;
   }
 }

docs/src/app/blocks/components/live-example-block/live-example-block.component.html

@@ -1,13 +1,6 @@
 <section class="header" >
   <strong class="title">{{ content.name }}</strong>
   <div class="actions">
-
-    <div class="action-selector">
-      <select class="action-item" [(ngModel)]="currentTheme"  (change)="switchTheme($event.target.value)">
-        <option *ngFor="let theme of themes" [value]="theme.value">{{theme.label}}</option>
-      </select>
-      <nb-icon icon="color-palette-outline"></nb-icon>
-    </div>
     <a class="btn action-item action-button" target="_blank" [href]="url">
       <nb-icon icon="external-link-outline"></nb-icon>
     </a>

docs/src/app/blocks/components/live-example-block/live-example-block.component.ts

@@ -35,30 +35,14 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
     return this.currentTheme === 'default';
   }
 
-  @HostBinding('class.theme-cosmic')
-  private get isCosmic() {
-    return this.currentTheme === 'cosmic';
-  }
-
-  @HostBinding('class.theme-corporate')
-  private get isCorporate() {
-    return this.currentTheme === 'corporate';
-  }
-
   iframeHeight = 0;
   alive: boolean = true;
 
-  themes: {label: string; value: string}[] = [
-    { label: 'Default', value: 'default' },
-    { label: 'Cosmic', value: 'cosmic' },
-    { label: 'Corporate', value: 'corporate' },
-  ];
-
   currentTheme: string = 'default';
   loading = true;
 
   get url(): string {
-    return this.location.prepareExternalUrl(`example/${this.content.id}`);
+    return this.location.prepareExternalUrl(this.content.url);
   }
 
   get iframeWindow(): Window {
@@ -94,11 +78,6 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
     this.alive = false;
   }
 
-  switchTheme(theme: string) {
-    this.analytics.trackEvent('changeTheme', theme);
-    this.communicator.send({ id: this.content.id, theme }, this.iframeWindow);
-  }
-
   switchToInlineVew() {
     this.changeView.emit(NgdExampleView.INLINE);
   }

docs/src/app/blocks/components/overview-block/overview-block.component.ts

@@ -19,14 +19,11 @@ import {
           <ng-container>
             <div [innerHTML]="description"
                  [ngStyle]="hasImage && {'margin-bottom': '16px'}"></div>
-            <ngd-overview-example
+            <ngd-stacked-example-block
               *ngFor="let example of source.overviewExamples"
-              [example]="example">
-            </ngd-overview-example>
-            <img
-              *ngFor="let image of images"
-              src={{image}}
-            />
+              [content]="example"
+              class="widget-block">
+            </ngd-stacked-example-block>
           </ng-container>
         </ng-container>
       </nb-card-body>
@@ -52,5 +49,4 @@ export class NgdOverviewBlockComponent {
     this.images = source.images.map((image: string) => `assets/images/overview/${image}`);
     return source;
   }
-
 }

docs/src/app/blocks/components/stacked-example-block/stacked-examples.component.ts

@@ -1,38 +1,65 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-import {
-  Component,
-  Input,
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+
 import { NgdExampleView } from '../../enum.example-view';
 import { NgdAnalytics } from '../../../@theme/services';
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+
+export const pulse = animation(
+  animate(
+    '{{ timing }}s {{ delay }}s',
+    keyframes([
+      style({ transform: 'scale3d(1, 1, 1)' }),
+      style({ transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})' }),
+      style({ transform: 'scale3d(1, 1, 1)' }),
+    ]),
+  ),
+  { params: { scale: 1.02, timing: 0.5, delay: 0 } },
+);
 
 @Component({
   selector: 'ngd-stacked-example-block',
   template: `
-    <div>
-      <ngd-tabbed-example-block [content]="content"
+    <div *ngIf="isLiveExample">
+      <ngd-live-example-block [hidden]="!isLive"
+                              [@exampleState]="isLive ? 'live': 'code'"
+                              [content]="content"
+                              hasViewSwitch="true"
+                              (changeView)="changeView($event)">
+      </ngd-live-example-block>
+
+      <ngd-tabbed-example-block [hidden]="isLive"
+                                [@exampleState]="isLive ? 'live': 'code'"
+                                [content]="content"
                                 hasViewSwitch="true"
                                 (changeView)="changeView($event)">
       </ngd-tabbed-example-block>
     </div>
+    <div *ngIf="!isLiveExample">
+      <ngd-overview-example [example]="content">
+      </ngd-overview-example>
+    </div>
   `,
+  animations: [
+    trigger('exampleState', [
+      transition('live => code', [
+        useAnimation(pulse),
+      ]),
+      transition('code => live', [
+        useAnimation(pulse),
+      ]),
+    ]),
+  ],
 })
-export class NgdStackedExampleComponent {
+export class NgdStackedExampleComponent implements OnInit {
 
-  content: any;
+  @Input() content: any;
+  isLive = true;
+  isLiveExample: boolean;
 
-  @Input('content')
-  set setContent(source: any) {
-    this.content = source;
+  ngOnInit(): void {
+    this.isLiveExample = this.content.hasOwnProperty('id');
   }
 
-  isLive = false;
-
   constructor(private analytics: NgdAnalytics) {
   }
 

docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.html

@@ -1,7 +1,13 @@
+<button type="button"
+        *ngIf="hasViewSwitch"
+        class="btn action-item action-button"
+        (click)="switchToLiveView()">
+  <nb-icon icon="image-outline"></nb-icon>
+  <span class="text">Live view</span>
+</button>
+
 <nb-tabset class="tabs-container">
-  <nb-tab *ngFor="let example of examples"
-          tabTitle="{{ example.description }}"
-          [active]="example.active">
-    <ngd-code-block [path]="example.path" [code]="example.code"></ngd-code-block>
+  <nb-tab *ngFor="let example of examples" tabTitle="{{ example.extension }}" [active]="example.active">
+    <ngd-code-block [code]="example.code"></ngd-code-block>
   </nb-tab>
 </nb-tabset>

docs/src/app/blocks/components/tabbed-example-block/tabbed-example-block.component.ts

@@ -6,6 +6,8 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
+import { forkJoin,  of as observableOf,  Observable } from 'rxjs';
+import { map,  catchError } from 'rxjs/operators';
 import { NgdCodeLoaderService } from '../../../@theme/services';
 import { NgdExampleView } from '../../enum.example-view';
 
@@ -20,24 +22,27 @@ export class NgdTabbedExampleBlockComponent {
 
   @Input() hasViewSwitch = false;
   @Output() changeView = new EventEmitter<NgdExampleView>();
-  examples: any[];
+  examples = [];
 
   @Input()
-  set content(content: any) {
-    this.examples = content;
-    this.examples.map((item: any) => {
-      item.code = this.prepareCode(item.code);
-      item.path = 'path';
-      return item;
-    });
+  set content({ files }) {
+    this.examples = files;
     this.examples[0].active = true;
   }
 
   constructor(private codeLoader: NgdCodeLoaderService, private cd: ChangeDetectorRef) {
   }
 
-  private prepareCode(code: string): string {
-    return code.replace(/`/g, '');
+  switchToLiveView() {
+    this.changeView.emit(NgdExampleView.LIVE);
   }
 
+  private load(path): Observable<any> {
+    const extension = path.split('.').pop();
+    return this.codeLoader.load(path)
+      .pipe(
+        map(code => ({ code, path, extension })),
+        catchError(e => observableOf('')),
+      );
+  }
 }