MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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

This commit is contained in:
Diamantis Tziotzios 2021-01-22 10:32:21 +02:00
parent 3a27f66dc5 c56b7c59ed
commit 148bba67ce
12 changed files with 128 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

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

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

@ -11,13 +11,18 @@
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen fullpage',
'insertdatetime media table paste code help wordcount importcss'
'searchreplace visualblocks fullscreen fullpage',
'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>

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

@ -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(

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

@ -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>

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

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

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

@ -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);
this.parse();
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());
}
};
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));
}
}

4
user-guide/UserGuide_de.html
View File

@ -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>

4
user-guide/UserGuide_en.html
View File

@ -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>

4
user-guide/UserGuide_es.html
View File

@ -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>

4
user-guide/UserGuide_gr.html
View File

@ -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>

4
user-guide/UserGuide_sk.html
View File

@ -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>

4
user-guide/UserGuide_tr.html
View File

@ -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>