feat: init first slide for toolset

src/app/app.module.ts

@@ -48,8 +48,7 @@ import { ToolsetComponent } from './shared/toolset/toolset.component';
     ResourcesComponent,
     ReporterComponent,
     AwesomeToolComponent,
-    MobileComponent,
-    ToolsetComponent
+    MobileComponent
   ],
   imports: [
     SharedModule,
@@ -62,6 +61,7 @@ import { ToolsetComponent } from './shared/toolset/toolset.component';
     DragulaModule.forRoot(),
   ],
   providers: [Title],
+  exports: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/shared/components/markdown-render/markdown-render.component.html

@@ -9,6 +9,11 @@
 
       <markdown class="markdown" [data]="data" *ngIf="data"></markdown>
       <mat-spinner *ngIf="loading" class="loading" color="accent"></mat-spinner>
+
+      <div *ngFor="let tool of toolsets">
+        <div class="toolset-render"><toolset [option]="tool"></toolset></div>
+      </div>
+
     </mat-drawer-content>
   </mat-drawer-container>
 </div>
@@ -21,6 +26,11 @@
     (load)="endLoading()"
   ></markdown>
   <mat-spinner *ngIf="loading" class="loading" color="accent"></mat-spinner>
+
+  <div *ngFor="let tool of toolsets">
+    <div class="toolset-render"><toolset [option]="tool"></toolset></div>
+  </div>
+
 </div>
 
 <!--Scroll to top-->

src/app/shared/components/markdown-render/markdown-render.component.scss

@@ -1,3 +1,7 @@
+:host {
+  position: relative;
+}
+
 .markdown-toc {
   min-height: 600px;
   height: calc(100vh - 66px);

src/app/shared/components/markdown-render/markdown-render.component.ts

@@ -80,6 +80,9 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
   private webComponentsIndex = 0;
   private webComponentsData = [];
 
+  private toolsetId = 0;
+  toolsets: ToolsetOption[] = [];
+
   constructor(private markdownService: MarkdownService,
               private tocify: Tocify,
               private location: Location,
@@ -108,11 +111,13 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
       this.chartIndex = 0;
       this.webComponentsIndex = 0;
       this.mermaidIndex = 0;
+      this.toolsetId = 0;
 
       this.chartInfos = [];
       this.mermaidData = [];
       this.graphvizData = [];
       this.webComponentsData = [];
+      this.toolsets = [];
     }
   }
 
@@ -257,6 +262,8 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
           return this.buildEchartsData(code);
         case 'webcomponents':
           return this.buildWebComponents(code);
+        case 'toolset':
+          return this.buildToolsets(code);
         default:
           return this.buildNormalCode(options, code, lang, escaped);
       }
@@ -653,4 +660,21 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
       this.renderer2.appendChild(this.document.body, script);
     }
   }
+
+  private buildToolsets(code: any) {
+    this.toolsetId++;
+
+    const id = 'toolset-' + this.webComponentsIndex;
+    const tokens = marked.lexer(code);
+    let items: any;
+    items = MarkdownHelper.markdownToJSON(tokens, items);
+
+    this.toolsets.push({
+      id,
+      data: items,
+      type: items.config.type
+    });
+
+    return `<div class="toolset-placeholder" id="${id}"></div>`;
+  }
 }

src/app/shared/shared.module.ts

@@ -14,6 +14,8 @@ import { MarkdownReporterComponent } from './components/markdown-reporter/markdo
 import { MarkdownChartComponent } from './components/markdown-chart/markdown-chart.component';
 import { MarkdownTreeComponent } from './components/markdown-tree/markdown-tree.component';
 import Tocify from './components/markdown-render/tocify';
+import { MobileComponent } from '../presentation/mobile/mobile.component';
+import { ToolsetComponent } from './toolset/toolset.component';
 
 @NgModule({
   imports: [
@@ -50,6 +52,8 @@ import Tocify from './components/markdown-render/tocify';
     MarkdownReporterComponent,
     MarkdownChartComponent,
     MarkdownTreeComponent,
+
+    ToolsetComponent
   ],
   providers: [
     Tocify,
@@ -63,6 +67,8 @@ import Tocify from './components/markdown-render/tocify';
     MarkdownReporterComponent,
     MarkdownChartComponent,
     MarkdownTreeComponent,
+
+    ToolsetComponent
   ],
   entryComponents: []
 })

src/app/shared/toolset/toolset.component.html

@@ -1,8 +1,10 @@
-<div *ngIf="option" [ngSwitch]="option.type">
-  <div *ngSwitchCase>
-
-  </div>
-  <div *ngSwitchDefault>
-    it works
+<div *ngIf="option">
+  <div [ngSwitch]="true" [ngStyle]="buildStyle(option)">
+    <div *ngSwitchCase="option.type === 'slider'" >
+      <mat-slider step="4" tickInterval="3"></mat-slider>
+    </div>
+    <div *ngSwitchDefault>
+      <h1>it works</h1>
+    </div>
   </div>
 </div>

src/app/shared/toolset/toolset.component.ts

@@ -1,18 +1,30 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-toolset',
+  selector: 'toolset',
   templateUrl: './toolset.component.html',
   styleUrls: ['./toolset.component.scss']
 })
 export class ToolsetComponent implements OnInit {
-
   @Input()
   option: ToolsetOption;
 
   constructor() { }
 
   ngOnInit(): void {
+    console.log(this.option);
   }
 
+  buildStyle(option: ToolsetOption) {
+    const element = document.getElementById(option.id);
+    if (element == null) {
+      return;
+    }
+
+    return {
+      zIndex: 999,
+      top: element.offsetTop + 'px',
+      position: 'absolute'
+    };
+  }
 }

src/app/shared/toolset/toolset.d.ts

@@ -1,6 +1,7 @@
 interface ToolsetOption {
   id: string;
-  type: string; // slider
-  offsetHeight: string;
-  height: string;
+  type?: string; // slider
+  data: any[];
+  offsetHeight?: string;
+  height?: string;
 }

src/assets/docs/tool.md

@@ -1,5 +1,13 @@
 # 工具
 
+```toolset
+ - hello
+ - world
+ - a
+
+config: {"type": "slider"}
+```
+
 ## 架构
 
 ### 权衡滑块

src/styles/_markdown.scss

@@ -651,3 +651,9 @@
   width: 600px;
   height: 400px;
 }
+
+.toolset-placeholder {
+  width: auto;
+  display: block;
+  height: 600px;
+}