Merge branch 'Development' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into Development

dmp-frontend/src/app/ui/navbar/navbar.component.scss

@@ -43,6 +43,7 @@ $mat-card-header-size: 40px !default;
   color: #000000;
   opacity: 1;
   cursor: pointer;
+  text-decoration: none !important;
 }
 
 .faq-title:hover,

dmp-frontend/src/app/ui/user-guide-editor/user-guide-editor.component.html

@@ -11,13 +11,18 @@
 						menubar: true,
 						plugins: [
 						  'advlist autolink lists link image charmap print preview anchor',
-						  'searchreplace visualblocks code fullscreen fullpage',
+						  'searchreplace visualblocks fullscreen fullpage',
-						  'insertdatetime media table paste code help wordcount importcss'
+						  'insertdatetime media table paste code help wordcount importcss ',
+						  'codesample toc visualchars'
 						],
+						extended_valid_elements: '*[*]',
+						forced_root_block: '',
+						valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
+						save_enablewhendirty: false,
 						toolbar:
 						  'undo redo | formatselect | bold italic backcolor | \
 						  alignleft aligncenter alignright alignjustify | \
-						  bullist numlist outdent indent | code | preview | removeformat | help'
+						  bullist numlist outdent indent | code codesample | searchreplace | preview | removeformat | help'
 					  }" formControlName="html"></editor>
 				</mat-card-content>
 			</mat-card>

dmp-frontend/src/app/ui/user-guide-editor/user-guide-editor.component.ts

@@ -66,7 +66,7 @@ export class UserGuideEditorComponent extends BaseComponent implements OnInit {
 	const reader = new FileReader();
 	reader.addEventListener('load', () => {
 		let result = this.parseText(reader.result as string);
-		result = result.replace(/class="href" path="/g, 'href="#');
+		//result = result.replace(/class="href" path="/g, 'href="#');
 	 	this.formGroup.get('html').patchValue(result);
   }, false);
 	reader.readAsText(data);
@@ -74,7 +74,7 @@ export class UserGuideEditorComponent extends BaseComponent implements OnInit {
 
   submit() {
 	  let result = this.parseText(this.formGroup.get('html').value);
-	  result = result.replace(/href="#/g, 'class="href" path="');
+	  //result = result.replace(/href="#/g, 'class="href" path="');
 	  this.formGroup.get('html').patchValue(result);
 	this.userGuideService.updateUserGuide(this.formGroup.value).pipe(takeUntil(this._destroyed))
 	.subscribe(

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html

@@ -1,11 +1,6 @@
-<!-- <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>
+		<iframe *ngIf="!useInnerHTML && guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl"></iframe>
+		<span #guide *ngIf="useInnerHTML" id='userguide' [innerHTML]="guideHTML"></span>
 	</div>
 </div>

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss

@@ -25,3 +25,7 @@
 	margin: 0px;
 	border: none;
 }
+
+:host :hover ::ng-deep .tocElement {
+	cursor: pointer !important;
+}

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts

@@ -1,72 +1,152 @@
-import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, ViewEncapsulation, ViewChild, AfterContentInit, AfterViewInit } from '@angular/core';
 import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/internal/operators/takeUntil';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { LanguageService } from '@app/core/services/language/language.service';
-import { SecurityContext } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
+import { ElementRef } from '@angular/core';
+import { interval, Subject } from 'rxjs';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 
 @Component({
 	selector: 'app-user-guide-content',
 	templateUrl: './user-guide-content.component.html',
 	styleUrls: ['./user-guide-content.component.scss']
 })
-export class UserGuideContentComponent extends BaseComponent implements OnInit, AfterViewChecked {
+export class UserGuideContentComponent extends BaseComponent implements OnInit {
-
+	readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY
 
 	guideHTML: any;
 	guideHTMLUrl: SafeResourceUrl;
 	sanitizedGuideUrl: any;
 	private scrollEvent: EventListener;
+	private tocScrollEvent: EventListener;
+	private _transformed: Subject<boolean> = new Subject();
+	private _parsed: Subject<boolean> = new Subject();
+
+	@ViewChild('guide', {static: false}) guide: ElementRef;
 
 	constructor(
 		private userGuideService: UserGuideService,
 		private sanitizer: DomSanitizer,
 		private languageService: LanguageService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private configurationService: ConfigurationService
 	) { super(); }
 
 	ngOnInit() {
 		this.matomoService.trackPageView('User Guide Content');
 		this.scrollEvent = ((ev) => this.scroll(ev));
+		this.tocScrollEvent = ((ev) => {
+			this.activeToc(ev);
+			this.scroll(ev);
+		});
 		this.userGuideService.getUserGuide(this.languageService.getCurrentLanguage())
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'text/html' });
+				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
+					//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());
+					}
+				}
+
+				// this.guideHTML = this.sanitizer.sanitize(SecurityContext.HTML, blob);
 				// this.sanitizedGuideUrl = this.sanitizer.sanitize(SecurityContext.URL, this.guideHTMLUrl);
 				// console.log(this.guideHTMLUrl);
 			});
 	}
 
-	ngAfterViewChecked(): void {
-		this.parse();
-	}
-
 	readBlob(blob: Blob) {
 		const fr = new FileReader();
 		fr.onload = ev => {
-			this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(fr.result as string);
+			const HTMLstring = fr.result as string;
-			this.parse();
+			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());
+			}
 		};
 		fr.readAsText(blob);
 	}
 
+	activeToc(ev: Event) {
+		const current = document.getElementsByClassName('active');
+		if (current.length > 0) {
+			current[0].classList.remove('active');
+		}
+		(ev.currentTarget as Element).classList.add('active');
+	}
+
 	scroll(ev: Event) {
-		document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
+		document.getElementById((ev.currentTarget as Element).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
 	}
 
 	private parse() {
-		const specialElements: HTMLCollection = document.getElementsByClassName('href');
+		const specialElements: HTMLCollection = document.getElementsByTagName('a');
 		for (let i = 0; i < specialElements.length; i++) {
-			const element = specialElements.item(i);
+			const element = specialElements.item(i) as  HTMLAnchorElement;
+			if(element.href.includes('#')) {
+				this.hrefToPath(element);
 				element.removeEventListener('click', this.scrollEvent);
 				element.addEventListener('click', this.scrollEvent);
 			}
+			if (!this._parsed.isStopped) {
+				this._parsed.next(true);
+				this._parsed.complete();
+			}
+		}
+
+	}
+
+	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));
 	}
 
 }

user-guide/UserGuide_de.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>

user-guide/UserGuide_en.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>

user-guide/UserGuide_es.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>

user-guide/UserGuide_gr.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>

user-guide/UserGuide_sk.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>

user-guide/UserGuide_tr.html

@@ -2047,7 +2047,7 @@
                             <p class="c4">&nbsp;</p>
                         </ol>
                         <li class="c11">
-                            <h2 id="h.69igrhrcw0yl" style="display: inline;"><span>Navigation</span></h2>
+                            <h2 id="h.69igrhrcw0y2" style="display: inline;"><span>Navigation</span></h2>
                         </li>
                         <ol class="c0">
                             <li class="c6">
@@ -2138,7 +2138,7 @@
                                         <td class="c16" colspan="1" rowspan="1">
                                             <p class="c9"><span class="c3 c2">Main menu - logged in</span></p>
                                             <p class="c9 c8">&nbsp;</p>
-                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="splash/assets/user-guide/image8.png" alt="" /></span></p>
+                                            <p class="c9"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 213.00px; height: 510.64px;"><img style="width: 213.00px; height: 515.00px; margin-left: 0.00px; margin-top: -4.36px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="assets/splash/assets/user-guide/image8.png" alt="" /></span></p>
                                             <p class="c9 c8">&nbsp;</p>
                                             <p class="c9"><span class="c2">Home</span><span class="c1">&nbsp; - gets you back to the homepage / dashboard</span></p>
                                             <p class="c9 c8">&nbsp;</p>