2021-09-24 20:52:14 +02:00
|
|
|
import { HttpClient } from '@angular/common/http';
|
|
|
|
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
2020-12-10 14:45:55 +01:00
|
|
|
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
2023-05-02 11:56:09 +02:00
|
|
|
import { Router } from '@angular/router';
|
2023-10-18 09:31:57 +02:00
|
|
|
import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type';
|
2021-09-24 20:52:14 +02:00
|
|
|
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
2020-12-10 10:34:01 +01:00
|
|
|
import { LanguageService } from '@app/core/services/language/language.service';
|
2020-12-14 18:28:13 +01:00
|
|
|
import { MatomoService } from '@app/core/services/matomo/matomo-service';
|
2023-10-18 09:31:57 +02:00
|
|
|
import { SupportiveMaterialService } from '@app/core/services/supportive-material/supportive-material.service';
|
2021-09-24 20:52:14 +02:00
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
2023-05-02 11:56:09 +02:00
|
|
|
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
|
2020-12-31 15:34:36 +01:00
|
|
|
import { interval, Subject } from 'rxjs';
|
2021-09-24 20:52:14 +02:00
|
|
|
import { takeUntil } from 'rxjs/operators';
|
2020-02-12 17:24:42 +01:00
|
|
|
|
|
|
|
@Component({
|
2020-12-10 14:45:55 +01:00
|
|
|
selector: 'app-user-guide-content',
|
|
|
|
templateUrl: './user-guide-content.component.html',
|
|
|
|
styleUrls: ['./user-guide-content.component.scss']
|
2020-02-12 17:24:42 +01:00
|
|
|
})
|
2020-12-31 15:34:36 +01:00
|
|
|
export class UserGuideContentComponent extends BaseComponent implements OnInit {
|
|
|
|
readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY
|
2020-02-12 17:24:42 +01:00
|
|
|
|
|
|
|
guideHTML: any;
|
2020-12-10 14:45:55 +01:00
|
|
|
guideHTMLUrl: SafeResourceUrl;
|
2020-12-11 15:53:22 +01:00
|
|
|
sanitizedGuideUrl: any;
|
2020-02-13 17:18:54 +01:00
|
|
|
private scrollEvent: EventListener;
|
2020-12-31 15:34:36 +01:00
|
|
|
private tocScrollEvent: EventListener;
|
|
|
|
private _transformed: Subject<boolean> = new Subject();
|
|
|
|
private _parsed: Subject<boolean> = new Subject();
|
|
|
|
|
2021-09-24 20:52:14 +02:00
|
|
|
@ViewChild('guide') guide: ElementRef;
|
2020-02-12 17:24:42 +01:00
|
|
|
|
2020-12-10 14:45:55 +01:00
|
|
|
constructor(
|
2023-10-18 09:31:57 +02:00
|
|
|
private supportiveMaterialService: SupportiveMaterialService,
|
2020-12-10 14:49:34 +01:00
|
|
|
private sanitizer: DomSanitizer,
|
2020-12-14 18:28:13 +01:00
|
|
|
private languageService: LanguageService,
|
|
|
|
private httpClient: HttpClient,
|
2020-12-31 15:34:36 +01:00
|
|
|
private matomoService: MatomoService,
|
2023-05-02 11:56:09 +02:00
|
|
|
private configurationService: ConfigurationService,
|
|
|
|
private translate: TranslateService,
|
|
|
|
private router: Router
|
2020-12-10 14:45:55 +01:00
|
|
|
) { super(); }
|
2020-02-12 17:24:42 +01:00
|
|
|
|
2020-12-10 14:45:55 +01:00
|
|
|
ngOnInit() {
|
2020-12-14 18:28:13 +01:00
|
|
|
this.matomoService.trackPageView('User Guide Content');
|
2020-12-10 14:45:55 +01:00
|
|
|
this.scrollEvent = ((ev) => this.scroll(ev));
|
2020-12-31 15:34:36 +01:00
|
|
|
this.tocScrollEvent = ((ev) => {
|
|
|
|
this.activeToc(ev);
|
|
|
|
this.scroll(ev);
|
|
|
|
});
|
2023-05-02 11:56:09 +02:00
|
|
|
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
|
2023-05-02 12:48:07 +02:00
|
|
|
this.router.navigate(['/reload'], { skipLocationChange: true }).then(() => this.router.navigate(['/user-guide']));
|
2023-05-02 11:56:09 +02:00
|
|
|
});
|
2024-02-19 16:28:46 +01:00
|
|
|
this.supportiveMaterialService.getPayload(SupportiveMaterialFieldType.UserGuide, this.languageService.getCurrentLanguage())
|
2020-12-10 14:45:55 +01:00
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
.subscribe(response => {
|
|
|
|
const blob = new Blob([response.body], { type: 'text/html' });
|
2020-12-31 15:34:36 +01:00
|
|
|
if (this.useInnerHTML) {
|
|
|
|
this.readBlob(blob);
|
|
|
|
} else {
|
|
|
|
this.guideHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl((window.URL ? URL : webkitURL).createObjectURL(blob));
|
|
|
|
//GK: In case the app is in localhost (dev/debug build) apply the following transformation
|
2021-04-07 18:19:22 +02:00
|
|
|
// in order to show the user guide's images
|
|
|
|
// if (this.guideHTMLUrl && this.configurationService.app.includes('localhost')) {
|
|
|
|
// interval(1000).pipe(takeUntil(this._transformed)).subscribe(() => this.transform());
|
|
|
|
// }
|
2020-12-31 15:34:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// this.guideHTML = this.sanitizer.sanitize(SecurityContext.HTML, blob);
|
2020-12-11 15:53:22 +01:00
|
|
|
// this.sanitizedGuideUrl = this.sanitizer.sanitize(SecurityContext.URL, this.guideHTMLUrl);
|
|
|
|
// console.log(this.guideHTMLUrl);
|
2020-12-10 14:45:55 +01:00
|
|
|
});
|
|
|
|
}
|
2020-02-12 17:24:42 +01:00
|
|
|
|
2020-12-10 14:45:55 +01:00
|
|
|
readBlob(blob: Blob) {
|
|
|
|
const fr = new FileReader();
|
|
|
|
fr.onload = ev => {
|
2020-12-31 15:34:36 +01:00
|
|
|
const HTMLstring = fr.result as string;
|
|
|
|
this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(HTMLstring);
|
|
|
|
this.addScripts(HTMLstring);
|
|
|
|
if (this.guideHTML) {
|
|
|
|
interval(1000).pipe(takeUntil(this._transformed)).subscribe(() => this.transform());
|
|
|
|
interval(1000).pipe(takeUntil(this._parsed)).subscribe(() => this.parse());
|
|
|
|
}
|
2020-12-10 14:45:55 +01:00
|
|
|
};
|
|
|
|
fr.readAsText(blob);
|
|
|
|
}
|
|
|
|
|
2020-12-31 15:34:36 +01:00
|
|
|
activeToc(ev: Event) {
|
|
|
|
const current = document.getElementsByClassName('active');
|
|
|
|
if (current.length > 0) {
|
|
|
|
current[0].classList.remove('active');
|
|
|
|
}
|
|
|
|
(ev.currentTarget as Element).classList.add('active');
|
|
|
|
}
|
|
|
|
|
2020-12-10 14:45:55 +01:00
|
|
|
scroll(ev: Event) {
|
2020-12-31 15:34:36 +01:00
|
|
|
document.getElementById((ev.currentTarget as Element).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
|
2020-12-10 14:45:55 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
private parse() {
|
2020-12-31 15:34:36 +01:00
|
|
|
const specialElements: HTMLCollection = document.getElementsByTagName('a');
|
2020-12-10 14:45:55 +01:00
|
|
|
for (let i = 0; i < specialElements.length; i++) {
|
2021-09-24 20:52:14 +02:00
|
|
|
const element = specialElements.item(i) as HTMLAnchorElement;
|
|
|
|
if (element.href.includes('#')) {
|
2020-12-31 15:34:36 +01:00
|
|
|
this.hrefToPath(element);
|
|
|
|
element.removeEventListener('click', this.scrollEvent);
|
|
|
|
element.addEventListener('click', this.scrollEvent);
|
|
|
|
}
|
|
|
|
if (!this._parsed.isStopped) {
|
|
|
|
this._parsed.next(true);
|
|
|
|
this._parsed.complete();
|
|
|
|
}
|
2020-12-10 14:45:55 +01:00
|
|
|
}
|
2020-12-31 15:34:36 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
private addScripts(HTMLString: string) {
|
|
|
|
const fragment = document.createRange().createContextualFragment(HTMLString);
|
|
|
|
this.guide.nativeElement.appendChild(fragment);
|
|
|
|
}
|
|
|
|
|
|
|
|
transform() {
|
|
|
|
if (this.useInnerHTML) {
|
|
|
|
const tocElements = document.getElementsByClassName('nav-link');
|
|
|
|
for (let i = 0; i < tocElements.length; i++) {
|
|
|
|
const href = (tocElements[i] as HTMLAnchorElement).href;
|
|
|
|
if (href.includes('#')) {
|
|
|
|
this.hrefToPath(tocElements[i] as HTMLAnchorElement);
|
|
|
|
tocElements[i].addEventListener('click', this.tocScrollEvent);
|
|
|
|
tocElements[i].classList.add('tocElement');
|
|
|
|
if (!this._transformed.isStopped) {
|
|
|
|
this._transformed.next(true);
|
|
|
|
this._transformed.complete();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
const userguide = document.getElementById('userguide') as HTMLIFrameElement;
|
|
|
|
const images = userguide.contentWindow.document.getElementsByTagName('img');
|
|
|
|
for (let i = 0; i < images.length; i++) {
|
|
|
|
const image = images[i];
|
|
|
|
image.src = `${this.configurationService.app}${image.src}`;
|
|
|
|
if (!this._transformed.isStopped) {
|
|
|
|
this._transformed.next(true);
|
|
|
|
this._transformed.complete();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private hrefToPath(element: HTMLAnchorElement) {
|
|
|
|
const href = element.href;
|
|
|
|
const hashtagIndex = href.lastIndexOf('#');
|
|
|
|
element.removeAttribute('href');
|
|
|
|
element.setAttribute('path', href.slice(hashtagIndex + 1));
|
2020-12-10 14:45:55 +01:00
|
|
|
}
|
2020-02-12 17:24:42 +01:00
|
|
|
|
2021-04-07 18:19:22 +02:00
|
|
|
|
2021-09-24 20:52:14 +02:00
|
|
|
onIFrameLoad(iframe: HTMLIFrameElement) {
|
|
|
|
|
|
|
|
try {
|
2021-04-07 18:19:22 +02:00
|
|
|
// const contentDocument = iframe.contentDocument;
|
|
|
|
// const URI = contentDocument.URL;
|
|
|
|
// const refs = contentDocument.getElementsByTagName('a');
|
|
|
|
// const navLinks:HTMLAnchorElement[] = [];//only navigation links
|
|
|
|
// for(let i =0; i<refs.length;i++){
|
|
|
|
// const ref = refs[i];
|
|
|
|
// if(ref.classList.contains('nav-link')){
|
|
|
|
// navLinks.push(ref);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// navLinks.forEach(a=>a.href = URI+a.hash);
|
|
|
|
|
2021-09-24 20:52:14 +02:00
|
|
|
const images = iframe.contentWindow.document.getElementsByTagName('img');
|
2021-04-07 18:19:22 +02:00
|
|
|
|
2021-09-24 20:52:14 +02:00
|
|
|
for (let i = 0; i < images.length; i++) {
|
2021-04-07 18:19:22 +02:00
|
|
|
const tempDiv = document.createElement('div');
|
|
|
|
const currentImage = images.item(i);
|
|
|
|
tempDiv.innerHTML = currentImage.outerHTML.trim();
|
|
|
|
currentImage.src = (tempDiv.firstChild as HTMLImageElement).src;
|
|
|
|
}
|
|
|
|
|
|
|
|
// const elem = tempDiv.firstChild as HTMLImageElement;
|
|
|
|
// console.log('eleme', elem);
|
|
|
|
// firstimage.src = elem.src;
|
|
|
|
|
2021-09-24 20:52:14 +02:00
|
|
|
} catch {
|
2021-04-07 18:19:22 +02:00
|
|
|
console.warn('Could not find contentDocument');
|
|
|
|
}
|
|
|
|
}
|
2020-02-12 17:24:42 +01:00
|
|
|
}
|