feat(demo): add examples content, make it runnable

angular-extensions · Jul 23, 2019 · abe3493 · abe3493
1 parent 40977e0
commit abe3493
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 53 deletions.
diff --git a/projects/elements-demo/src/app/core/core.module.ts b/projects/elements-demo/src/app/core/core.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { HighlightModule } from 'ngx-highlightjs';
 import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -10,7 +11,7 @@ import { NavigationComponent } from './layout/navigation/navigation.component';
 import { FooterComponent } from './layout/footer/footer.component';
 
 export function hljsLanguages() {
-  return [{ name: 'typescript', func: typescript }];
+  return [{ name: 'typescript', func: typescript }, { name: 'xml', func: xml }];
 }
 
 @NgModule({

diff --git a/projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts b/projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts
@@ -38,10 +38,6 @@ const NAVIGATION = [
       {
         label: 'Basic',
         url: 'examples/basic'
-      },
-      {
-        label: 'Lazy Loading',
-        url: 'examples/lazy'
       }
     ]
   },

diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
@@ -1,30 +1,70 @@
-<h1>Basic</h1>
+<div class="wrapper">
+  <h1>Basic</h1>
 
-<div class="content">
-  <div class="implementation">
-    <ng-template #error>Loading failed...</ng-template>
-    <ng-template #loading>Loading...</ng-template>
-    <mwc-button
-      *axLazyElement="
-        'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
-        loadingTemplate: loading;
-        errorTemplate: error;
-        module: true
-      "
-      raised
-      (click)="increment()"
-    >
-      Increment
-    </mwc-button>
-
-    Counter: {{ counter }}
+  <h2>Plain directive</h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example1">
+      <button mat-flat-button color="accent" (click)="example1 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example1">
+      <mwc-icon
+        *axLazyElement="
+          'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module';
+          module: true
+        "
+      >
+        favorite
+      </mwc-icon>
+    </div>
+    <div class="description">
+      <p>
+        The most simple example, all we need is to use element tag, for example
+        <code>&#60;mwc-icon></code> and add
+        <code>*axLazyElement</code> directive with the url pointing to the
+        element implementation.
+      </p>
+      <pre [highlight]="codeExample1"></pre>
+    </div>
   </div>
-  <div class="description">
-    <p>
-      The most simple example, all we need is to use element tag, for example
-      <code>&#60;mwc-button></code> and add
-      <code>*axLazyElement</code> directive with the url pointing to the element
-      implementation.
-    </p>
+
+  <h2>Use loading <code>&#60;ng-template></code></h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example2">
+      <button mat-flat-button color="accent" (click)="example2 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example2">
+      <ng-template #error>Loading failed...</ng-template>
+      <ng-template #loading>Loading...</ng-template>
+      <mwc-button
+        *axLazyElement="
+          'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
+          loadingTemplate: loading;
+          errorTemplate: error;
+          module: true
+        "
+        raised
+        (click)="increment()"
+      >
+        Increment
+      </mwc-button>
+      <p>Counter: {{ counter }}</p>
+    </div>
+    <div class="description">
+      <p>
+        In this example we're loading
+        <code>&#60;mwc-button></code> using the
+        <code>*axLazyElement</code> directive but we're also adding
+        <code>&#60;ng-template #loading>Loading...&#60;ng-template></code> which
+        will display before the element was loaded (depending on your connection
+        speed)
+      </p>
+      <pre [highlight]="codeExample2"></pre>
+    </div>
   </div>
 </div>
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.scss b/projects/elements-demo/src/app/features/examples/basic/basic.component.scss
@@ -1,17 +1,35 @@
-:host {
+.wrapper {
   display: flex;
   flex-direction: column;
 
   .content {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    margin: 0 0 50px 0;
 
     .implementation {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       flex: 1;
+      margin: 0 20px 20px 0;
+      border: 2px solid #eee;
+      padding: 20px;
+
+      p {
+        margin: 10px 0 0 0;
+      }
     }
 
     .description {
       flex: 1.5;
     }
   }
 }
+
+:host-context(.responsive-large) {
+  .wrapper {
+    width: 60%;
+  }
+}
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
@@ -6,8 +6,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./basic.component.scss']
 })
 export class BasicComponent implements OnInit {
+  // example toggles
+  example1 = false;
+  example2 = false;
+
+  // example state
   counter = 0;
 
+  // example code examples
+  codeExample1 = CODE_EXAMPLE_1;
+  codeExample2 = CODE_EXAMPLE_2;
+
   constructor() {}
 
   ngOnInit() {}
@@ -16,3 +25,15 @@ export class BasicComponent implements OnInit {
     this.counter++;
   }
 }
+
+const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module'; -->
+<mwc-icon *axLazyElement="url; module: true">
+  favorite
+</mwc-icon>`;
+
+const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module' -->;
+<ng-template #loading>Loading...</ng-template>
+<mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
+            (click)="increment()">
+  Increment
+</mwc-button>`;
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.module.ts b/projects/elements-demo/src/app/features/examples/basic/basic.module.ts
@@ -1,4 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HighlightModule } from 'ngx-highlightjs';
 
 import { SharedModule } from '../../../shared/shared.module';
 
@@ -8,6 +9,6 @@ import { BasicComponent } from './basic.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [BasicComponent],
-  imports: [SharedModule, BasicRoutingModule]
+  imports: [HighlightModule, SharedModule, BasicRoutingModule]
 })
 export class BasicModule {}
diff --git a/projects/elements-demo/src/app/features/home/home.module.ts b/projects/elements-demo/src/app/features/home/home.module.ts
@@ -1,5 +1,6 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HighlightModule } from 'ngx-highlightjs';
 
 import { SharedModule } from '../../shared/shared.module';
 
@@ -8,7 +9,7 @@ import { HomeComponent } from './home/home.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [HomeComponent],
-  imports: [SharedModule, RouterModule],
+  imports: [RouterModule, HighlightModule, SharedModule],
   exports: [HomeComponent]
 })
 export class HomeModule {}
diff --git a/projects/elements-demo/src/app/features/home/home/home.component.html b/projects/elements-demo/src/app/features/home/home/home.component.html
@@ -48,6 +48,7 @@ <h2>Quickstart</h2>
   <li>
     Use <code>*axLazyElement</code> directive on an element you wish to load and
     pass in the url of the element bundle
+    <pre [highlight]="codeExampleComponent"></pre>
   </li>
 </ol>
 

diff --git a/projects/elements-demo/src/app/features/home/home/home.component.scss b/projects/elements-demo/src/app/features/home/home/home.component.scss
@@ -58,6 +58,11 @@
     margin: 50px 0 15px 0;
   }
 
+  pre {
+    margin: 20px 0 0 0;
+    line-height: 1.3em;
+  }
+
   mat-grid-list {
     width: 100%;
 

diff --git a/projects/elements-demo/src/app/features/home/home/home.component.ts b/projects/elements-demo/src/app/features/home/home/home.component.ts
@@ -3,6 +3,33 @@ import { Observable } from 'rxjs';
 
 import { ResponsiveLayoutService } from '../../../core/layout/responsive-layout.service';
 
+@Component({
+  selector: 'demo-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  columnCount: Observable<number>;
+
+  features = FEATURES;
+  codeExampleComponent = CODE_EXAMPLE_COMPONENT;
+
+  constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
+
+  ngOnInit() {
+    this.columnCount = this.responsiveLayoutService.columnCount;
+  }
+}
+
+const CODE_EXAMPLE_COMPONENT = `@Component({
+  selector: 'your-org-feature',
+  template: '<some-element *axLazyElement="elementUrl"></some-element>'
+})
+export class FeatureComponent {
+  elementUrl = 'https://your-org.com/elements/some-element.js';
+}
+`;
+
 const FEATURES = [
   {
     title: 'Lightweight',
@@ -47,20 +74,3 @@ const FEATURES = [
     icon: 'category'
   }
 ];
-
-@Component({
-  selector: 'demo-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent implements OnInit {
-  columnCount: Observable<number>;
-
-  features = FEATURES;
-
-  constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
-
-  ngOnInit() {
-    this.columnCount = this.responsiveLayoutService.columnCount;
-  }
-}