Revision 60187
Added by Konstantinos Triantafyllou over 3 years ago
| annotation.component.ts | ||
|---|---|---|
| 1 |
import {Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
|
|
| 1 |
import {
|
|
| 2 |
Component, |
|
| 3 |
ElementRef, |
|
| 4 |
EventEmitter, |
|
| 5 |
HostListener, |
|
| 6 |
Input, |
|
| 7 |
OnDestroy, |
|
| 8 |
OnInit, |
|
| 9 |
Output, |
|
| 10 |
ViewChild |
|
| 11 |
} from "@angular/core"; |
|
| 2 | 12 |
import {Annotation, AnnotationService} from "./annotation.service";
|
| 3 | 13 |
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
| 4 | 14 |
import {EnvProperties} from "../../utils/properties/env-properties";
|
| 5 | 15 |
import {properties} from "../../../../environments/environment";
|
| 6 | 16 |
import {UserManagementService} from "../../services/user-management.service";
|
| 7 |
import {COOKIE} from "../../login/utils/helper.class";
|
|
| 17 |
import {COOKIE, User} from "../../login/utils/helper.class";
|
|
| 8 | 18 |
import {Subscriber} from "rxjs";
|
| 9 | 19 |
|
| 10 | 20 |
@Component({
|
| ... | ... | |
| 12 | 22 |
template: ` |
| 13 | 23 |
<div class="sideInfoTitle uk-margin-small-bottom">Annotations</div> |
| 14 | 24 |
<div class="b2note"> |
| 15 |
<form ngNoForm *ngIf="pid && user" |
|
| 25 |
<form #form ngNoForm *ngIf="pid && user"
|
|
| 16 | 26 |
[action]="properties.b2noteAPIURL + 'widget'" |
| 17 | 27 |
method="post" |
| 18 | 28 |
target="b2note_iframe" |
| ... | ... | |
| 27 | 37 |
type="hidden" |
| 28 | 38 |
name="pid_tofeed" |
| 29 | 39 |
[value]="pid"> |
| 30 |
<!--URL of the record contents for downloading--> |
|
| 31 |
<button class="uk-flex uk-flex-middle uk-button" |
|
| 32 |
(click)="toggleAnnotation($event)" |
|
| 33 |
type="submit" |
|
| 34 |
title="Click to annotate this page using B2Note."> |
|
| 35 |
<img src="assets/common-assets/b2note.png" width="48" height="24"> |
|
| 36 |
<span>add annotation</span> |
|
| 37 |
</button> |
|
| 38 | 40 |
</form> |
| 39 |
<div *ngIf="!pid || !user"> |
|
| 40 |
<button class="uk-flex uk-flex-middle disabled" |
|
| 41 |
[title]="!pid?'Annotations are only available for resources with a PID (persistent identifier) like DOI, handle, PMID': |
|
| 42 |
'Annotations are only available for logged in users'"> |
|
| 43 |
<img src="assets/common-assets/b2note.png" width="48" height="24"> |
|
| 44 |
<span>add annotation</span> |
|
| 45 |
</button> |
|
| 46 |
</div> |
|
| 47 |
<div *ngIf="loading" class="loading-gif uk-margin-medium-top"></div> |
|
| 41 |
<loading *ngIf="loading" class="uk-margin-medium-top"></loading> |
|
| 48 | 42 |
<ul *ngIf="annotations && !loading" class="uk-list uk-list-divider"> |
| 49 | 43 |
<li *ngFor="let annotation of annotations.slice(0, visibleAnnotations); let i=index" uk-grid |
| 50 | 44 |
class="uk-flex uk-flex-top uk-margin-remove-left"> |
| ... | ... | |
| 54 | 48 |
<ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.targets"> |
| 55 | 49 |
<li *ngFor="let target of annotation.targets.slice(0, annotation.targetSize)"> |
| 56 | 50 |
<a *ngIf="target.url" [href]="target.url" target="_blank">{{target.id}}</a>
|
| 57 |
<a *ngIf="!target.url" routerLink="/search/advanced/research-outcomes" [queryParams]="searchPid(target.id)">{{target.id}}</a>
|
|
| 51 |
<a *ngIf="!target.url" routerLink="/search/advanced/research-outcomes" |
|
| 52 |
[queryParams]="searchPid(target.id)">{{target.id}}</a>
|
|
| 58 | 53 |
</li> |
| 59 | 54 |
<li *ngIf="annotation.targetSize < annotation.targets.length"><a |
| 60 | 55 |
(click)="open(i)">+ {{annotation.targets.length - annotation.targetSize}}
|
| ... | ... | |
| 95 | 90 |
public user; |
| 96 | 91 |
public visibleAnnotations: number; |
| 97 | 92 |
public loading: boolean = false; |
| 93 |
public submitted: boolean = false; |
|
| 94 |
@Output() |
|
| 95 |
public userEmitter: EventEmitter<User> = new EventEmitter<User>(); |
|
| 96 |
@Output() |
|
| 97 |
public pidEmitter: EventEmitter<string> = new EventEmitter<string>(); |
|
| 98 | 98 |
@ViewChild('iframe') iframe: ElementRef;
|
| 99 |
@ViewChild('form') form: ElementRef;
|
|
| 99 | 100 |
private subscriptions: any[] = []; |
| 100 | 101 |
|
| 101 | 102 |
constructor(private annotationService: AnnotationService, |
| ... | ... | |
| 117 | 118 |
ngOnInit(): void {
|
| 118 | 119 |
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
| 119 | 120 |
this.user = user; |
| 121 |
this.userEmitter.emit(this.user); |
|
| 120 | 122 |
})); |
| 121 | 123 |
this.visibleAnnotations = this.annotationSize; |
| 122 | 124 |
if (typeof window !== "undefined") {
|
| ... | ... | |
| 139 | 141 |
if (this.pid) {
|
| 140 | 142 |
this.getAnnotations(); |
| 141 | 143 |
} |
| 144 |
this.pidEmitter.emit(this.pid); |
|
| 142 | 145 |
} |
| 143 | 146 |
} |
| 144 | 147 |
|
| 148 |
public get enabled(): boolean {
|
|
| 149 |
return this.pid && this.user; |
|
| 150 |
} |
|
| 151 |
|
|
| 145 | 152 |
private clearSubscriptions() {
|
| 146 | 153 |
this.subscriptions.forEach(subscription => {
|
| 147 | 154 |
if (subscription instanceof Subscriber) {
|
| ... | ... | |
| 196 | 203 |
}); |
| 197 | 204 |
} |
| 198 | 205 |
|
| 199 |
public searchPid(pid: string): { [k: string]: any;} {
|
|
| 206 |
public searchPid(pid: string): { [k: string]: any; } {
|
|
| 200 | 207 |
return {
|
| 201 | 208 |
f0: 'pid', |
| 202 | 209 |
fv0: pid, |
| ... | ... | |
| 204 | 211 |
} |
| 205 | 212 |
} |
| 206 | 213 |
|
| 207 |
ngOnDestroy() |
|
| 208 |
: |
|
| 209 |
void {
|
|
| 214 |
ngOnDestroy() {
|
|
| 210 | 215 |
this.clearSubscriptions(); |
| 211 | 216 |
} |
| 212 | 217 |
|
| 213 |
public |
|
| 214 |
|
|
| 215 | 218 |
toggleAnnotation(event) {
|
| 216 | 219 |
if (this.visible) {
|
| 217 | 220 |
event.preventDefault(); |
| 221 |
} else if(!this.submitted) {
|
|
| 222 |
this.form.nativeElement.submit(); |
|
| 223 |
this.submitted = true; |
|
| 218 | 224 |
} |
| 219 | 225 |
this.visible = !this.visible; |
| 220 | 226 |
} |
| 221 | 227 |
|
| 222 | 228 |
open(i: number) {
|
| 223 | 229 |
this.annotations.forEach((annotation, index) => {
|
| 224 |
if(index != i) {
|
|
| 230 |
if (index != i) {
|
|
| 225 | 231 |
annotation.targetSize = 3; |
| 226 | 232 |
} else {
|
| 227 | 233 |
annotation.targetSize = annotation.targets.length |
Also available in: Unified diff
[Library | Trunk]: Change b2note button position and change condition if b2note url propert exists