2020-01-28 15:09:32 +01:00
|
|
|
|
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({
|
2020-03-27 11:06:09 +01:00
|
|
|
|
selector: 'b2note',
|
|
|
|
|
template: `
|
2020-03-30 10:45:08 +02:00
|
|
|
|
<div class="sideInfoTitle uk-margin-small-bottom">Annotations</div>
|
|
|
|
|
<div class="b2note">
|
|
|
|
|
<form ngNoForm
|
|
|
|
|
action="https://b2note-dev.bsc.es/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]="url">
|
|
|
|
|
<!--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"
|
|
|
|
|
(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>
|
2020-03-27 11:06:09 +01:00
|
|
|
|
<div [class.uk-hidden]="!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']
|
2020-01-28 15:09:32 +01:00
|
|
|
|
})
|
|
|
|
|
export class AnnotationComponent implements OnInit, OnDestroy {
|
2020-03-27 11:06:09 +01:00
|
|
|
|
|
|
|
|
|
@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];
|
|
|
|
|
}
|
2020-01-28 15:09:32 +01:00
|
|
|
|
}
|
2020-03-27 11:06:09 +01:00
|
|
|
|
} else {
|
|
|
|
|
this.pid = id;
|
|
|
|
|
}
|
|
|
|
|
console.log(this.pid);
|
|
|
|
|
console.log(this.url);
|
2020-01-28 15:09:32 +01:00
|
|
|
|
}
|
2020-03-27 11:06:09 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngOnDestroy(): void {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public toggleAnnotation(event) {
|
|
|
|
|
if (this.visible) {
|
2020-03-30 10:45:08 +02:00
|
|
|
|
event.preventDefault();
|
2020-01-28 15:09:32 +01:00
|
|
|
|
}
|
2020-03-27 11:06:09 +01:00
|
|
|
|
this.visible = !this.visible;
|
|
|
|
|
}
|
2020-01-28 15:09:32 +01:00
|
|
|
|
}
|