|
|
|
@ -14,68 +14,79 @@ import {RouterHelper} from "../../utils/routerHelper.class";
|
|
|
|
|
<div class="uk-flex uk-flex-middle"
|
|
|
|
|
[ngClass]="isMobile ? ('uk-flex-column ' + (!(usedBy == 'landing') ? 'uk-margin-left uk-margin-xsmall-bottom' : '')) : 'uk-grid uk-grid-small uk-child-width-auto'"
|
|
|
|
|
[attr.uk-grid]="!isMobile ? '' : null">
|
|
|
|
|
<div *ngIf="properties.environment != 'production' && availableOn[0].fulltext" class="uk-flex uk-flex-middle"
|
|
|
|
|
[ngClass]="isMobile ? 'uk-width-1-1' : 'uk-text-bolder'">
|
|
|
|
|
<a [href]="availableOn[0].fulltext" target="_blank"
|
|
|
|
|
class="uk-flex uk-flex-middle uk-button-link"
|
|
|
|
|
[ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-width-1-1 uk-padding-small uk-padding-remove-horizontal' : '') : 'uk-flex-center'">
|
|
|
|
|
<!-- <icon [flex]="true" [ratio]="0.7" name="download" visuallyHidden="download"></icon>-->
|
|
|
|
|
<icon name="download" visuallyHidden="donwload" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
|
|
|
|
<span class="uk-margin-xsmall-left">Full-Text</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="properties.environment != 'production' && isMobile && (usedBy == 'landing') && availableOn[0].fulltext" class="uk-width-1-1"><hr></div>
|
|
|
|
|
<div *ngIf="availableOn[0].downloadUrl" [ngClass]="isMobile ? 'uk-width-1-1' : ''">
|
|
|
|
|
|
|
|
|
|
<ng-container *ngIf="inModal">
|
|
|
|
|
<div class="uk-text-small uk-height-max-small uk-overflow-auto">
|
|
|
|
|
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
|
|
<ng-container *ngIf="!inModal">
|
|
|
|
|
<div *ngIf="properties.environment != 'production' && availableOn[0].fulltext" class="uk-flex uk-flex-middle"
|
|
|
|
|
[ngClass]="isMobile ? 'uk-width-1-1' : 'uk-text-bolder'">
|
|
|
|
|
<a [href]="availableOn[0].fulltext" target="_blank"
|
|
|
|
|
class="uk-flex uk-flex-middle uk-button-link"
|
|
|
|
|
[ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-width-1-1 uk-padding-small uk-padding-remove-horizontal' : '') : 'uk-flex-center'">
|
|
|
|
|
<!-- <icon [flex]="true" [ratio]="0.7" name="download" visuallyHidden="download"></icon>-->
|
|
|
|
|
<icon name="download" visuallyHidden="donwload" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
|
|
|
|
<span class="uk-margin-xsmall-left">Full-Text</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div *ngIf="properties.environment != 'production' && isMobile && (usedBy == 'landing') && availableOn[0].fulltext" class="uk-width-1-1"><hr></div><div *ngIf="availableOn[0].downloadUrl" [ngClass]="isMobile ? 'uk-width-1-1' : ''">
|
|
|
|
|
<div class="uk-flex uk-flex-middle" [ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-padding-small uk-padding-remove-horizontal' : '') : ''">
|
|
|
|
|
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
|
|
|
|
uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
|
|
|
|
|
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
<ng-container *ngIf="!isMobile">
|
|
|
|
|
<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; flip: false; shift: false" class="uk-drop download-drop">
|
|
|
|
|
<div class="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>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
|
|
<ng-container *ngIf="isMobile">
|
|
|
|
|
<a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
|
|
|
|
|
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
|
|
|
|
<span>
|
|
|
|
|
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
|
|
|
|
|
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
|
|
|
|
uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
|
|
|
|
|
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
<mobile-dropdown [toggle]="toggle">
|
|
|
|
|
<div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
|
|
|
|
|
Sources
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
|
|
|
|
|
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
|
|
|
|
<ng-container *ngIf="!isMobile">
|
|
|
|
|
<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; flip: false; shift: false" class="uk-drop download-drop">
|
|
|
|
|
<div class="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>
|
|
|
|
|
</div>
|
|
|
|
|
</mobile-dropdown>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
|
|
<ng-container *ngIf="isMobile">
|
|
|
|
|
<a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
|
|
|
|
|
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
|
|
|
|
<span>
|
|
|
|
|
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
<mobile-dropdown [toggle]="toggle">
|
|
|
|
|
<div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
|
|
|
|
|
Sources
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
|
|
|
|
|
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</mobile-dropdown>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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">
|
|
|
|
|
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top"
|
|
|
|
|
[ngClass]="inModal ? 'uk-margin-small-bottom' : ''">
|
|
|
|
|
<span
|
|
|
|
|
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
|
|
|
|
uk-tooltip [title]="getAccessLabel(instance.accessRight)">
|
|
|
|
|
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
|
|
|
|
|
<icon [name]="instance.accessRightIcon" [flex]="true" [ratio]="inModal ? 0.8 : 1"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
|
|
|
|
|
<div class="uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"
|
|
|
|
|
[ngClass]="inModal ? 'uk-grid' : 'uk-width-expand'">
|
|
|
|
|
<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">
|
|
|
|
@ -120,6 +131,7 @@ import {RouterHelper} from "../../utils/routerHelper.class";
|
|
|
|
|
|
|
|
|
|
export class AvailableOnComponent {
|
|
|
|
|
@Input() isMobile: boolean = false;
|
|
|
|
|
@Input() inModal: boolean = false;
|
|
|
|
|
@Input() usedBy: "search" | "landing" = "search";
|
|
|
|
|
@Input() prevPath: string = "";
|
|
|
|
|
@Input() availableOn: HostedByCollectedFrom[];
|
|
|
|
|