134 lines
6.2 KiB
TypeScript
134 lines
6.2 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
|
|
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
|
|
import {properties} from "../../../../environments/environment";
|
|
import {StringUtils} from '../../utils/string-utils.class';
|
|
import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full-screen-modal.component";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'availableOn',
|
|
template: `
|
|
<ng-container *ngIf="availableOn && availableOn.length > 0">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<ng-container *ngIf="availableOn[0].downloadUrl">
|
|
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
|
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
|
|
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
|
</span>
|
|
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
|
|
<a uk-tooltip="Source" target="_blank"
|
|
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
|
|
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
|
<span>
|
|
<!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
|
|
<icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
|
|
</span>
|
|
</a>
|
|
<div #dropElement uk-drop="mode: click; pos: bottom-left;"
|
|
class="uk-drop download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
|
|
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="(isMobile && usedBy == 'landing')">
|
|
<a class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link" (click)="openAvailableListFsModal()">
|
|
<span uk-tooltip="Source">{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
|
<span>
|
|
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
|
|
</span>
|
|
</a>
|
|
<fs-modal #availableListFsModal classTitle="uk-tile-default uk-border-bottom">
|
|
<div class="uk-text-small download-drop">
|
|
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
|
</div>
|
|
</fs-modal>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #availableOnList>
|
|
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
|
|
<span
|
|
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
|
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
|
|
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
|
|
</span>
|
|
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
|
|
<span class="uk-text-emphasis">
|
|
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
|
|
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
|
|
{{instance.downloadNames.join("; ")}}
|
|
</a>
|
|
</span>
|
|
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
|
|
<span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
|
|
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
|
|
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
|
|
</div>
|
|
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
|
|
License:
|
|
<a *ngIf="isUrl(instance.license); else elseBlock"
|
|
[href]="instance.license" target="_blank" class="custom-external uk-link-text">
|
|
{{instance.license}}
|
|
</a>
|
|
<ng-template #elseBlock> {{instance.license}}</ng-template>
|
|
</div>
|
|
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
|
|
<span>Providers: </span>
|
|
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index"
|
|
[routerLink]="dataProviderUrl"
|
|
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}"
|
|
class="uk-link-text">
|
|
{{collectedName}}
|
|
<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">;</ng-container>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
`
|
|
})
|
|
|
|
export class AvailableOnComponent {
|
|
@Input() isMobile: boolean = false;
|
|
@Input() usedBy: "search" | "landing" = "search";
|
|
@Input() availableOn: HostedByCollectedFrom[];
|
|
/** @deprecated */
|
|
@Output() viewAllClicked = new EventEmitter();
|
|
@ViewChild("dropElement") dropElement: ElementRef;
|
|
@ViewChild("availableListFsModal") availableListFsModal: FullScreenModalComponent;
|
|
public threshold: number = 1;
|
|
public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
|
|
public title: string = "Download from";
|
|
|
|
constructor() {
|
|
}
|
|
|
|
ngOnInit() {
|
|
}
|
|
|
|
public getKeys(map) {
|
|
return Array.from(map.keys());
|
|
}
|
|
|
|
public isUrl(str: string): boolean {
|
|
return str.startsWith('http://') || str.startsWith('https://') || str.startsWith('//') || str.startsWith('www.');
|
|
}
|
|
|
|
get isOpen() {
|
|
return (typeof document !== 'undefined') && this.dropElement && UIkit.drop(this.dropElement.nativeElement).isActive();
|
|
}
|
|
|
|
public sliceString(str: string, size: number) {
|
|
return StringUtils.sliceString(str, size)
|
|
}
|
|
|
|
public openAvailableListFsModal() {
|
|
this.availableListFsModal.title = "Sources";
|
|
this.availableListFsModal.okButton = false;
|
|
this.availableListFsModal.open();
|
|
}
|
|
}
|