MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 

1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables.
2. feedback.component.html: Updated width of email input for small screens.
3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects.
4. showIdentifiers.component.ts: Updated classes in <modal-alert>.
5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects".
6. resultLanding.component:
	a. Added button and modal for <addThis> (share in social media).
	b. View more functionality for related organizations.
	c. Graph and feedback section sticky.
	d. Added checks for summary tab and right sidebar.
	e. In small screens made right sidebar offcanvas.
7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes.
8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom.
9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center).
10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000.
11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>.
12. icons.ts: Added "quotes" svg.
13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body.
14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports.
15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them.
16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center".
17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky.
18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging).
19. landing-utils.css:
	a. Moved variables in .landing instead of :root.
	b. Added variable --landing-light-color-rgb: var(--light-color-rgb);
	c. Added glass filter in #graph_and_feedback.
	d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box).
	e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections.
	f. Added top rule for #right-sidebar-switcher.
	g. Added custom width rules for .landing-left-sidebar-width.
20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index
21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
This commit is contained in:
Konstantina Galouni 2022-04-20 17:40:18 +03:00
parent 8b7143c8cb
commit 53d05bf54f
18 changed files with 472 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
landingPages/feedback/feedback.component.html
View File

@ -52,7 +52,7 @@
</div> </div>
<div> <div>
<div class="uk-grid uk-flex-top" uk-grid> <div class="uk-grid uk-flex-top" uk-grid>
<div input class="uk-width-expand" [formInput]="form.get('email')" placeholder="E-mail"> <div input class="uk-width-expand@m uk-width-1-1" [formInput]="form.get('email')" placeholder="E-mail">
<span note>Please leave us your E-mail to notify you about the reporting status.</span> <span note>Please leave us your E-mail to notify you about the reporting status.</span>
</div> </div>
<div class="uk-width-auto"> <div class="uk-width-auto">

17
landingPages/landing-utils/parsingFunctions.class.ts
View File

@ -641,14 +641,19 @@ export class ParsingFunctions {
} }
classifiedSubjects.get(this.notebook_label).push(this.notebook_value); classifiedSubjects.get(this.notebook_label).push(this.notebook_value);
} else { } else {
if (otherSubjects == undefined) { // if (otherSubjects == undefined) {
otherSubjects = new Map<string, string[]>(); // otherSubjects = new Map<string, string[]>();
} // }
//
// if (!otherSubjects.has(subject.classname)) {
// otherSubjects.set(subject.classname, new Array<string>());
// }
// otherSubjects.get(classname).push(content);
if (!otherSubjects.has(subject.classname)) { if (subjects == undefined) {
otherSubjects.set(subject.classname, new Array<string>()); subjects = new Array<string>();
} }
otherSubjects.get(classname).push(content); subjects.push(content);
} }
} }
} }

5
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -47,9 +47,8 @@ import {properties} from "../../../../environments/environment";
<a (click)="openIdentifiersModal()">View all</a> <a (click)="openIdentifiersModal()">View all</a>
</div> </div>
<modal-alert #identifiersModal [classTitle]="'landing-modal-header'" <modal-alert #identifiersModal>
[classBody]="'landing-modal uk-padding-remove'"> <div class="uk-text-small">
<div class="uk-padding uk-padding-remove-top uk-text-small">
<ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container> <ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
</div> </div>
</modal-alert> </modal-alert>

101
landingPages/landing-utils/showSubjects.component.ts
View File

@ -1,20 +1,29 @@
import {Component, Input} from '@angular/core'; import {
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Input,
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'showSubjects', selector: 'showSubjects',
template: ` template: `
<div class="uk-text-muted">
Subjects
</div>
<div class="uk-margin-small-top">
<div>
<ng-container *ngIf="classifiedSubjects && classifiedSubjects.size > 0"> <ng-container *ngIf="classifiedSubjects && classifiedSubjects.size > 0">
<div *ngFor="let key of getKeys(classifiedSubjects)" style="line-height: 20px"> <div class="uk-text-meta uk-margin-small-bottom">
Subjects by Vocabulary
</div>
<div *ngFor="let key of getKeys(classifiedSubjects)" class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
<span>
<span uk-icon="tag"></span> <span uk-icon="tag"></span>
<span class="uk-text-bold"> {{key}}: </span> <span class="uk-text-bold uk-margin-small-right"> {{key}}: </span>
<ng-container *ngFor="let subject of classifiedSubjects.get(key)"> </span>
<span class="uk-display-inline-block label-classified"> <span *ngFor="let subject of classifiedSubjects.get(key)" class="uk-width-auto uk-flex">
<span class="uk-border-rounded uk-label uk-label-small uk-label-primary uk-text-truncate">
<span *ngIf="specialSubjects.indexOf(subject) == -1 ">{{subject}}</span> <span *ngIf="specialSubjects.indexOf(subject) == -1 ">{{subject}}</span>
<a class="uk-link-reset" *ngIf="specialSubjects.indexOf(subject) != -1" <a class="uk-link-reset" *ngIf="specialSubjects.indexOf(subject) != -1"
[routerLink]=" properties.searchLinkToAdvancedResults" [routerLink]=" properties.searchLinkToAdvancedResults"
@ -22,25 +31,39 @@ import {properties} from "../../../../environments/environment";
{{subject}} {{subject}}
</a> </a>
</span> </span>
</ng-container> </span>
</div> </div>
</ng-container> </ng-container>
<div *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)" class="uk-text-break"> <ng-container *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)">
<span uk-icon="tag"></span> <div class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
<span class="uk-text-bold"> free text keywords: </span> Subjects
<span *ngIf="subjects && subjects.length > 0">{{subjects.join(', ')}}</span>
<span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>
<span *ngIf="otherSubjects && otherSubjects.size > 0">
<span *ngFor="let key of getKeys(otherSubjects); let i=index">
<span *ngIf="otherSubjects.get(key).length > 0">
<span>{{otherSubjects.get(key).join(', ')}}</span>
<span *ngIf="i < (otherSubjects.size - 1)">, </span>
</span>
</span>
</span>
</div> </div>
<ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
<div *ngIf="isLarge" class="uk-text-right uk-margin-small-top">
<a (click)="openSubjectsModal()">View all</a>
</div> </div>
</ng-container>
<ng-template #subjects_template let-customClasses="customClasses" let-id="id">
<div class="uk-text-break" [ngClass]="customClasses">
<p *ngIf="subjects && subjects.length > 0"><span #content [id]="id">{{subjects.join(', ')}}</span></p>
<!-- <span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>-->
<!-- <span *ngIf="otherSubjects && otherSubjects.size > 0">-->
<!-- <span *ngFor="let key of getKeys(otherSubjects); let i=index">-->
<!-- <span *ngIf="otherSubjects.get(key).length > 0">-->
<!-- <span>{{otherSubjects.get(key).join(', ')}}</span>-->
<!-- <span *ngIf="i < (otherSubjects.size - 1)">, </span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </span>-->
</div> </div>
</ng-template>
<modal-alert #subjectsModal>
<div class="uk-text-small">
<ng-container *ngTemplateOutlet="subjects_template"></ng-container>
</div>
</modal-alert>
` `
}) })
@ -48,10 +71,18 @@ export class ShowSubjectsComponent {
@Input() subjects: string[]; @Input() subjects: string[];
@Input() otherSubjects: Map<string, string[]>; @Input() otherSubjects: Map<string, string[]>;
@Input() classifiedSubjects: Map<string, string[]>; @Input() classifiedSubjects: Map<string, string[]>;
isLarge: boolean = false;
properties = properties; properties = properties;
specialSubjects = []; specialSubjects = [];
@ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
@ViewChild('subjectsModal') subjectsModal;
constructor() { @HostListener('window:resize', ['$event'])
onResize(event) {
this.checkLarge();
}
constructor(private cdr: ChangeDetectorRef) {
if(properties.dashboard == "explore") { if(properties.dashboard == "explore") {
this.specialSubjects = [ this.specialSubjects = [
// "Physics::Optics", // "Physics::Optics",
@ -79,10 +110,30 @@ export class ShowSubjectsComponent {
ngOnInit() { ngOnInit() {
} }
ngAfterViewInit() {
this.checkLarge();
}
checkLarge() {
let overflow = 42;
if(typeof document !== "undefined" && this.content) {
let element = this.content.find(content => content.nativeElement.id === "content");
this.isLarge = (element && element.nativeElement.offsetHeight > overflow);
this.cdr.detectChanges();
}
}
public getKeys(map) { public getKeys(map) {
return Array.from(map.keys()); return Array.from(map.keys());
} }
getSubjectParameter(param){ getSubjectParameter(param){
return {'f0':'resultsubject','fv0':'"' +(param)+'"', size:50}; return {'f0':'resultsubject','fv0':'"' +(param)+'"', size:50};
} }
public openSubjectsModal() {
this.subjectsModal.cancelButton = false;
this.subjectsModal.okButton = false;
this.subjectsModal.alertTitle = "Subjects";
this.subjectsModal.open();
}
} }

289
landingPages/result/resultLanding.component.html
View File

@ -1,14 +1,22 @@
<div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle"> <div id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main"> <div class="tm-main">
<div *ngIf="errorMessage.length > 0 || showLoading" class="landing-background-default-color">
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
<div *ngIf="resultLandingInfo" class="publication"> <div *ngIf="resultLandingInfo" class="publication">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="uk-width-small landing-background-light-color"> <div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-column-height landing-left-column-border uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div [class.uk-hidden]="!hasAltMetrics && !metricsCalculated" <!-- [class.uk-hidden]="!hasAltMetrics && !metricsCalculated"-->
class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)"> <ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)">
<metrics *ngIf="hasMetrics" class="uk-margin-bottom" <metrics *ngIf="hasMetrics" class="uk-margin-bottom"
[pageViews]="pageViews" [pageViews]="pageViews"
@ -23,11 +31,15 @@
<div class="uk-text-meta">Actions</div> <div class="uk-text-meta">Actions</div>
<ul class="uk-list"> <ul class="uk-list">
<!-- Share --> <!-- Share -->
<!-- <li>--> <li class="uk-text-center">
<!-- social--> <a (click)="openAddThisModal()"
<!-- &lt;!&ndash; TODO: MOVE SOCIAL TO MODAL OR DROP!!!! &ndash;&gt;--> [title]="'Share this '+getTypeName() + ' in your social networks'"
<!-- &lt;!&ndash; <addThis></addThis>&ndash;&gt;--> [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
<!-- </li>--> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="share" visuallyHidden="share"></icon>
</span>
</a>
</li>
<!-- Link to --> <!-- Link to -->
<li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center" <li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
[title]="'Link this '+getTypeName()+' to...'" [title]="'Link this '+getTypeName()+' to...'"
@ -35,7 +47,7 @@
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])" <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"> routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<icon name="link"></icon> <icon name="link" visuallyHidden="link"></icon>
</span> </span>
</a> </a>
</li> </li>
@ -45,14 +57,7 @@
[title]="'Cite this '+getTypeName()" [title]="'Cite this '+getTypeName()"
[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'"> [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<svg width="20" <icon name="quotes" visuallyHidden="cite"></icon>
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
data-svg="quote-right">
<path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>
<path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>
</svg>
</span> </span>
</a> </a>
</li> </li>
@ -84,12 +89,38 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove landing-background-default-color"> <div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color">
<!-- uk-sticky="bottom: true; offset: 90vh;"--> <ng-template #graph_and_feedback_template>
<div class="uk-padding-large uk-padding-remove-vertical uk-margin-medium-top"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom">
<!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">
Powered by <a href="https://graph.openaire.eu" target="_blank" class="uk-text-primary">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">Anything wrong?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report an Issue</a>
</div>
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" uk-sticky="bottom: true;" [attr.offset]="calcGraphOffset()">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-margin-medium-top">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record <schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
[URL]="canonicalUrl"></schema2jsonld> [URL]="canonicalUrl"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<span *ngIf="resultLandingInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle"> <span *ngIf="resultLandingInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
<icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon> <icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon>
<a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left"> <a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left">
@ -144,14 +175,12 @@
</div> </div>
</div> </div>
<div id="main-tabs-div" class="uk-padding-large uk-padding-remove-vertical" <div id="main-tabs-div"
uk-sticky="bottom: true; offset: 0" uk-sticky="bottom: true; media: @m" [attr.offset]="offset"
cls-active="active"> cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<div [ngStyle]="{'padding-top': offset+'px'}"> <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
<showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom"></showTitle> <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
</div>
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [(isSticky)]="stickyHeader">
<my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab> <my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0" <my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
[tabTitle]="'References'" [tabId]="'references'" [tabTitle]="'References'" [tabId]="'references'"
@ -172,11 +201,11 @@
</div> </div>
</div> </div>
<div id="landing-sections" class="uk-padding-large uk-padding-remove-vertical"> <div id="landing-sections" class="uk-text-small">
<ng-container> <ng-container>
<div id="summary" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="summary" class="landing-section uk-padding uk-padding-remove-horizontal">
<div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle"> <div *ngIf="!hasPrimaryInfo" class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
<div class="uk-animation-fade uk-alert uk-alert-primary" role="alert"> <div class="uk-animation-fade uk-text-meta uk-text-large">
No summary information available No summary information available
</div> </div>
</div> </div>
@ -203,49 +232,29 @@
<!-- Related Organizations--> <!-- Related Organizations-->
<div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0" <div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0"
class="uk-margin-medium-bottom uk-width-2-3@m"> class="uk-margin-medium-bottom uk-width-2-3@m">
<div class="uk-text-meta">Related {{openaireEntities.ORGANIZATIONS}}</div> <div class="uk-text-meta uk-margin-small-bottom">Related {{openaireEntities.ORGANIZATIONS}}</div>
<ul class="uk-list organizations uk-margin-remove-top"> <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: lessBtnOrganizations ? resultLandingInfo.organizations.length : thresholdOrganizations }"></ng-container>
<li *ngFor="let organization of (showAll?resultLandingInfo.organizations:resultLandingInfo.organizations.slice(0,3))"> <div *ngIf="resultLandingInfo.organizations.length > thresholdOrganizations && !lessBtnOrganizations"
<a [routerLink]="properties.searchLinkToOrganization.split('?')[0]" [queryParams]="{organizationId: organization.id}"> class="uk-text-center">
{{(organization.name ? organization.name : (organization.shortname?organization.shortname:'[No title available]'))}} <a (click)="viewAllOrganizationsClick();">
<span *ngIf="!organization.name && organization.shortname">({{organization.shortname}})</span>
</a>
<div *ngIf="organization.country && !organization.country.toLowerCase().includes('unknown')">{{organization.country}}</div>
</li>
</ul>
<div *ngIf="!showAll && resultLandingInfo.organizations.length > 3" class="uk-text-center">
<a (click)="showAll = !showAll;">
View more View more
</a> </a>
</div> </div>
<div *ngIf="showAll && resultLandingInfo.organizations.length > 3" class="uk-text-center"> <div *ngIf="viewAllOrganizations && lessBtnOrganizations" class="uk-text-center">
<a (click)="showAll = !showAll;">View less</a> <a (click)="viewAllOrganizations = !viewAllOrganizations; lessBtnOrganizations=false;">View less</a>
</div> </div>
</div> </div>
</div>
<div *ngIf="hasSecondaryInfo" class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove">
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 ||
resultLandingInfo.contexts && resultLandingInfo.contexts.length >0">
</div>
</div>
<div *ngIf="!hasPrimaryInfo && !hasSecondaryInfo"
class="uk-width-expand uk-padding">
<div class="uk-animation-fade uk-alert uk-alert-primary" role="alert">
No summary information available
</div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"> <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<no-load-paging *ngIf="resultLandingInfo.references.length > 1.5*pageSize" [type]="'references'" <results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"
(pageChange)="updateReferencesPage($event)" [page]="referencesPage" [pageSize]="pageSize"
[page]="referencesPage" [pageSize]="1.5*pageSize"
[totalResults]="resultLandingInfo.references.length"> [totalResults]="resultLandingInfo.references.length">
</no-load-paging> </results-and-pages>
<div <div
*ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*1.5*pageSize, referencesPage*1.5*pageSize)"> *ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">
<p *ngIf="item"> <p *ngIf="item">
{{item.name}} {{item.name}}
<ng-container *ngIf="item.ids && item.ids.length > 0"> <ng-container *ngIf="item.ids && item.ids.length > 0">
@ -259,11 +268,11 @@
</ng-container> </ng-container>
</p> </p>
</div> </div>
<no-load-paging *ngIf="resultLandingInfo.references.length > 1.5*pageSize" [type]="'references'" <paging-no-load *ngIf="resultLandingInfo.references.length > pageSize"
(pageChange)="updateReferencesPage($event)" (pageChange)="updateReferencesPage($event)"
[page]="referencesPage" [pageSize]="1.5*pageSize" [currentPage]="referencesPage" [size]="pageSize"
[totalResults]="resultLandingInfo.references.length"> [totalResults]="resultLandingInfo.references.length">
</no-load-paging> </paging-no-load>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0"> <ng-container *ngIf="resultLandingInfo.relatedResults?.length > 0">
@ -273,32 +282,33 @@
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"> <ng-container *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="bioentities" class="landing-section uk-padding uk-padding-remove-horizontal">
<no-load-paging *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'" <results-and-pages *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'"
(pageChange)="updateBioentitiesPage($event)"
[page]="bioentitiesPage" [pageSize]="2*pageSize" [page]="bioentitiesPage" [pageSize]="2*pageSize"
[totalResults]="bioentitiesNum"> [totalResults]="bioentitiesNum">
</no-load-paging> </results-and-pages>
<div class="uk-child-width-1-4@s uk-child-width-1-2 bioentities-buttons" uk-grid> <div class="uk-text-center uk-child-width-1-4@s uk-child-width-1-2 uk-grid uk-grid-medium uk-margin-bottom" uk-grid>
<ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index"> <ng-container *ngFor="let key of getKeys(resultLandingInfo.bioentities) let i=index">
<ng-container <ng-container
*ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)"> *ngFor="let keyIn of keysToArray(resultLandingInfo.bioentities.get(key)).slice((bioentitiesPage-1)*2*pageSize, bioentitiesPage*2*pageSize)">
<div> <div>
<div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"> <div [title]="key" *ngIf="keyIn && !resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-body">
{{keyIn}} {{keyIn}}
</div> </div>
<a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank" class="custom-external" <a [href]="resultLandingInfo.bioentities.get(key).get(keyIn)" target="_blank"
[title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"> [title]="key" *ngIf="keyIn && resultLandingInfo.bioentities.get(key).get(keyIn)"
class="uk-card uk-card-default uk-card-hover uk-card-body custom-external">
{{keyIn}} {{keyIn}}
</a> </a>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
<no-load-paging *ngIf="bioentitiesNum > 2*pageSize" [type]="'bioentities'" <paging-no-load *ngIf="bioentitiesNum > 2*pageSize"
(pageChange)="updateBioentitiesPage($event)" (pageChange)="updateBioentitiesPage($event)"
[page]="bioentitiesPage" [pageSize]="2*pageSize" [currentPage]="bioentitiesPage" [size]="2*pageSize"
[totalResults]="bioentitiesNum"> [totalResults]="bioentitiesNum">
</no-load-paging> </paging-no-load>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="enermapsId && properties.enermapsURL"> <ng-container *ngIf="enermapsId && properties.enermapsURL">
@ -332,30 +342,39 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<div class="uk-margin-small-top uk-flex" uk-sticky="bottom: true" [attr.offset]="offset"> <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
<!-- Last Index Info--> [texts]="pageContents['bottom']"></helper>
<div class="uk-width-2-3@m uk-width-1-2">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:18px; height:20px" loading="lazy" alt="graph">
<span class="uk-margin-small-left uk-text-baseline uk-text-meta uk-text-xsmall">
Powered by <a href="https://graph.openaire.eu" target="_blank" class="graph">OpenAIRE Research Graph</a>
</span>
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-text-xsmall">
. Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta uk-text-xsmall">Anything wrong?</span>
<a (click)="showFeedback = true; scroll()" class="uk-text-xsmall"> Report an Issue</a>
</div>
</div>
</div> </div>
<!-- right box--> <!-- right box-->
<div *ngIf="resultLandingInfo" <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
class="uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small" [class.uk-animation-right]="viewAll"> <div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
<div class="uk-sticky uk-overflow-auto landing-column-height" uk-sticky="bottom: true" [attr.offset]="offset"> class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
(click)="rightSidebarOffcanvasClicked = true;">
<icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon>
</div>
<div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button>
<div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>
</div>
</div>
<div *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m"
[class.uk-animation-right]="viewAll">
<div class="uk-sticky uk-overflow-auto landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>
</div>
<ng-template #right_column>
<div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll"> <div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
<!-- EGI Notebook--> <!-- EGI Notebook-->
<div *ngIf="resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore' <div *ngIf="resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'
@ -401,53 +420,19 @@
<!-- style="border: 1px solid red">--> <!-- style="border: 1px solid red">-->
<!-- <div *ngFor="let item of fakeArray.slice(0, 50); let i=index">test3.{{i}}</div>--> <!-- <div *ngFor="let item of fakeArray.slice(0, 50); let i=index">test3.{{i}}</div>-->
</div> </div>
</div> </ng-template>
</div> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="!showFeedback" class="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 uk-margin-medium-top publication">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="resultLandingInfo" class="uk-grid uk-margin-remove">
<div
class="uk-width-2-3@m uk-width-1-1@s uk-padding uk-padding-remove-left uk-padding-remove-vertical uk-margin-bottom">
</div>
<div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
</div>
<!-- *ngIf="numberOfTabs > 0"-->
<!-- <div class="uk-padding-remove-left uk-width-1-1 uk-margin-medium-top">-->
<!-- &lt;!&ndash; B2 Note&ndash;&gt;-->
<!-- <div *ngIf="properties.b2noteAPIURL && resultLandingInfo" class="uk-margin-medium-top">-->
<!-- <b2note #annotation [id]="id" [landingInfo]="resultLandingInfo" (pidEmitter)="pidInit($event)"></b2note>-->
<!-- </div>-->
<!-- </div>-->
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
<feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo" <feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields" [properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event;"></feedback> [(showForm)]="showFeedback"></feedback>
</div> </div>
<!-- Other versions --> <!-- Other versions -->
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" <modal-alert *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds"
#AlertModalDeletedByInference classBody="uk-width-xxlarge uk-padding-remove" #AlertModalDeletedByInference large="true">
classTitle="landing-modal-header">
<!-- <landing-header [properties]="properties" [title]="resultLandingInfo.title" [modal]="AlertModalDeletedByInference"--> <!-- <landing-header [properties]="properties" [title]="resultLandingInfo.title" [modal]="AlertModalDeletedByInference"-->
<!-- [subTitle]="resultLandingInfo.subtitle" [authorLimit]="10" [showAllAuthors]="false"--> <!-- [subTitle]="resultLandingInfo.subtitle" [authorLimit]="10" [showAllAuthors]="false"-->
<!-- titleClass="title-grey-background"--> <!-- titleClass="title-grey-background"-->
@ -455,7 +440,6 @@
<!-- [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"--> <!-- [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"-->
<!-- [isTitleH1]="false">--> <!-- [isTitleH1]="false">-->
<!-- </landing-header>--> <!-- </landing-header>-->
<div class="uk-padding">
<deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened" <deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']" [id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds" [ids]="resultLandingInfo.deletedByInferenceIds"
@ -476,14 +460,32 @@
[ids]="resultLandingInfo.deletedByInferenceIds" [ids]="resultLandingInfo.deletedByInferenceIds"
[modal]="AlertModalDeletedByInference" [modal]="AlertModalDeletedByInference"
[resultType]="'other'" [type]="'other research products'"></deletedByInference> [resultType]="'other'" [type]="'other research products'"></deletedByInference>
</div>
</modal-alert> </modal-alert>
<modal-alert #citeModal [classTitle]="'landing-modal-header'" <modal-alert *ngIf="resultLandingInfo" #citeModal>
[classBody]="'uk-padding-remove landing-modal'"> <citeThis *ngIf="citeThisClicked" [result]="resultLandingInfo" [id]="id"
<citeThis *ngIf="resultLandingInfo && citeThisClicked" [result]="resultLandingInfo" [id]="id"
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis> [type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
</modal-alert> </modal-alert>
<modal-alert *ngIf="resultLandingInfo"
#addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.organizations" #organizationsModal>
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<ul class="uk-list organizations uk-margin-remove-top">
<li *ngFor="let organization of resultLandingInfo.organizations.slice(0, threshold)" class="uk-tile uk-tile-default uk-padding-small">
<a [routerLink]="properties.searchLinkToOrganization.split('?')[0]" [queryParams]="{organizationId: organization.id}" class="uk-link-text uk-text-bold">
{{(organization.name ? organization.name : (organization.shortname?organization.shortname:'[No title available]'))}}
<span *ngIf="!organization.name && organization.shortname">({{organization.shortname}})</span>
</a>
<div *ngIf="organization.country && !organization.country.toLowerCase().includes('unknown')" class="uk-text-xsmall uk-text-muted">{{organization.country}}</div>
</li>
</ul>
</ng-template>
<ng-template #relation_in_tab let-researchResults="researchResults" let-header="header" let-relatedClassFilters="relatedClassFilters"> <ng-template #relation_in_tab let-researchResults="researchResults" let-header="header" let-relatedClassFilters="relatedClassFilters">
<div <div
@ -500,12 +502,11 @@
<mat-option *ngFor="let relatedClass of relatedClassFilters" [value]="relatedClass">{{relatedClass}}</mat-option> <mat-option *ngFor="let relatedClass of relatedClassFilters" [value]="relatedClass">{{relatedClass}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<no-load-paging <results-and-pages
[type]="'research outcomes'" [type]="'research outcomes'"
(pageChange)="updateRelatedPage($event)"
[page]="relatedPage" [pageSize]="pageSize" [page]="relatedPage" [pageSize]="pageSize"
[totalResults]="researchResults.length"> [totalResults]="researchResults.length">
</no-load-paging> </results-and-pages>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)"> <li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties" <result-preview [modal]="relationModal" [properties]="properties"
@ -513,11 +514,11 @@
[isCard]="false"></result-preview> [isCard]="false"></result-preview>
</li> </li>
</ul> </ul>
<no-load-paging *ngIf="researchResults.length > pageSize" <paging-no-load *ngIf="researchResults.length > pageSize"
[type]="'research outcomes'" class="uk-margin-top"
(pageChange)="updateRelatedPage($event)" (pageChange)="updateRelatedPage($event)"
[page]="relatedPage" [pageSize]="pageSize" [currentPage]="relatedPage" [size]="pageSize"
[totalResults]="researchResults.length"> [totalResults]="researchResults.length">
</no-load-paging> </paging-no-load>
</div> </div>
</ng-template> </ng-template>

65
landingPages/result/resultLanding.component.ts
View File

@ -38,9 +38,9 @@ export class ResultLandingComponent {
enermapsId; enermapsId;
@ViewChild('linkModal') linkModal; @ViewChild('linkModal') linkModal;
@ViewChild('citeModal') citeModal; @ViewChild('citeModal') citeModal;
@ViewChild('addThisModal') addThisModal;
@ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference; @ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference;
@ViewChild('relationModal') relationModal; @ViewChild('relationModal') relationModal;
@ViewChild('organizationModal') organizationModal;
public deleteByInferenceOpened: boolean = false; public deleteByInferenceOpened: boolean = false;
@Input() public resultFromInput: boolean = false; @Input() public resultFromInput: boolean = false;
@Input() public resultLandingInfo: ResultLandingInfo; @Input() public resultLandingInfo: ResultLandingInfo;
@ -50,7 +50,11 @@ export class ResultLandingComponent {
public title: string; public title: string;
/*Show all organizations*/ /*Show all organizations*/
public showAll: boolean = false; public viewAllOrganizations: boolean = false;
public lessBtnOrganizations: boolean = false;
public thresholdOrganizations: number = 5;
@ViewChild('organizationsModal') organizationsModal;
// Links for SEO // Links for SEO
public linkToLandingPage: string = null; public linkToLandingPage: string = null;
@ -84,7 +88,6 @@ export class ResultLandingComponent {
public relatedResultsNum: number = 0; public relatedResultsNum: number = 0;
// Message variables // Message variables
public warningMessage = "";
public errorMessage = ""; public errorMessage = "";
public showLoading: boolean = true; public showLoading: boolean = true;
@ -120,12 +123,15 @@ export class ResultLandingComponent {
public filteredRelatedResults: RelationResult[]; public filteredRelatedResults: RelationResult[];
public offset: number; public offset: number;
@ViewChild("graph_and_feedback") graph_and_feedback;
public viewAll: string = ""; public viewAll: string = "";
public noCommunities: boolean = false; public noCommunities: boolean = false;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public rightSidebarOffcanvasClicked: boolean = false;
constructor(private _resultLandingService: ResultLandingService, constructor(private _resultLandingService: ResultLandingService,
private _vocabulariesService: ISVocabulariesService, private _vocabulariesService: ISVocabulariesService,
private _piwikService: PiwikService, private _piwikService: PiwikService,
@ -209,6 +215,13 @@ export class ResultLandingComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
} }
calcGraphOffset() {
if(this.graph_and_feedback && window) {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight+"px";
}
return 0;
}
private initMetaAndLinks(type: string) { private initMetaAndLinks(type: string) {
if (type == "publication") { if (type == "publication") {
this.type = "publication"; this.type = "publication";
@ -311,7 +324,6 @@ export class ResultLandingComponent {
} }
private getProvenanceVocabularyAndResultLandingInfo() { private getProvenanceVocabularyAndResultLandingInfo() {
this.warningMessage = '';
this.errorMessage = ''; this.errorMessage = '';
this.showLoading = true; this.showLoading = true;
@ -331,7 +343,7 @@ export class ResultLandingComponent {
} }
private setActiveTab() { private setActiveTab() {
if (this.hasPrimaryInfo || this.hasSecondaryInfo) { if (this.hasPrimaryInfo) {
this.activeTab = 'summary'; this.activeTab = 'summary';
} else if (this.resultLandingInfo.references && this.resultLandingInfo.references.length > 0) { } else if (this.resultLandingInfo.references && this.resultLandingInfo.references.length > 0) {
this.activeTab = 'references'; this.activeTab = 'references';
@ -443,6 +455,8 @@ export class ResultLandingComponent {
this.showLoading = false; this.showLoading = false;
this.setActiveTab(); this.setActiveTab();
this.cdr.detectChanges();
}, },
err => { err => {
this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id + " ("+this.identifier.class+")")), err); this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id + " ("+this.identifier.class+")")), err);
@ -474,13 +488,22 @@ export class ResultLandingComponent {
public get hasPrimaryInfo(): boolean { public get hasPrimaryInfo(): boolean {
return !!this.resultLandingInfo && ( return !!this.resultLandingInfo && (
(!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0) (!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
|| !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects || !!this.resultLandingInfo.subjects
|| (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0)); || (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
} }
public get hasSecondaryInfo(): boolean { public get hasRightSidebarInfo(): boolean {
return (this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0) || return (this.resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore'
(this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0) || && (properties.environment == 'beta' || properties.environment == 'development'))
||
(this.resultLandingInfo.sdg && this.resultLandingInfo.sdg.length > 0)
||
(this.resultLandingInfo.fos && this.resultLandingInfo.fos.length > 0)
||
(this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0)
||
(this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0 && !this.noCommunities)
||
(this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0); (this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0);
} }
@ -683,6 +706,14 @@ export class ResultLandingComponent {
this.citeModal.alertTitle = "Cite this " + this.getTypeName(); this.citeModal.alertTitle = "Cite this " + this.getTypeName();
this.citeModal.open(); this.citeModal.open();
} }
public openAddThisModal() {
this.addThisModal.cancelButton = false;
this.addThisModal.okButton = false;
this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";
this.addThisModal.open();
}
private addNoIndexFilter() { private addNoIndexFilter() {
let allow = this.checkIfAllowed(this.resultLandingInfo); let allow = this.checkIfAllowed(this.resultLandingInfo);
if(!allow) { if(!allow) {
@ -794,4 +825,20 @@ export class ResultLandingComponent {
this.relatedPage = 1; this.relatedPage = 1;
this.filteredRelatedResults = this.resultLandingInfo.relatedResults.filter(result => !this.relatedClassSelected || result.relationName.toLowerCase() == this.relatedClassSelected.toLowerCase()); this.filteredRelatedResults = this.resultLandingInfo.relatedResults.filter(result => !this.relatedClassSelected || result.relationName.toLowerCase() == this.relatedClassSelected.toLowerCase());
} }
public viewAllOrganizationsClick() {
this.viewAllOrganizations = true;
if(this.resultLandingInfo.organizations.length <= this.thresholdOrganizations*2) {
this.lessBtnOrganizations = true;
} else {
this.openOrganizationsModal();
}
}
public openOrganizationsModal() {
this.organizationsModal.cancelButton = false;
this.organizationsModal.okButton = false;
this.organizationsModal.alertTitle = "Related Organizations";
this.organizationsModal.open();
}
} }

4
landingPages/result/resultLanding.module.ts
View File

@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {link, orcid_add, orcid_bin} from "../../utils/icons/icons"; import {graph, link, quotes} from "../../utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
@ -56,6 +56,6 @@ import {link, orcid_add, orcid_bin} from "../../utils/icons/icons";
}) })
export class ResultLandingModule { export class ResultLandingModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link]) this.iconsService.registerIcons([link, graph, quotes])
} }
} }

83
orcid/orcid-work.component.ts
View File

@ -63,8 +63,8 @@ declare var UIkit: any;
[class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="!isLoggedIn || !pids" [class.uk-text-muted]="!isLoggedIn || !pids"
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)"> (mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
<icon *ngIf="!hoverAdd" name="orcid_add" ratio="1.1"></icon> <icon *ngIf="!hoverAdd" name="orcid_add" ratio="1.1" visuallyHidden="add"></icon>
<icon *ngIf="hoverAdd" name="add"></icon> <icon *ngIf="hoverAdd" name="add" visuallyHidden="add"></icon>
</a> </a>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
@ -78,36 +78,35 @@ declare var UIkit: any;
[class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="!isLoggedIn || !pids" [class.uk-text-muted]="!isLoggedIn || !pids"
(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')"> (mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
<icon *ngIf="!hoverDelete" name="orcid_bin" ratio="1.1"></icon> <icon *ngIf="!hoverDelete" name="orcid_bin" ratio="1.1" visuallyHidden="delete"></icon>
<icon *ngIf="hoverDelete" name="delete_outline" class="uk-text-danger"></icon> <icon *ngIf="hoverDelete" name="delete_outline" class="uk-text-danger" visuallyHidden="delete"></icon>
</a> </a>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
</span> </span>
</ng-container> </ng-container>
<modal-alert #grantModal [classTitle]="'landing-modal-header uk-padding-small'" <modal-alert #grantModal (alertOutput)="openGrantWindow()">
[classBody]="'landing-modal uk-padding-remove'"> <div class="uk-text-center">
<div class="uk-text-center uk-padding-small">
<div>{{requestGrantMessage}}</div> <div>{{requestGrantMessage}}</div>
<div class="uk-margin-medium-top uk-align-right"> <!-- <div class="uk-margin-medium-top uk-align-right">-->
<button (click)="closeGrantModal()" type="submit" <!-- <button (click)="closeGrantModal()" type="submit"-->
class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default"> <!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
<span>Cancel</span> <!-- <span>Cancel</span>-->
</button> <!-- </button>-->
<button (click)="openGrantWindow()" type="submit"
class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">
<span>Grant OpenAIRE</span>
</button>
<!-- <button (click)="openGrantWindow()" type="submit"--> <!-- <button (click)="openGrantWindow()" type="submit"-->
<!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">--> <!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}--> <!-- <span>Grant OpenAIRE</span>-->
<!-- <span>Create or Connect your ORCID iD</span>-->
<!-- </button>--> <!-- </button>-->
</div>
<!--&lt;!&ndash; <button (click)="openGrantWindow()" type="submit"&ndash;&gt;-->
<!--&lt;!&ndash; class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left orcid-button">&ndash;&gt;-->
<!--&lt;!&ndash; <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}&ndash;&gt;-->
<!--&lt;!&ndash; <span>Create or Connect your ORCID iD</span>&ndash;&gt;-->
<!--&lt;!&ndash; </button>&ndash;&gt;-->
<!-- </div>-->
</div> </div>
</modal-alert> </modal-alert>
@ -164,9 +163,8 @@ declare var UIkit: any;
</span> </span>
</ng-container> </ng-container>
<modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'" <modal-alert #workModal>
[classBody]="'landing-modal uk-padding-remove'"> <div *ngIf="orcidWorks">
<div *ngIf="orcidWorks" class="uk-padding-small">
<div *ngFor="let work of orcidWorks['bulk']"> <div *ngFor="let work of orcidWorks['bulk']">
<ng-container *ngTemplateOutlet="orcidWorkPreview; context:{work: work['work']}"></ng-container> <ng-container *ngTemplateOutlet="orcidWorkPreview; context:{work: work['work']}"></ng-container>
</div> </div>
@ -263,9 +261,7 @@ declare var UIkit: any;
</div> </div>
</ng-template> </ng-template>
<modal-alert #propagationModal [classTitle]="'landing-modal-header uk-padding-small'" <modal-alert #propagationModal (alertOutput)="confirmedPropagation()">
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-padding-small">
<div> <div>
This research outcome is the result of <span class="uk-text-bold"> merged research outcomes in OpenAIRE</span>. This research outcome is the result of <span class="uk-text-bold"> merged research outcomes in OpenAIRE</span>.
<br><br> <br><br>
@ -278,18 +274,17 @@ declare var UIkit: any;
</div> </div>
</div> </div>
<div class="uk-margin-medium-top uk-align-right"> <!-- <div class="uk-margin-medium-top uk-align-right">-->
<button (click)="closePropagationModal()" type="submit" <!-- <button (click)="closePropagationModal()" type="submit"-->
class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default"> <!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-button-default">-->
<span>Cancel</span> <!-- <span>Cancel</span>-->
</button> <!-- </button>-->
<button (click)="confirmedPropagation()" type="submit" <!-- <button (click)="confirmedPropagation()" type="submit"-->
class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary"> <!-- class="uk-button uk-padding-small uk-padding-remove-vertical uk-margin-left uk-button-primary">-->
<span>Continue</span> <!-- <span>Continue</span>-->
</button> <!-- </button>-->
</div> <!-- </div>-->
</div>
</modal-alert> </modal-alert>
` `
}) })
@ -690,8 +685,10 @@ export class OrcidWorkComponent {
} }
openGrantModal(title: string) { openGrantModal(title: string) {
this.grantModal.cancelButton = false; this.grantModal.cancelButton = true;
this.grantModal.okButton = false; this.grantModal.okButton = true;
this.grantModal.okButtonText = "Grant OpenAIRE";
this.grantModal.okButtonLeft = false;
this.grantModal.alertTitle = title; this.grantModal.alertTitle = title;
this.grantModal.open(); this.grantModal.open();
} }
@ -723,8 +720,10 @@ export class OrcidWorkComponent {
} }
openPropagationModal(title: string) { openPropagationModal(title: string) {
this.propagationModal.cancelButton = false; this.propagationModal.cancelButton = true;
this.propagationModal.okButton = false; this.propagationModal.okButton = true;
this.propagationModal.okButtonText = "Continue";
this.propagationModal.okButtonLeft = false;
this.propagationModal.alertTitle = title; this.propagationModal.alertTitle = title;
this.propagationModal.open(); this.propagationModal.open();
} }

14
searchPages/searchUtils/no-load-paging.component.ts
View File

@ -3,18 +3,12 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({ @Component({
selector: 'no-load-paging', selector: 'no-load-paging',
template: ` template: `
<div class="paging-hr searchPaging uk-margin-small-bottom"> <div class="uk-margin-small-bottom">
<div class="uk-panel uk-margin-small-top uk-grid uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid> <div class="uk-panel uk-grid uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<h6 *ngIf="type && totalResults"> <results-and-pages [type]="type" [page]="page" [pageSize]="pageSize" [totalResults]="totalResults"></results-and-pages>
<span>{{totalResults | number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{page}}</span>
<span class="uk-text-muted"> of </span>
<span>{{paging.getTotalPages() | number}}</span>
</h6>
<div> <div>
<paging-no-load #paging [currentPage]="page" <paging-no-load #paging [currentPage]="page"
customClasses="uk-margin-remove-bottom" customClasses="uk-margin-remove-bottom uk-flex-right"
[totalResults]="totalResults" [size]="pageSize" [totalResults]="totalResults" [size]="pageSize"
(pageChange)="updatePage($event)"> (pageChange)="updatePage($event)">
</paging-no-load> </paging-no-load>

2
sharedComponents/cookie-law/cookie-law.css
View File

@ -21,7 +21,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 100; z-index: 1000;
font-smooth: always; font-smooth: always;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-align: center; text-align: center;

7
utils/authors/showAuthors.component.ts
View File

@ -64,7 +64,7 @@ import {properties} from "../../../../environments/environment";
{{author.fullName}} in OpenAIRE {{author.fullName}} in OpenAIRE
</div> </div>
<div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right"> <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" <a class="uk-button uk-button-primary uk-box-no-shadow uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
(click)="onClick()" (click)="onClick()"
[queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])" [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults"> routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
@ -89,14 +89,11 @@ import {properties} from "../../../../environments/environment";
<a>View less authors</a> <a>View less authors</a>
</div> </div>
<modal-alert #authorsModal [classTitle]="'landing-modal-header'" <modal-alert #authorsModal>
[classBody]="'landing-modal uk-padding-remove'">
<div class="uk-padding uk-padding-remove-top uk-overflow-auto">
<span *ngFor="let author of authors; let i=index" <span *ngFor="let author of authors; let i=index"
class=" uk-text-small uk-text-emphasis"> class=" uk-text-small uk-text-emphasis">
<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container> <ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
</span> </span>
</div>
</modal-alert> </modal-alert>
` `

12
utils/icons/icons.ts
View File

@ -221,3 +221,15 @@ export const link = {
} }
/** Add new icon under this line to be sure that it will be added on preview */ /** Add new icon under this line to be sure that it will be added on preview */
export const quotes = {
name: 'quotes',
data: '<svg width="20"\n' +
' height="20"\n' +
' viewBox="0 0 20 20"\n' +
' xmlns="http://www.w3.org/2000/svg"\n' +
' data-svg="quote-right">\n' +
' <path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>\n' +
' <path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>\n' +
' </svg>'
}

26
utils/modal/alert.ts
View File

@ -7,18 +7,22 @@ declare var UIkit: any;
selector: 'modal-alert', selector: 'modal-alert',
template: ` template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal> <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left" <div class="uk-modal-dialog">
[ngClass]="classBody"> <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader> <div class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-close uk-icon uk-modal-close-default uk-float-right" (click)='cancel()'>
<icon name="close" ratio="1.5"></icon>
</button>
<h5 class="uk-margin-remove">{{alertTitle}}</h5> <h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div> </div>
<div class="uk-margin"> <button class="uk-close uk-icon uk-margin-left" (click)='cancel()'>
<icon name="close" ratio="1.5"></icon>
</button>
</div>
<div class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div> <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<div *ngIf="choice || okButton || cancelButton" class="uk-modal-footer">
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<label *ngIf="choice" class="uk-width-1-2"> <label *ngIf="choice" class="uk-width-1-2">
<input type="checkbox" [(ngModel)]="select"> <input type="checkbox" [(ngModel)]="select">
@ -27,11 +31,11 @@ declare var UIkit: any;
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'"> <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid> <div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft"> <span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button uk-button-primary" [disabled]="okDisabled" <button class="uk-button uk-button-primary uk-box-no-shadow" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button> [class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span> </span>
<span *ngIf="cancelButton"> <span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-margin-small-left" <button class="uk-button uk-button-default uk-box-no-shadow uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button> (click)="cancel()">{{cancelButtonText}}</button>
</span> </span>
</div> </div>
@ -39,6 +43,7 @@ declare var UIkit: any;
</div> </div>
</div> </div>
</div> </div>
</div>
`, `,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })
@ -47,9 +52,10 @@ declare var UIkit: any;
*/ */
export class AlertModal { export class AlertModal {
@Input() id: string = "modal"; @Input() id: string = "modal";
@Input() classTitle: string = ""; @Input() classTitle: string = "uk-background-primary-opacity";
@Input() classBody: string = ""; @Input() classBody: string = "";
@Input() large: boolean = false; @Input() large: boolean = false;
@Input() overflowBody: boolean = true;
/** /**
* Caption for the title. * Caption for the title.
*/ */

3
utils/paging.module.ts
View File

@ -7,6 +7,7 @@ import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component';
import {PagingFormatter} from './pagingFormatter.component'; import {PagingFormatter} from './pagingFormatter.component';
import {IconsModule} from "./icons/icons.module"; import {IconsModule} from "./icons/icons.module";
import {ResultsAndPagesNumComponent} from "./resultsAndPagesNum.component";
@NgModule({ @NgModule({
@ -14,10 +15,12 @@ import {IconsModule} from "./icons/icons.module";
CommonModule, FormsModule, RouterModule, IconsModule CommonModule, FormsModule, RouterModule, IconsModule
], ],
declarations: [ declarations: [
ResultsAndPagesNumComponent,
pagingFormatterNoLoad, pagingFormatterNoLoad,
PagingFormatter, PagingFormatter,
], ],
exports: [ exports: [
ResultsAndPagesNumComponent,
pagingFormatterNoLoad, pagingFormatterNoLoad,
PagingFormatter, PagingFormatter,
] ]

4
utils/pagingFormatter.component.ts
View File

@ -8,7 +8,7 @@ import {properties} from "../../../environments/environment";
template: ` template: `
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) " <ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
[class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position"> [class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">
<li *ngIf="currentPage > 1"> <li [class.uk-invisible]="currentPage <= 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))" <a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous"> [routerLink]=baseUrl aria-label="Previous">
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon> <icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon>
@ -33,7 +33,7 @@ import {properties} from "../../../environments/environment";
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a <li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))" [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))"
[routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li> [routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li>
<li *ngIf="getTotalPages() > currentPage"> <li [class.uk-invisible]="getTotalPages() <= currentPage">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))" <a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
[routerLink]=baseUrl aria-label="Next"> [routerLink]=baseUrl aria-label="Next">
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon> <icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon>

8
utils/pagingFormatterNoLoad.component.ts
View File

@ -9,9 +9,9 @@ import {properties} from "../../../environments/environment";
selector: 'paging-no-load', selector: 'paging-no-load',
template: ` template: `
<ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " [ngClass]="customClasses" <ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " [ngClass]="customClasses"
class="uk-pagination uk-flex uk-flex-middle uk-flex-right"> class="uk-pagination uk-flex uk-flex-middle ">
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous"> <li [class.uk-invisible]="currentPage <= 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li> <span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li> <li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{(currentPage -2) | number}}</a></li>
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li> <li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{(currentPage -1) | number}}</a></li>
@ -20,7 +20,7 @@ import {properties} from "../../../environments/environment";
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li> <li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li> <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li> <li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
<li *ngIf="getTotalPages() > currentPage"> <li [class.uk-invisible]="getTotalPages() <= currentPage">
<a (click)="onPage(currentPage +1)" aria-label="Next"> <a (click)="onPage(currentPage +1)" aria-label="Next">
<span class="uk-icon"> <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
@ -36,7 +36,7 @@ import {properties} from "../../../environments/environment";
export class pagingFormatterNoLoad { export class pagingFormatterNoLoad {
@Input() public currentPage: number = 1; @Input() public currentPage: number = 1;
@Input() public customClasses: string = ''; @Input() public customClasses: string = 'uk-flex-center';
// @Input() public navigateTo: string; // @Input() public navigateTo: string;
@Input() public term: string=''; @Input() public term: string='';
@Input() public size: number=10; @Input() public size: number=10;

33
utils/resultsAndPagesNum.component.ts Normal file
View File

@ -0,0 +1,33 @@
import {Component, Input} from "@angular/core";
@Component({
selector: 'results-and-pages',
template: `
<h6 *ngIf="type && totalResults" [ngClass]="customClasses">
<span>{{totalResults | number}}</span>
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
<span>{{page}}</span>
<span class="uk-text-meta"> of </span>
<span>{{getTotalPages() | number}}</span>
</h6>
`
})
export class ResultsAndPagesNumComponent {
@Input() type: string;
@Input() page: number = 1;
@Input() pageSize: number = 10;
@Input() totalResults: number;
@Input() customClasses: string = "";
constructor() {}
getTotalPages(){
let total: number;
let i= this.totalResults/this.pageSize;
let integerI=parseInt(''+i);
total = parseInt(''+((i==integerI)?i:i+1));
return total;
}
}

7
utils/tabs/tabs.component.ts
View File

@ -17,7 +17,7 @@ import {TabComponent} from './tab.component';
selector: 'my-tabs', selector: 'my-tabs',
template: ` template: `
<div id="mytabs" class="uk-grid uk-margin-remove-left"> <div id="mytabs" class="uk-grid uk-margin-remove-left">
<div class="uk-margin-medium-right uk-padding-small uk-width-expand uk-padding-remove-bottom" > <div class="uk-margin-medium-right uk-margin-top uk uk-padding-remove uk-width-expand" >
<div class=" uk-width-1-1" uk-slider="finite: true"> <div class=" uk-width-1-1" uk-slider="finite: true">
<div class="uk-position-relative " > <div class="uk-position-relative " >
<div class="uk-slider-container "> <div class="uk-slider-container ">
@ -92,6 +92,7 @@ export class TabsComponent implements AfterContentInit {
public customClass: string; public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter(); @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
@Input() offsetForSticky:number=0;
@Input() isSticky:boolean; @Input() isSticky:boolean;
@Output() isStickyChange :EventEmitter<boolean> = new EventEmitter(); @Output() isStickyChange :EventEmitter<boolean> = new EventEmitter();
public selected: string; public selected: string;
@ -128,10 +129,10 @@ export class TabsComponent implements AfterContentInit {
} }
scroll(){ scroll(){
let tabDistanceFromCurrentViewTop = document.getElementById("main-tabs-div") ? document.getElementById("main-tabs-div").getBoundingClientRect().top : null; let tabDistanceFromCurrentViewTop = document.getElementById("main-tabs-div") ? document.getElementById("main-tabs-div").getBoundingClientRect().top : null;
if((tabDistanceFromCurrentViewTop <= 0)){ if((tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(true); this.isStickyChange.emit(true);
this.isSticky =true; this.isSticky =true;
}else if(!(tabDistanceFromCurrentViewTop <= 0)){ }else if(!(tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(false); this.isStickyChange.emit(false);
this.isSticky =false; this.isSticky =false;
} }