docs: app supports v1 and v2 docs

Author: shanmukhateja

demo/src/app/app.component.css

@@ -74,3 +74,14 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
 #logo-container {
   display: block;
 }
+
+
+.dt-version-button {
+  text-transform: none;
+  text-align: center;
+}
+
+.dt-version-button svg {
+  position: relative;
+  top: 6px;
+}

demo/src/app/app.component.html

@@ -17,6 +17,20 @@ <h3>
         </a>
       </h3>
     </li>
+    <li>
+      <a class="dt-version-button btn-flat" data-activates='dropdown1'>
+        DT version: '{{dtVersion}}'
+        <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
+      </a>
+
+      <ul id='dropdown1' [(ngModel)]="dtVersion" class='dropdown-content'>
+        <li [class.active]="dtVersion == 'v2'" (click)="onDTVersionChanged('v2')" value="v2" style="padding:0 32px">v2.x</li>
+        <li [class.active]="dtVersion == 'v1'" (click)="onDTVersionChanged('v1')" value="v1" style="padding:0 32px">v1.x</li>
+      </ul>
+    </li>
+    <li>
+      <div class="divider"></div>
+    </li>
     <li><a class="subheader">Getting Started</a></li>
     <li class="bold">
       <a routerLink="/getting-started" class="waves-effect waves-blue">Installation</a>

demo/src/app/app.component.ts

@@ -13,9 +13,11 @@ export class AppComponent implements OnInit, OnDestroy {
 
   routerEventsSub$: Subscription = null;
 
+  dtVersion = 'v2';
+
   constructor(
     private router: Router
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     $.fn.dataTable.ext.errMode = 'none';
@@ -31,6 +33,23 @@ export class AppComponent implements OnInit, OnDestroy {
           $('ul.tabs').tabs();
         }, 600);
       });
+
+      // Init DT version picker
+    $('.dt-version-button').dropdown({
+      inDuration: 300,
+      outDuration: 225,
+      constrainWidth: true, // Does not change width of dropdown to that of the activator
+      hover: false, // Activate on hover
+      gutter: 14,
+      belowOrigin: true,
+      alignment: 'left', // Displays dropdown with edge aligned to the left of button
+      stopPropagation: true // Stops event propagation
+    });
+
+  }
+
+  onDTVersionChanged(v: string) {
+    this.dtVersion = v;
   }
 
   ngOnDestroy(): void {

demo/src/app/base-demo/base-demo.component.html

@@ -30,7 +30,7 @@ <h5 class="header">Description</h5>
         <li class="tab col">
           <a href="#previewTab">Preview</a>
         </li>
-        <li class="tab col" *ngIf="mdInstall.length>0">
+        <li class="tab col" *ngIf="dtVersion == 'v2' ? mdInstallV2.length>0 : mdInstall.length>0">
           <a href="#installTab">Installation</a>
         </li>
         <li class="tab col">
@@ -43,22 +43,22 @@ <h5 class="header">Description</h5>
     </div>
 
     <!-- Preview -->
-    <div id="previewTab" class="  col s12">
+    <div id="previewTab" class="col s12">
       <ng-container *ngTemplateOutlet="template"></ng-container>
     </div>
 
     <!-- Installation -->
-    <div id="installTab" class="col s12" *ngIf="mdInstall.length > 0">
-      <markdown [src]="mdInstall"></markdown>
+    <div id="installTab" class="col s12" *ngIf="dtVersion == 'v2' ? mdInstallV2.length > 0 : mdInstall.length > 0">
+      <markdown [src]="dtVersion == 'v2' ? mdInstallV2 : mdInstall"></markdown>
     </div>
 
     <!-- HTML -->
     <div id="htmlTab" class="col s12">
-      <markdown [src]="mdHTML"></markdown>
+      <markdown [src]="dtVersion == 'v2' ? mdHTMLV2 : mdHTML"></markdown>
     </div>
 
     <div id="typescriptTab" class="col s12">
-      <markdown [src]="mdTS"></markdown>
+      <markdown [src]="dtVersion == 'v2' ? mdTSV2 : mdTS"></markdown>
     </div>
   </div>
 </div>

demo/src/app/base-demo/base-demo.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { DtVersionService } from '../dt-version.service';
+import { Subscription } from 'rxjs';
 
 // needed to re-init tabs on route change
 declare var $: JQueryStatic;
@@ -8,34 +10,41 @@ declare var $: JQueryStatic;
   templateUrl: './base-demo.component.html',
   styleUrls: ['./base-demo.component.css']
 })
-export class BaseDemoComponent implements OnInit {
+export class BaseDemoComponent implements OnInit, OnDestroy {
 
-  @Input()
-  pageTitle = '';
+  @Input() pageTitle = '';
 
-  @Input()
-  mdIntro = '';
+  @Input() mdIntro = '';
 
-  @Input()
-  mdInstall = '';
+  @Input() mdInstall = '';
+  @Input() mdInstallV2 = '';
 
-  @Input()
-  mdHTML = '';
+  @Input() mdHTML = '';
+  @Input() mdHTMLV2 = '';
 
-  @Input()
-  mdTS = '';
+  @Input() mdTS = '';
+  @Input() mdTSV2 = '';
 
-  @Input()
-  template: TemplateRef<any> = null;
+  @Input() template: TemplateRef<any> = null;
 
-  @Input()
-  deprecated = false;
+  @Input() deprecated = false;
+
+  dtVersion = null;
+  dtVersionSubscription$: Subscription = null;
+
+  constructor(
+    private dtVersionService: DtVersionService
+  ) {}
 
   ngOnInit() {
     // Re-init tabs on route change
 
     // Init back to top
     this.initBackToTop();
+
+    this.dtVersionSubscription$ = this.dtVersionService.versionChanged$.subscribe(v => {
+      this.dtVersion = v;
+    });
   }
 
   private scrollCallback() {
@@ -57,4 +66,8 @@ export class BaseDemoComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.dtVersionSubscription$?.unsubscribe();
+  }
+
 }

demo/src/styles.css

@@ -20,7 +20,7 @@ header, main, footer {
 }
 
 .top-banner {
-  height: 120px !important;
+  min-height: 120px !important;
 }
 
 .banner {
@@ -156,7 +156,7 @@ markdown h5:not(markdown.faqMarkdown) {
 }
 
 
-/** Fixed columns css 
+/** Fixed columns css
 
 These classes are injected by fixed columns extensions
 and can be tweaked here to match the colors of headers and body
@@ -184,4 +184,16 @@ table.dataTable tbody tr > .dtfc-fixed-right {
 div.dtfc-left-top-blocker,
 div.dtfc-right-top-blocker {
   background-color: white;
-}
+}
+
+/* Dt v2 CSS messed up some stuff */
+.dt-search input {
+  width: 200px !important;
+  height: 20px !important;
+}
+
+select.dt-input {
+  display: inline-block !important;
+  width: 60px;
+  height: 40px;
+}