openaire-library/landingPages/landing-utils/publishedIn.component.ts

71 lines
2.7 KiB
TypeScript
Raw Normal View History

import {Component, Input, ElementRef} from '@angular/core';
@Component({
selector: 'publishedIn',
template: `
<dl class="uk-description-list-line">
<dt class="title">Published in</dt>
<dd class="line" *ngFor="let key of getKeys(publishedIn) let i=index">
<div *ngIf="i<5 || showAll" class="{{publishedIn.get(key)['bestAccessMode']}}">
<span [class]="publishedIn.get(key)['url'].length > 0 ? 'custom-external custom-icon' : ''">
<span *ngIf="publishedIn.get(key)['url'].length > 1">
{{key}}
<span *ngFor="let url of publishedIn.get(key)['url']; let i=index">
<a href="{{url}}" target="_blank"
[attr.uk-tooltip]="publishedIn.get(key)['accessMode'][i] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="publishedIn.get(key)['accessMode'][i]">
[{{i+1}}]
</a>
</span>
</span>
<a *ngIf="publishedIn.get(key)['url'].length == 1"
href="{{publishedIn.get(key)['url']}}"
target="_blank"
[attr.uk-tooltip]="publishedIn.get(key)['bestAccessMode'] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="publishedIn.get(key)['bestAccessMode']">
{{key}}
</a>
<span *ngIf="publishedIn.get(key)['url'].length == 0"
[attr.uk-tooltip]="publishedIn.get(key)['bestAccessMode'] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
[title]="publishedIn.get(key)['bestAccessMode']">
{{key}}
</span>
</span>
</div>
</dd>
<dd *ngIf="showAll" class="uk-text-right">
<a class="uk-text-muted" (click)="showAll = !showAll; scroll()">
View less
</a>
</dd>
<dd *ngIf="!showAll && publishedIn.size > 5">...</dd>
<dd *ngIf="!showAll && publishedIn.size > 5" class="uk-text-right">
<a class="uk-text-muted" (click)="showAll = !showAll;">
View more
</a>
</dd>
</dl>
`
})
export class PublishedInComponent {
//key is name
@Input() publishedIn: Map<string, {"url": string[], "accessMode": string[], "bestAccessMode": string}>;
public showAll: boolean = false;
constructor (private element: ElementRef) {}
ngOnInit() {}
public scroll() {
console.info("scroll into view");
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
public getKeys( map) {
return Array.from(map.keys());
}
}