[Library | Trunk: Add b2note component and enable it on development mode]

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58025 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-01-28 14:09:32 +00:00
parent 105e67d626
commit 0e8aec9eac
6 changed files with 159 additions and 7 deletions

View File

@ -0,0 +1,94 @@
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {AnnotationService} from "./annotation.service";
import {DomSanitizer} from "@angular/platform-browser";
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
@Component({
selector: 'b2note',
template: `
<form ngNoForm
action="https://b2note.eudat.eu/interface_main.html"
method="post"
target="b2note_iframe"
class="uk-padding-small uk-padding-remove-vertical">
<!--URL of the annotated record-->
<input
type="hidden"
name="recordurl_tofeed"
[value]="url">
<!--PID of the annotated record-->
<input
type="hidden"
name="pid_tofeed"
[value]="pid">
<!--URL of the record contents for downloading-->
<button class="uk-button uk-button-secondary uk-width-1-1"
(click)="toggleAnnotation($event)"
type="submit"
value="Annotate"
title="Click to annotate file using B2Note.">
Annotate
</button>
</form>
<div [class.uk-hidden@s]="!visible" class="widget-container">
<!--Close button, should be bound to hide the widget-->
<button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
<span aria-hidden="true">×</span>
</button>
<!--The glorious iframe with the running app!-->
<iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
</iframe>
</div>`,
styleUrls: ['annotation.css']
})
export class AnnotationComponent implements OnInit, OnDestroy {
@Input()
public landingInfo: ResultLandingInfo = null;
@Input()
public id: string = null;
public url: string = null;
public pid: string = null;
public keywords: string[] = [];
public visible: boolean = false;
constructor(private annotationService: AnnotationService,
private sanitizer: DomSanitizer) {
}
ngOnInit(): void {
if(typeof window !== "undefined") {
let id = this.id;
this.url = window.location.href;
if (this.landingInfo.deletedByInferenceIds) {
id = this.landingInfo.deletedByInferenceIds[0];
this.url = this.url.replace(this.id, id);
}
if (this.landingInfo.identifiers.size > 0) {
if (this.landingInfo.identifiers.get('doi')) {
this.pid = this.landingInfo.identifiers.get('doi')[0];
} else {
const key: string = this.landingInfo.identifiers.keys().next().value;
if (key) {
this.pid = this.landingInfo.identifiers.get(key)[0];
}
}
} else {
this.pid = id;
}
console.log(this.pid);
console.log(this.url);
}
}
ngOnDestroy(): void {
}
public toggleAnnotation(event) {
if(this.visible) {
event.preventDefault()
}
this.visible = !this.visible;
}
}

View File

@ -0,0 +1,30 @@
.widget-container {
position: absolute;
right: 0;
z-index: 1050;
padding: 19px;
margin-bottom: 20px;
box-shadow: black 0 0 32px;
border: 1px solid #e3e3e3;
border-radius: 4px;
outline: 0;
min-height: 20px;
background-color: #f5f5f5;
}
.close {
float: right;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
font-size: 21px;
font-weight: bold;
opacity: 0.2;
}
.b2note-iframe {
width: 100%;
height: 600px;
border: 1px solid #dddddd;
}

View File

@ -0,0 +1,8 @@
import {NgModule} from "@angular/core";
import {AnnotationComponent} from "./annotation.component";
@NgModule({
declarations: [AnnotationComponent],
exports: [AnnotationComponent]
})
export class AnnotationModule {}

View File

@ -0,0 +1,19 @@
import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
@Injectable({
providedIn: "root"
})
export class AnnotationService {
constructor(private http: HttpClient) {
}
getAnnotations(annotation: any): Observable<any> {
return this.http.get('https://b2note.eudat.eu/interface_main.html?recordurl_tofeed=' +
encodeURIComponent(annotation.get('recordurl_tofeed').value) + '&pid_tofeed='
+ encodeURIComponent(annotation.get('pid_tofeed').value));
}
}

View File

@ -368,6 +368,7 @@
</div> </div>
<div class="uk-width-1-3@m uk-width-1-1@s"> <div class="uk-width-1-3@m uk-width-1-1@s">
<b2note *ngIf=" properties.environment === 'development' && resultLandingInfo" [id]="id" [landingInfo]="resultLandingInfo"></b2note>
<div *ngIf="isRouteAvailable('participate/direct-claim') " class=" uk-padding-small"> <div *ngIf="isRouteAvailable('participate/direct-claim') " class=" uk-padding-small">
<button class=" uk-button portal-button uk-width-1-1 "> <button class=" uk-button portal-button uk-width-1-1 ">
<span class="uk-icon"> <span class="uk-icon">
@ -382,7 +383,6 @@
</span> </span>
Link this <span *ngIf="type != 'orp'">{{title.toLowerCase()}}</span><span *ngIf="type == 'orp'">product</span> to... Link this <span *ngIf="type != 'orp'">{{title.toLowerCase()}}</span><span *ngIf="type == 'orp'">product</span> to...
</button> </button>
<div class=" uk-text-center uk-margin-expand uk-padding-small uk-margin-auto default-dropdown " <div class=" uk-text-center uk-margin-expand uk-padding-small uk-margin-auto default-dropdown "
uk-dropdown="mode:click"> uk-dropdown="mode:click">
<div class="uk-grid uk-child-width-1-3 uk-width-large "> <div class="uk-grid uk-child-width-1-3 uk-width-large ">

View File

@ -24,14 +24,15 @@ import {ShowAuthorsModule} from "../../utils/authors/showAuthors.modu
import {HelperModule} from "../../utils/helper/helper.module"; import {HelperModule} from "../../utils/helper/helper.module";
import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module"; import {ResultLandingUtilsModule} from "../landing-utils/resultLandingUtils.module";
import {AlertModalModule} from "../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {AnnotationModule} from "../annotation/annotation.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, LandingModule, SharedModule, RouterModule, CommonModule, FormsModule, LandingModule, SharedModule, RouterModule,
CiteThisModule, PagingModule, IFrameModule, CiteThisModule, PagingModule, IFrameModule,
MetricsModule, AltMetricsModule, ConfigurationServiceModule, Schema2jsonldModule, SEOServiceModule, MetricsModule, AltMetricsModule, ConfigurationServiceModule, Schema2jsonldModule, SEOServiceModule,
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, AnnotationModule
], ],
declarations: [ declarations: [
ResultLandingComponent ResultLandingComponent
], ],