openaire-library/landingPages/annotation/annotation.component.ts

172 lines
6.6 KiB
TypeScript
Raw Normal View History

import {Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {Annotation, AnnotationService} from "./annotation.service";
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {UserManagementService} from "../../services/user-management.service";
import {COOKIE} from "../../login/utils/helper.class";
import {Subscriber} from "rxjs";
@Component({
selector: 'b2note',
template: `
<div class="sideInfoTitle uk-margin-small-bottom">Annotations</div>
<div class="b2note">
<form ngNoForm *ngIf="pid && user"
[action]="properties.b2noteAPIURL + 'widget'"
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">
<!--URL of the record contents for downloading-->
<input
type="hidden"
name="subject_tofeed"
[value]="pid">
<!--PID of the annotated record-->
<input
type="hidden"
name="pid_tofeed"
[value]="pid">
<!--URL of the record contents for downloading-->
<button class="uk-flex uk-flex-middle uk-button"
(click)="toggleAnnotation($event)"
type="submit"
title="Click to annotate this page using B2Note.">
<img src="assets/common-assets/b2note.png" width="48" height="24">
<span>add annotation</span>
</button>
</form>
<div *ngIf="!pid || !user">
<button class="uk-flex uk-flex-middle disabled"
[title]="!pid?'Annotations are only available for resources with a PID (persistent identifier) like DOI, handle, PMID':
'Annotations are only available for logged in users'">
<img src="assets/common-assets/b2note.png" width="48" height="24">
<span>add annotation</span>
</button>
</div>
<ul *ngIf="annotations" class="uk-list uk-list-divider">
<li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">
<div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
<div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div>
<ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
<li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
<li *ngIf="annotation.urlSize < annotation.urls.length"><a (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}} more</a></li>
</ul>
</li>
</ul>
<div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
<button class="uk-button uk-button-primary" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
</div>
</div>
<div [class.uk-hidden]="!visible">
<div class="widget-container" cdkDrag>
<!--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 #iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
</iframe>
</div>
</div>`,
styleUrls: ['annotation.css']
})
export class AnnotationComponent implements OnInit, OnDestroy {
@Input()
public landingInfo: ResultLandingInfo = null;
@Input()
public id: string = null;
public properties: EnvProperties = properties;
public url: string = null;
public pid: string = null;
public keywords: string[] = [];
public visible: boolean = false;
public annotations: Annotation[] = [];
public annotationSize: number = 3;
public user;
public visibleAnnotations: number;
@ViewChild('iframe') iframe: ElementRef;
private subscriptions: any[] = [];
constructor(private annotationService: AnnotationService,
private userManagementService: UserManagementService) {
}
@HostListener('window:message', ['$event'])
public onChange(event) {
if(this.properties.b2noteAPIURL.includes(event.origin)) {
if(event.data === "B2NOTE loaded") {
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
let token = COOKIE.getCookie('AccessToken');
this.iframe.nativeElement.contentWindow.postMessage({token: token}, this.properties.b2noteAPIURL);
}));
} else {
this.getAnnotations();
}
}
}
ngOnInit(): void {
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
}));
this.visibleAnnotations = this.annotationSize;
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 && 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];
}
}
}
if(this.pid) {
this.getAnnotations();
}
}
}
private clearSubscriptions() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
this.subscriptions = [];
}
private getAnnotations() {
this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => {
this.annotations = annotations;
this.annotations.forEach(annotation => {
annotation.urlSize = 3;
});
});
}
ngOnDestroy(): void {
this.clearSubscriptions();
}
public toggleAnnotation(event) {
if (this.visible) {
event.preventDefault();
}
this.visible = !this.visible;
}
}