docs: app supports v1 and v2 docs

l-lin · Apr 19, 2024 · 9be8a5e · 9be8a5e
1 parent a415f52
commit 9be8a5e
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 26 deletions.
diff --git a/demo/src/app/app.component.css b/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;
+}
diff --git a/demo/src/app/app.component.html b/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>

diff --git a/demo/src/app/app.component.ts b/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 {

diff --git a/demo/src/app/base-demo/base-demo.component.html b/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>

diff --git a/demo/src/app/base-demo/base-demo.component.ts b/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();
+ }
+
 }
diff --git a/demo/src/styles.css b/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;
+}