Adds table of contents to user guide
This commit is contained in:
parent
c62cc1068a
commit
fc689342cb
|
@ -1 +1,11 @@
|
||||||
<div id='userguide' [innerHTML]="guideHTML"></div>
|
<!-- <div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<span class="custom-header">User Guide Editor</span>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div id='userguide' [innerHTML]="guideHTML"></div> -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<iframe *ngIf="guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,11 +1,27 @@
|
||||||
:host ::ng-deep .href{
|
:host ::ng-deep .href {
|
||||||
color: rgb(0, 0, 238) !important;
|
color: rgb(0, 0, 238) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host :hover ::ng-deep .href {
|
:host :hover ::ng-deep .href {
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#userguide {
|
#userguide {
|
||||||
margin: 20px;
|
// margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-header {
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #212121;
|
||||||
|
margin-top: 67px;
|
||||||
|
margin-bottom: 38px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
margin: 0px;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,59 +2,63 @@ import { Component, OnInit, AfterViewChecked } from '@angular/core';
|
||||||
import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
|
import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { takeUntil } from 'rxjs/internal/operators/takeUntil';
|
import { takeUntil } from 'rxjs/internal/operators/takeUntil';
|
||||||
import { DomSanitizer } from '@angular/platform-browser';
|
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user-guide-content',
|
selector: 'app-user-guide-content',
|
||||||
templateUrl: './user-guide-content.component.html',
|
templateUrl: './user-guide-content.component.html',
|
||||||
styleUrls: ['./user-guide-content.component.scss']
|
styleUrls: ['./user-guide-content.component.scss']
|
||||||
})
|
})
|
||||||
export class UserGuideContentComponent extends BaseComponent implements OnInit, AfterViewChecked {
|
export class UserGuideContentComponent extends BaseComponent implements OnInit, AfterViewChecked {
|
||||||
|
|
||||||
|
|
||||||
guideHTML: any;
|
guideHTML: any;
|
||||||
|
guideHTMLUrl: SafeResourceUrl;
|
||||||
private scrollEvent: EventListener;
|
private scrollEvent: EventListener;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private userGuideService: UserGuideService,
|
private userGuideService: UserGuideService,
|
||||||
private sanitizer: DomSanitizer
|
private sanitizer: DomSanitizer
|
||||||
) { super(); }
|
) { super(); }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.scrollEvent = ((ev) => this.scroll(ev));
|
this.scrollEvent = ((ev) => this.scroll(ev));
|
||||||
this.userGuideService.getUserGuide()
|
this.userGuideService.getUserGuide()
|
||||||
.pipe(takeUntil(this._destroyed))
|
.pipe(takeUntil(this._destroyed))
|
||||||
.subscribe(response => {
|
.subscribe(response => {
|
||||||
const blob = new Blob([response.body], { type: 'text/html' });
|
const blob = new Blob([response.body], { type: 'text/html' });
|
||||||
this.readBlob(blob);
|
this.readBlob(blob);
|
||||||
|
|
||||||
});
|
// this.guideHTMLUrl = URL.createObjectURL(blob);
|
||||||
}
|
this.guideHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
|
||||||
|
console.log(this.guideHTMLUrl)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
ngAfterViewChecked(): void {
|
ngAfterViewChecked(): void {
|
||||||
this.parse();
|
|
||||||
}
|
|
||||||
|
|
||||||
readBlob(blob: Blob) {
|
|
||||||
const fr = new FileReader();
|
|
||||||
fr.onload = ev => {
|
|
||||||
this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(fr.result as string);
|
|
||||||
this.parse();
|
this.parse();
|
||||||
};
|
}
|
||||||
fr.readAsText(blob);
|
|
||||||
}
|
|
||||||
|
|
||||||
scroll(ev: Event) {
|
readBlob(blob: Blob) {
|
||||||
document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({behavior: 'smooth', block: 'start'});
|
const fr = new FileReader();
|
||||||
}
|
fr.onload = ev => {
|
||||||
|
this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(fr.result as string);
|
||||||
|
this.parse();
|
||||||
|
};
|
||||||
|
fr.readAsText(blob);
|
||||||
|
}
|
||||||
|
|
||||||
private parse() {
|
scroll(ev: Event) {
|
||||||
const specialElements: HTMLCollection = document.getElementsByClassName('href');
|
document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
for (let i = 0; i < specialElements.length; i++) {
|
}
|
||||||
const element = specialElements.item(i);
|
|
||||||
element.removeEventListener('click', this.scrollEvent);
|
private parse() {
|
||||||
element.addEventListener('click', this.scrollEvent);
|
const specialElements: HTMLCollection = document.getElementsByClassName('href');
|
||||||
}
|
for (let i = 0; i < specialElements.length; i++) {
|
||||||
}
|
const element = specialElements.item(i);
|
||||||
|
element.removeEventListener('click', this.scrollEvent);
|
||||||
|
element.addEventListener('click', this.scrollEvent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue