113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
|
||
import {Annotation, AnnotationService} from "./annotation.service";
|
||
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||
|
||
@Component({
|
||
selector: 'b2note',
|
||
template: `
|
||
<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>
|
||
<ul 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-auto">{{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, urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
|
||
<li *ngIf="urlSize < annotation.urls.length"><a (click)="urlSize = annotation.urls.length">+ {{annotation.urls.length - 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-default" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
|
||
</div>
|
||
</div>
|
||
<div [class.uk-hidden]="!visible" class="widget">
|
||
<div 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>
|
||
</div>`,
|
||
styleUrls: ['annotation.css']
|
||
})
|
||
export class AnnotationComponent implements OnInit, OnDestroy {
|
||
|
||
@Input()
|
||
public landingInfo: ResultLandingInfo = null;
|
||
@Input()
|
||
public id: string = null;
|
||
@Input()
|
||
public properties: EnvProperties;
|
||
public url: string = null;
|
||
public pid: string = null;
|
||
public keywords: string[] = [];
|
||
public visible: boolean = false;
|
||
public annotations: Annotation[] = [];
|
||
public annotationSize: number = 10;
|
||
public visibleAnnotations: number;
|
||
public urlSize: number = 3;
|
||
|
||
constructor(private annotationService: AnnotationService) {
|
||
}
|
||
|
||
ngOnInit(): void {
|
||
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);
|
||
}
|
||
this.pid = this.url;
|
||
this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
|
||
this.annotations = annotations;
|
||
console.log(this.annotations);
|
||
});
|
||
}
|
||
}
|
||
|
||
ngOnDestroy(): void {
|
||
}
|
||
|
||
public toggleAnnotation(event) {
|
||
if (this.visible) {
|
||
event.preventDefault();
|
||
}
|
||
this.visible = !this.visible;
|
||
}
|
||
} |