Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

This commit is contained in:
argirok 2022-03-16 19:14:48 +02:00
commit b7cc2c0147
32 changed files with 518 additions and 347 deletions

View File

@ -1,24 +1,74 @@
import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core";
import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";
declare var UIkit;
@Component({
selector: '[page-content]',
template: `
<div id="page_content">
<div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
<div class="uk-container uk-container-large">
<div id="header">
<div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
<div #header class="uk-container uk-container-large uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content>
</div>
</div>
</div>
<div id="page_content_inner" class="uk-section uk-container uk-container-large">
<ng-content select="[inner]"></ng-content>
</div>
</div>
`
`,
})
export class PageContentComponent implements OnInit{
public offset: string;
export class PageContentComponent implements OnInit, OnDestroy {
public offset: number;
public sticky: boolean = false;
@Output()
public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChild("header") public header: ElementRef;
private current;
private subscriptions: any[] = [];
constructor() {
}
ngOnInit() {
this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
if (typeof window !== "undefined") {
this.current = window.pageYOffset;
this.initSticky();
}
}
initSticky() {
this.clear();
this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
this.offset = 0;
}));
this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
this.sticky = true;
this.stickyEmitter.emit(this.sticky);
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
this.sticky = false;
this.stickyEmitter.emit(this.sticky);
}));
}
clear() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
}
});
}
ngOnDestroy() {
this.clear();
}
}

View File

@ -25,10 +25,10 @@
<ul class="uk-list">
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling" class="uk-text-center">
[queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
<span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
<span [ngClass]="specialMenuItem.customClass"
[class.uk-margin-small-left]="open"
<span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
[class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
</a>
</li>

View File

@ -18,10 +18,9 @@
</div>
<ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

View File

@ -201,7 +201,7 @@ export class MetricsComponent {
private sub: Subscription;
private timeouts: any[] = [];
public metricsClicked: boolean = true;
public metricsClicked: boolean = false;
public status: number;
public state: number = -1;

View File

@ -559,10 +559,12 @@ export class ParsingFunctions {
}
// publication & dataset landing : for subjects and otherSubjects and classifiedSubjects
parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>] {
parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] {
let subjects: string[];
let otherSubjects: Map<string, string[]>;
let classifiedSubjects: Map<string, string[]>;
let fos: string[];
let sdg: string[];
let subject;
let length = Array.isArray(_subjects) ? _subjects.length : 1;
@ -571,6 +573,17 @@ export class ParsingFunctions {
subject = Array.isArray(_subjects) ? _subjects[i] : _subjects;
if (subject.classid != "") {
if (subject.inferred && subject.inferred == true) {
if(subject.classid === "SDG") {
if (sdg == undefined) {
sdg = new Array<string>();
}
sdg.push(subject.content+"");
} else if(subject.classid === "FOS") {
if (fos == undefined) {
fos = new Array<string>();
}
fos.push(subject.content+"");
} else {
if (classifiedSubjects == undefined) {
classifiedSubjects = new Map<string, string[]>();
}
@ -579,7 +592,8 @@ export class ParsingFunctions {
classifiedSubjects.set(subject.classname, new Array<string>());
}
classifiedSubjects.get(subject.classname).push(subject.content);
classifiedSubjects.get(subject.classname).push(subject.content+"");
}
} else {
if (subject.classid == "keyword") {
let content: string = subject.content+"";
@ -636,7 +650,7 @@ export class ParsingFunctions {
}
}
}
return [subjects, otherSubjects, classifiedSubjects];
return [subjects, otherSubjects, classifiedSubjects, fos, sdg];
}
parseContexts(_contexts: any): {

View File

@ -16,14 +16,16 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'showIdentifiers',
template: `
<div class="uk-text-muted">Persistent Identifiers</div>
<!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
<div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
<ng-container *ngFor="let key of keys let i=index">
<div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
<p class="custom-break uk-margin-remove">
<!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
<div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
<p class="uk-margin-remove">
<span #content [id]="key">
<span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
<span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
<ng-container *ngFor="let item of identifiers.get(key) let j=index">
<!-- TODO: custom external link icons -->
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
{{item}} <span class="custom-external custom-icon"></span>
</a>

View File

@ -54,7 +54,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
<span>, </span>
</ng-container>
<span *ngIf="journal['lissn']" class="uk-display-inline-block">
<span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>(kostis)
<span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
<span>, </span>
</span>
<span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">

View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"></result-preview>
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"

View File

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false"></result-preview>
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"

View File

@ -182,6 +182,26 @@
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
<!-- Subjects -->
<div *ngIf="resultLandingInfo.fos" class="uk-margin-medium-bottom">
<div class="uk-text-muted">
Fields of Science and Technology classification
</div>
<div class="uk-margin-small-top">
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
{{resultLandingInfo.fos.join(', ')}}
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.sdg" class="uk-margin-medium-bottom">
<div class="uk-text-muted">
Sustainable Development Goals
</div>
<div class="uk-margin-small-top">
<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
{{resultLandingInfo.sdg.join(', ')}}
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects"
@ -369,7 +389,8 @@
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties"
[result]="getResultPreview(item)"></result-preview>
[result]="getResultPreview(item)"
[isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="researchResults.length > pageSize"

View File

@ -380,7 +380,7 @@ export class ResultLandingComponent {
this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
this.updateUrl(this.canonicalUrl);
if ((this.type == "publication") && (this.properties.environment == "beta" || this.properties.environment == "development") && (typeof document !== 'undefined')) {
this.getOpenCitations();
// this.getOpenCitations();
}
this.addNoIndexFilter();
if (this.resultLandingInfo.title) {
@ -453,7 +453,10 @@ export class ResultLandingComponent {
}
public get hasPrimaryInfo(): boolean {
return !!this.resultLandingInfo && (!!this.resultLandingInfo.description || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects);
return !!this.resultLandingInfo && (
(!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
|| !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects
|| (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
}
public get hasSecondaryInfo(): boolean {

View File

@ -8,6 +8,7 @@ import {map} from "rxjs/operators";
import {HostedByCollectedFrom, Organization} from "../../utils/result-preview/result-preview";
import {Dates, Identifier, StringUtils} from "../../utils/string-utils.class";
import {properties} from "../../../../environments/environment";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Injectable()
export class ResultLandingService {
@ -151,18 +152,21 @@ export class ResultLandingService {
if(!this.resultLandingInfo.title || data[1][i].classid == "main title") {
this.resultLandingInfo.title = String(data[1][i].content);
}
if(data[1][i].classid == "main title") {
break;
if(!this.resultLandingInfo.subtitle && data[1][i].classid === 'subtitle') {
this.resultLandingInfo.subtitle = String(data[1][i].content);
}
// if(data[1][i].classid == "main title") {
// break;
// }
}
}
if(this.resultLandingInfo.title === this.resultLandingInfo.subtitle) {
this.resultLandingInfo.subtitle = "";
}
if(!this.resultLandingInfo.title) {
this.resultLandingInfo.title = "";
}
// this.resultLandingInfo.title = (data[1][0] && data[1][0].content) ? String(data[1][0].content) : "";
if(data[1][1].classid === 'subtitle') {
this.resultLandingInfo.subtitle = (data[1][1] && data[1][1].content) ? String(data[1][1].content) : "";
}
} else {
this.resultLandingInfo.title = (data[1] && data[1].content) ? String(data[1].content) : "";
}
@ -191,6 +195,8 @@ export class ResultLandingService {
}
this.resultLandingInfo.relatedResults = this.parsingFunctions.parseResults(this.resultLandingInfo.relatedResults, relation, provenanceAction);
} else if(relation['to'].class && relation['to'].class.toLowerCase() == "hasauthorinstitution") {
this.resultLandingInfo.organizations = this.parseRelatedOrganizations(this.resultLandingInfo.organizations, relation);
}
}
}
@ -325,10 +331,20 @@ export class ResultLandingService {
// res['result']['metadata']['oaf:entity']['oaf:result']['subject']
if(data[7] != null) {
let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>] = this.parsingFunctions.parseAllSubjects(data[7]);
let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] = this.parsingFunctions.parseAllSubjects(data[7]);
this.resultLandingInfo.subjects = subjectResults[0];
this.resultLandingInfo.otherSubjects = subjectResults[1];
this.resultLandingInfo.classifiedSubjects = subjectResults[2];
this.resultLandingInfo.fos = subjectResults[3];
if(this.resultLandingInfo.fos) {
this.resultLandingInfo.fos.sort((a, b) => a.localeCompare(b))
}
this.resultLandingInfo.sdg = subjectResults[4];
if(this.resultLandingInfo.sdg) {
this.resultLandingInfo.sdg.sort((a, b) => {
return HelperFunctions.sortSDGs(a, b);
})
}
this.resultLandingInfo.showEgiNotebookButton = this.parsingFunctions.notebookInSubjects;
}

View File

@ -13,7 +13,8 @@
<div class="uk-grid uk-grid-divider">
<div class="uk-width-expand@m uk-width-1-1 uk-first-column">
<result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
[isCard]="false">
</result-preview>
</div>

View File

@ -41,10 +41,10 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
<icon *ngIf="!showLoading" name="add" ratio="1"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to
<span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
<span class="orcid-color uk-flex uk-flex-middle">
<span>ORCID&#160;</span>
<img class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
</span>
</span>
</a>
@ -60,9 +60,9 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
<icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
<span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span>
<span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
</span>
</span>
@ -84,7 +84,7 @@ declare var UIkit: any;
</span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
<span class="orcid-color">
ORCID
</span>
@ -105,7 +105,7 @@ declare var UIkit: any;
</span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
<span class="orcid-color">
ORCID
</span>
@ -142,9 +142,9 @@ declare var UIkit: any;
<ng-container *ngIf="pageType == 'my_search'">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
<span>ORCID</span>
<span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
<span class="space">ACTIONS</span>
<span class="space">&#160;ACTIONS</span>
</span>
<span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0)

View File

@ -9,10 +9,9 @@
</div>
<ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

View File

@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
<result-preview [modal]="modal" [properties]="properties"
[result]="getResultPreview(result)"
[showSubjects]="showSubjects"
[showOrganizations]="showOrganizations"></result-preview>
[showOrganizations]="showOrganizations"
[isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="totalResults > pageSize" [type]="type"

View File

@ -4,7 +4,7 @@
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span>
</span>
@ -15,9 +15,9 @@
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
[class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -30,9 +30,9 @@
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" flex="true" ratio="0.7"></icon>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -46,9 +46,9 @@
class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
[class.uk-disabled]="disabled">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -153,6 +153,10 @@
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription"></schema2jsonld>
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<ng-template #loading>
<loading></loading>
</ng-template>
<ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">
@ -231,8 +235,9 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-bottom">
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@ -246,8 +251,8 @@
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h6>
<!-- TODO Download results position-->
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<!-- Download results -->
<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
@ -255,6 +260,7 @@
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<!-- No Dashboard Filters -->
<div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
@ -357,5 +363,6 @@
</div>
</div>
</div>
</ng-template>
</div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

View File

@ -10,7 +10,7 @@ import {
import {Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, Router} from "@angular/router";
import {SearchFields} from "../../utils/properties/searchFields";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
@Component({
selector: 'search-filter',
templateUrl: 'searchFilter.component.html'
@ -223,21 +223,22 @@ export class SearchFilterComponent implements OnInit, OnChanges {
sort(values: Value[]) {
let sorted: Value[] = values.slice();
if (this.sortBy == "name") {
sorted.sort((n1, n2) => {
if (this.filter.filterId === "sdg") {
return HelperFunctions.sortSDGs(n1.name.toLowerCase(), n2.name.toLowerCase());
} else {
if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
return 1;
}
if (n1.name < n2.name) {
return -1;
}
return 0;
});
}
});
return sorted;
}
}
toggle() {
this.isOpen = !this.isOpen;

View File

@ -1,10 +1,9 @@
<ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of previewResults" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

View File

@ -341,7 +341,7 @@ export class SearchResearchResultsService {
});
}
var date: string = (resData.dateofacceptance) + ""; // transform to string in case it is an integer
var date: string = (resData.dateofacceptance ? resData.dateofacceptance : '') + ''; // transform to string in case it is an integer
result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date;
let abstracts = this.parsingFunctions.parseDescription(resData.description);

View File

@ -2,8 +2,10 @@
<div class="uk-hidden@m">
<div [ngClass]="portal + '-menu'">
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
<div
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 60px; width: 60px;">
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
@ -39,13 +41,15 @@
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)"
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
[queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
(menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
&& isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
&& isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))"
(click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenuItem(submenu)"
@ -88,15 +92,18 @@
</div>
</div>
</div>
<div class="uk-visible@m">
<div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky" cls-inactive="uk-navbar-transparent"
<div id="main-menu" class="uk-visible@m">
<div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
<div
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
</div>
<nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar>
<ng-container *ngIf="!onlyTop">
<div class="uk-navbar-left">
<ng-container *ngIf="showLogo && isHeaderLeft">
@ -107,7 +114,7 @@
<ng-container *ngIf="showLogo && !isHeaderLeft">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</ng-container>
<ng-container *ngIf="header.menuPosition === 'center'">
<ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
</div>
@ -136,12 +143,9 @@
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) "
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
style="top: 80px; left: 0px;" id="{{menu.rootItem._id}}" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
<div class="uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let submenu of menu.items">
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
@ -172,8 +176,6 @@
</ul>
</div>
</div>
</div>
</li>
</ng-container>
<!-- Custom menu items -->
@ -233,6 +235,7 @@
</ng-container>
</nav>
</div>
</div>
<!-- New navbar for featured menu items - test only -->
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
<div class="featuredNavBar">
@ -262,11 +265,10 @@
</div>
<ng-template #header_template let-mobile="mobile">
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title"
class="uk-width-1-1">
[alt]="header.title">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p>
@ -274,11 +276,10 @@
</ng-container>
</a>
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title"
class="uk-width-1-1">
[alt]="header.title">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p>

View File

@ -4,7 +4,7 @@
right: 5vw;
}
.uk-card > .uk-background-secondary:first-child {
.uk-card > .uk-background-primary:first-child {
border-radius: 4px 4px 0 0;
}

View File

@ -5,7 +5,7 @@
<span class="uk-margin-small-left">Contact</span>
</a>
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div class="uk-background-secondary uk-padding-small uk-text-center">
<div class="uk-background-primary uk-padding-small uk-text-center">
<div class="uk-text-small">
Send a message
</div>

View File

@ -70,4 +70,23 @@ export class HelperFunctions {
public static getValues(value: any): any[] {
return Object.keys(value).map(key => value[key]);
}
public static sortSDGs(sgd1: string, sdg2: string): number {
let splitA: string[] = sgd1.split(".");
let numA: number;
if(splitA && splitA.length > 0) {
numA = +splitA[0];
}
let splitB: string[] = sdg2.split(".");
let numB: number;
if(splitB && splitB.length > 0) {
numB = +splitB[0];
}
if(numA && numB) {
return numA - numB;
} else {
return sgd1.localeCompare(sdg2);
}
}
}

View File

@ -49,6 +49,8 @@ export class ResultLandingInfo {
subjects: string[];
otherSubjects: Map<string, string[]>;
classifiedSubjects: Map<string, string[]>; //<class of subject, subjects>
fos: string[];
sdg: string[];
showEgiNotebookButton: boolean = false;
// // percentage is for trust

View File

@ -14,7 +14,7 @@ export class SearchFields {
"resultbestaccessright", "relfunder",
"relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
"relproject",
"instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country"];
"instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country", "sdg", "fos"];
public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "resultpublisher",
"resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance",
@ -231,6 +231,22 @@ export class SearchFields {
operator: "cu",
equalityOperator: " exact ",
filterType: "checkbox"
},
["sdg"]: {
name: "Sustainable Development Goals (SDG)",
type: "refine",
param: "sdg",
operator: "sg",
equalityOperator: " exact ",
filterType: "checkbox"
},
["fos"]: {
name: "Fields of Science and Technology classification (FOS)",
type: "refine",
param: "fos",
operator: "fs",
equalityOperator: " exact ",
filterType: "checkbox"
}
};

View File

@ -25,7 +25,8 @@
[placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
[class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1">
@ -55,20 +56,20 @@
<!-- Natalia's suggestion-->
<div class="uk-margin-small uk-margin-top uk-text-left">
<ul class="uk-subnav uk-subnav-divider recentyears">
<ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li>
<a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
currentYear
&&stringToNum(filter.selectedFromValue) == currentYear))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
"
(click)="yearChanged(0)"
>This year</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
"
(click)="yearChanged(0)"
@ -77,13 +78,13 @@
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
&&stringToNum(filter.selectedFromValue) == currentYear-4))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
"
(click)="yearChanged(4)"
>Last 5 years</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
"
(click)="yearChanged(4)"
@ -91,13 +92,13 @@
</li>
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
"
(click)="yearChanged(9)"
>Last 10 years</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
"
(click)="yearChanged(9)"

View File

@ -1,4 +1,5 @@
<div *ngIf="result">
<div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
<div [ngClass]="{'uk-card-body': isCard}">
<!-- Before title -->
<div class="uk-grid uk-flex uk-flex-middle">
<div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle">
@ -119,49 +120,55 @@
<div class="uk-margin-small-bottom">
<span
*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)"
class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
title="Access Mode">
{{result.accessMode}}
</span>{{' '}}
<span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
class="uk-label custom-label label-open uk-text-truncate"
<span
*ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications">
Open Access mandate for Publications
</span>{{' '}}
<span
*ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data">
class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
Open Access mandate for Research Data
</span>{{' '}}
<span
*ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
class="uk-label custom-label label-open uk-text-truncate"
class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications and Research Data">
Open Access mandate for Publications and Research Data
</span>{{' '}}
<span *ngIf="result.languages && result.languages.length > 0">
<span *ngFor="let language of result.languages"
class="uk-label custom-label label-language " title="Language">
<span
*ngFor="let language of result.languages"
class="uk-label" title="Language">
{{language}}
</span>{{' '}}
</span>
<span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
<span *ngFor="let programmingLanguage of result.programmingLanguages"
class="uk-label custom-label label-language" title="Programming Language">
<span
*ngFor="let programmingLanguage of result.programmingLanguages"
class="uk-label" title="Programming Language">
{{programmingLanguage}}
</span>{{" "}}
</span>
<span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39">
<span
*ngIf="result.sc39" class="uk-label" title="Special Clause 39">
Special Clause 39
</span>{{' '}}
<span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
class="uk-label custom-label label-compatibility" title="Compatibility">
<span
*ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
class="uk-label" title="Compatibility">
{{result.compatibility}}
</span>{{' '}}
<span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility ==
'not available'"
class="uk-label custom-label label-danger" title="OpenAIRE Compatibility">Not yet registered</span>
{{' '}}
<span
*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
Not yet registered
</span>{{' '}}
</div>
<!-- Authors -->
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@ -281,13 +288,15 @@
</span>
</div>
</div>
</div>
</div>
</div>
<!--&& loggedIn -->
<div *ngIf="(result.pop_inf && result.DOI) ||
((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
class="result-preview-bottom">
class="result-preview-bottom"
[ngClass]="{'uk-card-footer': isCard}">
<!-- Impact Factors-->
<span class="uk-flex uk-flex-top">
<ng-container *ngIf="result.pop_inf && result.DOI">
@ -362,6 +371,7 @@
</div>
</ng-container>
<!-- && loggedIn -->
<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
<span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
&& showOrcid && result.identifiers && result.identifiers.size > 0"
class="uk-width-1-3 uk-width-expand@s">

View File

@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() modal: AlertModal = null;
@Input() promoteWebsiteURL: boolean = false;
@Input() hasLink: boolean = true;
@Input() isCard: boolean = false;
public routerHelper: RouterHelper = new RouterHelper();
public urlParam: string;
public url: string;
@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
public accessClass(accessMode: string): string {
if(accessMode.toLowerCase().indexOf('open') !== -1) {
return 'open';
return 'success';
} else if(accessMode.toLowerCase() === 'not available') {
return 'unknown';
return 'disabled'; // unknown
} else {
return 'closed';
return 'disabled'; // closed
}
}

View File

@ -1,4 +1,4 @@
import {NavigationEnd, Router} from '@angular/router';
import {ActivationStart, NavigationEnd, Router} from '@angular/router';
import {Injectable} from '@angular/core';
import {Subscription} from 'rxjs';
@ -8,17 +8,20 @@ import {Subscription} from 'rxjs';
export class SmoothScroll {
private interval;
private readonly sub;
private lastRoute;
private lastComponent;
private currentComponent: any;
constructor(private router: Router) {
if(typeof window !== "undefined") {
if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
if (event instanceof ActivationStart) {
this.currentComponent = event.snapshot.component;
} else if (event instanceof NavigationEnd) {
if (this.interval) {
clearInterval(this.interval);
}
const fragment = router.parseUrl(router.url).fragment;
if (this.lastRoute !== this.getUrl(event.url)) {
if (this.lastComponent !== this.currentComponent) {
window.scrollTo({top: 0});
}
if (fragment) {
@ -49,16 +52,12 @@ export class SmoothScroll {
} else {
window.scrollTo({top: 0, behavior: 'smooth'});
}
this.lastRoute = this.getUrl(event.url);
this.lastComponent = this.currentComponent;
}
});
}
}
private getUrl(url: string) {
return url.split('?')[0].split('#')[0];
}
public clearSubscriptions() {
if (this.sub && this.sub instanceof Subscription) {
this.sub.unsubscribe();

View File

@ -7,9 +7,10 @@
import { Component, Input } from '@angular/core';
export interface TabIcon {
svg: string;
ratio: number;
fill: string;
name?: string;
svg?: string;
ratio?: number;
active: string;
}
@Component({

View File

@ -2,16 +2,17 @@
* The main component that renders single TabComponent
* instances.
*/
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {TabComponent} from './tab.component';
@Component({
selector: 'my-tabs',
template: `
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
<div>{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
</a>
@ -22,14 +23,21 @@ import {TabComponent} from './tab.component';
</div>
`
})
export class TabsComponent {
export class TabsComponent implements AfterContentInit {
@Input()
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
public selected: string;
ngAfterContentInit() {
if(this.tabs.length > 0) {
this.selected = this.tabs.get(0).tabId;
}
}
selectTab(tab: TabComponent){
// activate the tab the user has clicked on.
this.selected = tab.tabId;
this.selectedActiveTab.emit(tab.tabId);
}
}