[Library | new-theme]: showAuthors.module.ts: Imported AlertModalModule | showAuthors.component.ts: When authors > 2*threshold, open them in modal & Replaces "view all ... authors" with "+ ... Authors" & updated orcid dropdown according to new theme | landing-header.component.ts: Use "uk-text-small" everywhere and removed @Input() small & change authorLimit from 30 to 3 & removed "small" input from <showAuthors>.
This commit is contained in:
parent
7d2990d08b
commit
d6e9ce2a5c
|
@ -7,8 +7,8 @@ import {AlertModal} from "../../../utils/modal/alert";
|
|||
selector: 'landing-header',
|
||||
template: `
|
||||
<div class="title-section uk-margin-bottom" [ngClass]="titleClass">
|
||||
<div>
|
||||
<span *ngIf="entityType" class="uk-text-capitalize">
|
||||
<div class="uk-text-small">
|
||||
<span *ngIf="entityType" class="uk-text-capitalize uk-text-small">
|
||||
{{entityType}}
|
||||
</span>
|
||||
<span *ngIf="types && removeUnknown(types, true).length > 0">
|
||||
|
@ -51,10 +51,10 @@ import {AlertModal} from "../../../utils/modal/alert";
|
|||
</div>
|
||||
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
|
||||
<div *ngIf="subTitle">
|
||||
<span class="uk-text-muted" [innerHTML]="subTitle"></span>
|
||||
<span class="uk-text-meta" [innerHTML]="subTitle"></span>
|
||||
</div>
|
||||
<div *ngIf="authors" class="uk-margin-top">
|
||||
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [small]="false"></showAuthors>
|
||||
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors"></showAuthors>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
|
@ -70,7 +70,7 @@ export class LandingHeaderComponent {
|
|||
@Input() title: string;
|
||||
@Input() subTitle: string;
|
||||
@Input() authors: Author[];
|
||||
@Input() authorLimit: number = 30;
|
||||
@Input() authorLimit: number = 3;
|
||||
@Input() showAllAuthors: boolean = true;
|
||||
@Input() underCuration: boolean = false;
|
||||
@Input() modal: AlertModal;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Inject, Input, PLATFORM_ID} from '@angular/core';
|
||||
import {Component, EventEmitter, Inject, Input, Output, PLATFORM_ID, ViewChild} from '@angular/core';
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {HelperFunctions} from '../HelperFunctions.class';
|
||||
import {RouterHelper} from "../routerHelper.class";
|
||||
|
@ -11,88 +11,105 @@ import {properties} from "../../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'showAuthors',
|
||||
template: `
|
||||
<div *ngIf="authors" class="uk-height-max-medium uk-overflow-auto">
|
||||
<span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">
|
||||
<span *ngIf="(!author.orcid && !author.orcid_pending) || !testBrowser"
|
||||
[class.uk-text-small]="small">
|
||||
{{author.fullName + "; "}}
|
||||
</span>
|
||||
<a *ngIf="(author.orcid || author.orcid_pending) && testBrowser" class="uk-display-inline-block space">
|
||||
<ng-template #author_template let-author="author">
|
||||
<span *ngIf="(!author.orcid && !author.orcid_pending) || !testBrowser">
|
||||
{{author.fullName + ";"}} 
|
||||
</span>
|
||||
<a *ngIf="(author.orcid || author.orcid_pending) && testBrowser" class="uk-display-inline-block space uk-link-text">
|
||||
<span>
|
||||
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" loading="lazy" style="width:16px; height:16px">
|
||||
<img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy"> 
|
||||
<span>
|
||||
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" loading="lazy" style="width:16px; height:16px">{{" "}}
|
||||
<img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy">{{" "}}
|
||||
<span [class.uk-text-small]="small">
|
||||
{{author.fullName + "; "}}
|
||||
</span>
|
||||
{{author.fullName + ";"}} 
|
||||
</span>
|
||||
</a>
|
||||
<div *ngIf="(author.orcid || author.orcid_pending) && testBrowser"
|
||||
class="default-dropdown uk-margin-remove-top uk-padding-medium uk-dropdown"
|
||||
uk-dropdown="pos: bottom-left; mode:click" style="min-width: 465px !important;">
|
||||
<b class="uk-margin-top">{{author.fullName}}</b>
|
||||
<div>
|
||||
<div class="uk-text-muted uk-margin-small-bottom uk-margin-small-top">ORCID</div>
|
||||
|
||||
<div class="uk-text-muted uk-text-small uk-margin-small-top uk-margin-small-bottom">
|
||||
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
|
||||
<img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="" loading="lazy">{{" "}}
|
||||
</span>
|
||||
</a>
|
||||
<div *ngIf="(author.orcid || author.orcid_pending) && testBrowser"
|
||||
class="default-dropdown uk-margin-remove-top uk-dropdown"
|
||||
uk-dropdown="mode:click" style="min-width: 465px !important;">
|
||||
<div class="uk-padding-small">
|
||||
<h6 class="uk-margin-remove">{{author.fullName}}</h6>
|
||||
<div>
|
||||
<div class="uk-text-meta uk-margin-bottom">ORCID</div>
|
||||
|
||||
<i *ngIf="author.orcid">Harvested from ORCID Public Data File</i>
|
||||
<i *ngIf="!author.orcid && author.orcid_pending">Derived by OpenAIRE algorithms or harvested from 3d party repositories</i>
|
||||
<div class="uk-text-meta uk-text-xsmall uk-margin-small-top uk-margin-small-bottom">
|
||||
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
|
||||
<img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="" loading="lazy">{{" "}}
|
||||
|
||||
<i *ngIf="author.orcid">Harvested from ORCID Public Data File</i>
|
||||
<i *ngIf="!author.orcid && author.orcid_pending">Derived by OpenAIRE algorithms or harvested from 3d party repositories</i>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="orcid-clipboard-wrapper uk-display-inline-block uk-width-1-1 uk-text-center">
|
||||
<input #element class="uk-padding-small uk-padding-remove-vertical uk-disabled uk-text-emphasis"
|
||||
style="min-height: 38px; min-width: 280px;" name="code" [value]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)">
|
||||
<a [class]="'uk-link copy orcid_clipboard_btn_auhtor_'+i"
|
||||
(click)="copyToClipboard(element)" title="Copy to clipboard">
|
||||
COPY
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="orcid uk-display-inline-block">
|
||||
<input #element class="uk-padding-small uk-padding-remove-vertical uk-disabled"
|
||||
style="min-height: 38px; min-width: 280px;" name="code" [value]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)">
|
||||
<button [class]="'uk-button uk-button-primary uk-button-small uk-icon copy orcid_clipboard_btn_auhtor_'+i" style="min-height: 40px"
|
||||
(click)="copyToClipboard(element)" title="Copy to clipboard">
|
||||
<span class="custom-icon custom-copy-white"></span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="uk-button uk-button-primary custom-icon-button target uk-button-icon uk-margin-small-left"
|
||||
<div class="uk-text-center uk-margin-small-top">
|
||||
<a class="uk-button uk-button-text custom-external"
|
||||
title="Visit author in ORCID" [href]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)" target="_blank">
|
||||
<span class="custom-icon custom-external-white"></span>
|
||||
VISIT AUTHOR IN ORCID
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="uk-margin-top">
|
||||
Search <b>{{author.fullName}}</b> in OpenAIRE
|
||||
</div>
|
||||
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
|
||||
<a class="uk-button uk-text-bold portal-button uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
|
||||
(click)="onClick()"
|
||||
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
|
||||
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
|
||||
<span class="space">Search</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="uk-margin-top uk-text-bold uk-text-emphasis uk-text-center">
|
||||
{{author.fullName}} in OpenAIRE
|
||||
</div>
|
||||
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
|
||||
<a class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
|
||||
(click)="onClick()"
|
||||
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
|
||||
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
|
||||
<span class="space">Search</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span *ngIf="numberOfAuthors == authorsLimit && authors.length > authorsLimit"> ... </span>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div *ngIf="authors" class="uk-height-max-medium uk-overflow-auto uk-text-small uk-text-emphasis">
|
||||
<span *ngFor="let author of authors.slice(0, viewAll?authors.length:authorsLimit) let i=index">
|
||||
<ng-container *ngTemplateOutlet="author_template; context: { author: author}"></ng-container>
|
||||
</span>
|
||||
<span *ngIf="showAll && authors && authors.length > authorsLimit && !viewAll" class="uk-text-small uk-link-text">
|
||||
<a (click)="viewAllClick();">
|
||||
+{{authors.length-authorsLimit | number}} Authors
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="authors && showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit"
|
||||
class="uk-width-1-1 uk-text-right">
|
||||
<a (click)="numberOfAuthors = authors.length;">
|
||||
View all {{authors.length | number}} authors
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="authors && showAll && numberOfAuthors > authorsLimit" class="uk-width-1-1 uk-text-right">
|
||||
<div *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="uk-width-1-1 uk-text-right">
|
||||
<a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
|
||||
</div>
|
||||
|
||||
<modal-alert #authorsModal [classTitle]="'landing-modal-header'"
|
||||
[classBody]="'landing-modal uk-padding-remove'">
|
||||
<div class="uk-padding">
|
||||
<span *ngFor="let author of authors; let i=index"
|
||||
class=" uk-text-small uk-text-emphasis">
|
||||
<ng-container *ngTemplateOutlet="author_template; context: { author: author}"></ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</modal-alert>
|
||||
`
|
||||
|
||||
})
|
||||
|
||||
export class ShowAuthorsComponent {
|
||||
@Input() authors: Author[];
|
||||
@Input() authorsLimit: number = 30;
|
||||
@Input() authorsLimit: number = 3;
|
||||
@Input() showAll: boolean = true;
|
||||
@Input() small: boolean = true;
|
||||
@Input() modal: AlertModal;
|
||||
|
||||
@Input() viewAll: boolean = false;
|
||||
public lessBtn: boolean = false;
|
||||
@ViewChild('authorsModal') authorsModal;
|
||||
|
||||
public numberOfAuthors: number;
|
||||
public properties: EnvProperties = properties;
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
|
@ -119,4 +136,20 @@ export class ShowAuthorsComponent {
|
|||
this.modal.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
public viewAllClick() {
|
||||
if(this.authors.length <= this.authorsLimit*2) {
|
||||
this.viewAll = true;
|
||||
this.lessBtn = true;
|
||||
} else {
|
||||
this.openAuthorsModal();
|
||||
}
|
||||
}
|
||||
|
||||
public openAuthorsModal() {
|
||||
this.authorsModal.cancelButton = false;
|
||||
this.authorsModal.okButton = false;
|
||||
this.authorsModal.alertTitle = "Authors";
|
||||
this.authorsModal.open();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,10 +4,11 @@ import {FormsModule} from '@angular/forms';
|
|||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {ShowAuthorsComponent} from './showAuthors.component';
|
||||
import {AlertModalModule} from "../modal/alertModal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule
|
||||
CommonModule, FormsModule, RouterModule, AlertModalModule
|
||||
],
|
||||
declarations: [
|
||||
ShowAuthorsComponent
|
||||
|
|
Loading…
Reference in New Issue