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

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';

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 *ngIf="source" class="uk-margin-xsmall-right">Source: </span>
					<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]="0.8"></icon>
					</span>
					<a [href]="availableOn[0].downloadUrl" target="_blank"
						 class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
						<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
					</a>
				</ng-container>
				<a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
					<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
				</a>
				<div #dropElement uk-drop="mode: click; pos: bottom-left;"
						 class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
					<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>
				</div>
			</div>
		</ng-container>
  `
})

export class AvailableOnComponent {
  @Input() availableOn: HostedByCollectedFrom[];
  @Input() source: boolean = true;
  /** @deprecated */
  @Output() viewAllClicked = new EventEmitter();
  @ViewChild("dropElement") dropElement: ElementRef;
  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)
  }
}