From 8b94b7f98acfc46bde3c6898ec5110eefeebe9c2 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Thu, 5 May 2022 20:54:01 +0300 Subject: [PATCH] [Library & common-assets | new-theme]: 1. landing-utils.css: Deleted .landing-background-default-color (replaced in html with uk-background-default). 2. resultLanding.component.html & project.component.html & organization.component.html & dataProvider.component.html: Updates and fixes for redesign. a. #graph_and_feedback outside margins and checks (invisible when no info). b. [Bug fix] margin-top of center column fixed (uk-sticky-placeholder was adding space). c. [Bug fix] Show again right sidebar when screen becomes medium+. d. [Bug fix] Added grid in labels. 3. resultLanding.component.ts & project.component.ts & organization.component.ts & dataProvider.component.ts: Added ResizeObserver and updated how graph_offset is calculated | Added graph_height field to set margin-top of center column. 4. project.component.ts: In getFileNameType() use OpenaireEntities. 5. organization.component.ts: a. In contentTypes field added type file names from OpenaireEntities b. Added field contentFileName. c. Added field shouldSticky and observer for "bottom" to stop sticky title & tabs when bottom is in viewport. 6. dataProvider.component.ts: Added field "provenanceUrls" and method "getProvenanceUrls()" to flatten all urls from dataProviderInfo.provenance. --- .../dataProvider/dataProvider.component.html | 610 +++++++++--------- .../dataProvider/dataProvider.component.ts | 52 +- .../organization/organization.component.html | 294 ++++----- .../organization/organization.component.ts | 82 ++- landingPages/project/project.component.html | 594 ++++++++--------- landingPages/project/project.component.ts | 66 +- .../result/resultLanding.component.html | 469 +++++++------- .../result/resultLanding.component.ts | 41 +- 8 files changed, 1169 insertions(+), 1039 deletions(-) diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html index fcecfd70..fe0adbe3 100644 --- a/landingPages/dataProvider/dataProvider.component.html +++ b/landingPages/dataProvider/dataProvider.component.html @@ -8,11 +8,11 @@ -
+
-
+
@@ -43,18 +43,18 @@
-
+
- Powered by OpenAIRE Research Graph - + Powered by OpenAIRE Research Graph + - . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} - + . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} +
@@ -64,327 +64,331 @@
-
-
- - - +
- - + +
+ + + - - + + - -
- - - - {{dataProviderInfo.compatibility.info}} - {{dataProviderInfo.compatibility.name}} + +
+ Web page: + + {{dataProviderInfo.title.url}} - - {{dataProviderInfo.compatibility.info}} - - - {{dataProviderInfo.compatibility.name}} - -   - - - OpenAIRE Text Mining  - - - - {{country}}  - - -
-
- -
-
- - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
-
-
- No summary information available -
-
- -
-
-
Description
-
-
-
-
-
- -
    - -
- -
- -
Collected full-texts
- {{dataProviderInfo.aggregationStatus.fulltexts | number}} -
- -
Results with funding information
- {{dataProviderInfo.fundedContent | number}} -
-
- - -
-
Countries
- {{dataProviderInfo.countries.join(", ")}} -
- - -
-
-
Subjects
- {{dataProviderInfo.subjects.slice(0, lessBtnSubjects ? dataProviderInfo.subjects.length : thresholdSubjects).join(", ")}} - ... -
- - + + {{dataProviderInfo.compatibility.info}} + + + {{dataProviderInfo.compatibility.name}} + +   + + + OpenAIRE Text Mining  + + + + {{country}}  + +
-
-
-
- + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+ No summary information available
-
-
Detailed information @
- - - {{provenance}} - - - {{provenance}} - - [{{i}}] - - - , +
+
+ +
+
+
Description
+
+
+
+ +
+
+ +
    + +
+ +
+ +
Collected full-texts
+ {{dataProviderInfo.aggregationStatus.fulltexts | number}} +
+ +
Results with funding information
+ {{dataProviderInfo.fundedContent | number}}
-
-
-
{{openaireEntities.ORGANIZATIONS}}
- - -
- - View all {{dataProviderInfo.organizations.length | number}} organizations - + -
- View less organizations + +
+
Countries
+ {{dataProviderInfo.countries.join(", ")}} +
+ + +
+
+
Subjects
+ {{dataProviderInfo.subjects.slice(0, lessBtnSubjects ? dataProviderInfo.subjects.length : thresholdSubjects).join(", ")}} + ... +
+ + +
+ +
+
+
+
+ +
+
Detailed information @
+ + + {{provenance}} + + + {{provenance}} + + [{{i}}] + + + , + +
+
+
-
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - + + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + -
-
Statistics
- -
- - -
+
+
Statistics
+ +
+ + +
+
+
+
+
-
-
diff --git a/landingPages/dataProvider/dataProvider.component.ts b/landingPages/dataProvider/dataProvider.component.ts index b4e19223..7249b7e5 100644 --- a/landingPages/dataProvider/dataProvider.component.ts +++ b/landingPages/dataProvider/dataProvider.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; @@ -29,6 +29,7 @@ import {Subscriber} from "rxjs"; import {TabComponent} from "../../utils/tabs/tab.component"; import {OpenaireEntities} from "../../utils/properties/searchFields"; +declare var ResizeObserver; @Component({ selector: 'dataprovider', @@ -41,6 +42,7 @@ export class DataProviderComponent { @Input() communityId = null; public dataProviderInfo: DataProviderInfo; public datasourceId: string; + public provenanceUrls: string[] = null; // Message variables public warningMessage = ""; @@ -122,10 +124,10 @@ export class DataProviderComponent { public offset: number; public stickyHeader: boolean = false; public graph_offset: number = 0; + public graph_height: number = 0; @ViewChild("graph_and_feedback") graph_and_feedback; public shouldSticky: boolean = true; - private observer: IntersectionObserver; subscriptions = []; properties: EnvProperties = properties; @@ -143,7 +145,8 @@ export class DataProviderComponent { private seoService: SEOService, private helper: HelperService, private _location: Location, - private indexInfoService: IndexInfoService) { + private indexInfoService: IndexInfoService, + private cdr: ChangeDetectorRef) { this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService); this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService); @@ -190,29 +193,50 @@ export class DataProviderComponent { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); let bottom = document.getElementById('bottom'); if(bottom) { - this.observer = new IntersectionObserver(entries => { + let observer = new IntersectionObserver(entries => { entries.forEach(entry => { this.shouldSticky = !entry.isIntersecting; }) }); - this.observer.observe(bottom); + this.subscriptions.push(observer); + observer.observe(bottom); + } + if(this.graph_and_feedback) { + this.observeGraphAndFeedback(); } } } ngAfterContentChecked() { if(this.graph_and_feedback && window) { - this.graph_offset = this.calcGraphOffset(); + this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement); } } - calcGraphOffset() { - return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; + + public observeGraphAndFeedback() { + let resizeObs = new ResizeObserver(entries => { + entries.forEach(entry => { + setTimeout(() => { + // console.log(entry); + this.graph_offset = this.calcGraphOffset(entry.target); + this.cdr.detectChanges(); + }); + }) + }); + this.subscriptions.push(resizeObs); + resizeObs.observe(this.graph_and_feedback.nativeElement); + } + + calcGraphOffset(element) { + this.graph_height = element.offsetHeight; + return window.innerHeight-this.graph_height; } public initializeValues() { this._numberOfTabs = 0; this.tabsAreInitialized = false; this.dataProviderInfo = null; + this.provenanceUrls = null; this.aggregationStatusIsInitialized = false; this.fetchProjects.searchUtils.status = this.errorCodes.LOADING; this.fetchProjects.searchUtils.totalResults = 0; @@ -246,6 +270,8 @@ export class DataProviderComponent { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { subscription.unsubscribe(); + } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + subscription.disconnect(); } }); this.fetchDatasets.clearSubscriptions(); @@ -254,10 +280,6 @@ export class DataProviderComponent { this.fetchPublications.clearSubscriptions(); this.fetchDataproviders.clearSubscriptions(); this.fetchProjects.clearSubscriptions(); - - if(this.observer) { - this.observer.disconnect(); - } } private getDataProviderInfo(id: string) { @@ -266,6 +288,7 @@ export class DataProviderComponent { this.showLoading = true; this.dataProviderInfo = null; + this.provenanceUrls = null; this.showTabs = false; if (this.datasourceId == null || this.datasourceId == '') { @@ -275,6 +298,7 @@ export class DataProviderComponent { this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.properties).subscribe( data => { this.dataProviderInfo = data; + this.getProvenanceUrls(); this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); if (typeof document !== 'undefined') { this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId); @@ -756,4 +780,8 @@ export class DataProviderComponent { public getKeys( map) { return Array.from(map.keys()); } + + public getProvenanceUrls() { + this.provenanceUrls = Array.from(this.dataProviderInfo.provenance.values()).map(res => res['url']).reduce((acc, val) => acc.concat(val), []); + } } diff --git a/landingPages/organization/organization.component.html b/landingPages/organization/organization.component.html index 432d42af..450abe67 100644 --- a/landingPages/organization/organization.component.html +++ b/landingPages/organization/organization.component.html @@ -3,10 +3,10 @@
-
+
-
+
@@ -36,19 +36,19 @@
-
- - -
+
+ + +
- Powered by OpenAIRE Research Graph - + Powered by OpenAIRE Research Graph + - . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} - + . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} +
@@ -57,133 +57,139 @@
-
+
- -
- - - - - - - - - - View all {{organizationInfo.deletedByInferenceIds.length}} versions - - - - - - -
- - - -
- Country: {{organizationInfo.country}} -
-
-
- -
-
- - - - - - - - - - - - - - - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - + +
+ + +
+ + + + + + + + + + View all {{organizationInfo.deletedByInferenceIds.length}} versions + + + + + + +
+ + + +
+ Country: {{organizationInfo.country}} +
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + +
+
@@ -206,11 +212,11 @@ - + - +
@@ -223,7 +229,7 @@ title="No report available"> @@ -232,7 +238,7 @@ title="No report available"> @@ -241,7 +247,7 @@ title="No report available"> @@ -250,7 +256,7 @@ title="No report available"> @@ -259,7 +265,7 @@ title="No report available"> @@ -280,14 +286,14 @@
  • diff --git a/landingPages/organization/organization.component.ts b/landingPages/organization/organization.component.ts index f42ee2f5..05313861 100644 --- a/landingPages/organization/organization.component.ts +++ b/landingPages/organization/organization.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; import {OrganizationService} from '../../services/organization.service'; @@ -27,6 +27,8 @@ import {properties} from "../../../../environments/environment"; import {OpenaireEntities} from '../../utils/properties/searchFields'; import {Option} from '../../sharedComponents/input/input.component'; +declare var ResizeObserver; + @Component({ selector: 'organization', templateUrl: 'organization.component.html', @@ -84,13 +86,14 @@ export class OrganizationComponent { public divContents = null; // Helper variables to specify funder in downloadPublicationsFile function - public contentTypes: [string, string][] = [ - ['results', 'all ' + OpenaireEntities.RESULTS], - ['publications', OpenaireEntities.PUBLICATIONS], - ['datasets', OpenaireEntities.DATASETS], - ['software', OpenaireEntities.SOFTWARE], - ['other', OpenaireEntities.OTHER], + public contentTypes: [string, string, string][] = [ + ['results', 'all ' + OpenaireEntities.RESULTS, OpenaireEntities.RESULTS_FILE], + ['publications', OpenaireEntities.PUBLICATIONS, OpenaireEntities.PUBLICATIONS_FILE], + ['datasets', OpenaireEntities.DATASETS, OpenaireEntities.DATASETS_FILE], + ['software', OpenaireEntities.SOFTWARE, OpenaireEntities.SOFTWARE_FILE], + ['other', OpenaireEntities.OTHER, OpenaireEntities.OTHER_FILE], ]; + public contentFileName: string = ''; public funderContentType: string = ''; public funder: any = ""; private funderId: string; @@ -101,7 +104,10 @@ export class OrganizationComponent { public offset: number; public stickyHeader: boolean = false; public graph_offset: number = 0; - @ViewChild("graph_and_feedback") graph_and_feedback; + public graph_height: number = 0; + @ViewChild("graph_and_feedback") graph_and_feedback; + + public shouldSticky: boolean = true; subscriptions = []; innerReportSubscriptions = []; @@ -131,7 +137,8 @@ export class OrganizationComponent { private helper: HelperService, private seoService: SEOService, private _location: Location, - private indexInfoService: IndexInfoService) { + private indexInfoService: IndexInfoService, + private cdr: ChangeDetectorRef) { this.fetchProjects = new FetchProjects(this._searchProjectsService); this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); @@ -179,16 +186,50 @@ export class OrganizationComponent { //this.csvAffiliatedPublications = this.downloadURLAPI + "?format=csv&type=publications&fq=(((oaftype exact result) and (resulttypeid exact publication)) and (relorganizationid exact \"" + this.organizationId + "\"))"; this.csvProjectParamsHead = 'format=csv&type=projects&fq=((funder exact "'; //this.csvPublicationParamsHead = 'format=csv-special&type=publications&page=0&query=((((oaftype exact result) and (resulttypeid exact publication)) and (funderid exact '; - this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); } - ngAfterContentChecked() { - if(this.graph_and_feedback && window) { - this.graph_offset = this.calcGraphOffset(); + ngAfterViewInit() { + if (typeof document !== 'undefined') { + this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); + let bottom = document.getElementById('bottom'); + if(bottom) { + let observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + this.shouldSticky = !entry.isIntersecting; + }) + }); + this.subscriptions.push(observer); + observer.observe(bottom); + } + if(this.graph_and_feedback) { + this.observeGraphAndFeedback(); + } } } - calcGraphOffset() { - return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; + + ngAfterContentChecked() { + if(this.graph_and_feedback && window) { + this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement); + } + } + + public observeGraphAndFeedback() { + let resizeObs = new ResizeObserver(entries => { + entries.forEach(entry => { + setTimeout(() => { + // console.log(entry); + this.graph_offset = this.calcGraphOffset(entry.target); + this.cdr.detectChanges(); + }); + }) + }); + this.subscriptions.push(resizeObs); + resizeObs.observe(this.graph_and_feedback.nativeElement); + } + + calcGraphOffset(element) { + this.graph_height = element.offsetHeight; + return window.innerHeight-this.graph_height; } private getPageContents() { @@ -211,6 +252,8 @@ export class OrganizationComponent { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { subscription.unsubscribe(); + } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + subscription.disconnect(); } }); this.innerReportSubscriptions.forEach(subscription => { @@ -419,7 +462,7 @@ export class OrganizationComponent { let title: boolean = false; let title_index: number = 0; - let filename: string = 'funder-project-' + this.funderContentType + '-report'; + let filename: string = 'funder-project-' + this.contentFileName + '-report'; this.subscriptions.push(this._searchProjectsService.getProjectsForOrganizations(this.organizationId, ' and (funder exact "' + this.encodeURI(this.funderId) + '" ) ', 1, this.funderCount, [], this.properties).subscribe( data => { @@ -570,7 +613,7 @@ export class OrganizationComponent { } } - public confirmOpenApplyAll(contentType: string) { + public confirmOpenApplyAll(contentType: string, contentFileName: string) { this.alertApplyAll.cancelButton = true; this.alertApplyAll.okButton = true; this.alertApplyAll.alertTitle = "CSV FILE"; @@ -581,6 +624,7 @@ export class OrganizationComponent { this.funderId = this.funder.id; this.funderCount = this.funder.number; this.funderContentType = contentType; + this.contentFileName = contentFileName; } public confirmCloseApplyAll() { @@ -627,10 +671,6 @@ export class OrganizationComponent { return this.downloadURLAPI + '?' + this.csvProjectParamsHead + encodeURI(this.funder.id) + this.csvParamsTail; } - open(value: any) { - console.log(value); - } - openDownloadReportsModal() { this.funder = this.fetchProjects.funders[0]; this.downloadReportsModal.cancelButton = false; diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html index 52b390e6..9bf55fa9 100644 --- a/landingPages/project/project.component.html +++ b/landingPages/project/project.component.html @@ -8,11 +8,11 @@
-
+
-
+
@@ -82,18 +82,18 @@
-
+
-
+
- Powered by OpenAIRE Research Graph - + Powered by OpenAIRE Research Graph + - . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} - + . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} +
@@ -103,312 +103,316 @@
-
-
- - - +
+ +
+ + + - - - -
- - - Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}} -   - - - - Open Access mandate for {{openaireEntities.PUBLICATIONS}} -   - - - - Open Access mandate for {{openaireEntities.DATASETS}} -   - - - - {{projectInfo.funding.funderName}} -   - - - - Special Clause 39 -   - -
-
-
-
- - Funder: - {{projectInfo.funding.funderName}} - - - Project code: - {{projectInfo.funding.code}} - - - Call for proposal: - {{projectInfo.funding.callIdentifier}} - + + + +
+ + + Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}} +   + + + + Open Access mandate for {{openaireEntities.PUBLICATIONS}} +   + + + + Open Access mandate for {{openaireEntities.DATASETS}} +   + + + + {{projectInfo.funding.funderName}} +   + + + + Special Clause 39 +   +
-
- - Funded under: - {{projectInfo.funding.fundingStream}} - - - Overall Budget: - {{projectInfo.funding.budget | number}} - {{projectInfo.funding.currency}} - - - Funder Contribution: - {{projectInfo.funding.contribution | number}} - {{projectInfo.funding.currency}} - -
-
-
- - Status: - {{projectInfo.status}} - -
-
- - -
- - {{projectInfo.startDate | date: 'dd MMM yyyy'}} (Started) - - - {{projectInfo.endDate | date: 'dd MMM yyyy'}} - (Ended) - (Ending) - -
-
- -
-
Open Access mandate
-
- - {{openaireEntities.PUBLICATIONS}}: - No - - - {{openaireEntities.DATASETS}}: - No - -
-
-
-
- -
-
- - - - - - - - - - -
-
- -
-
-
-
-
- No summary information available +
+
+
+ + Funder: + {{projectInfo.funding.funderName}} + + + Project code: + {{projectInfo.funding.code}} + + + Call for proposal: + {{projectInfo.funding.callIdentifier}} + +
+
+ + Funded under: + {{projectInfo.funding.fundingStream}} + + + Overall Budget: + {{projectInfo.funding.budget | number}} + {{projectInfo.funding.currency}} + + + Funder Contribution: + {{projectInfo.funding.contribution | number}} + {{projectInfo.funding.currency}} + +
-
-
- -
-
-
Description
-
-
-
- +
+ + Status: + {{projectInfo.status}} + +
+
+ + +
+ + {{projectInfo.startDate | date: 'dd MMM yyyy'}} (Started) + + + {{projectInfo.endDate | date: 'dd MMM yyyy'}} + (Ended) + (Ending) + +
+
+ +
+
Open Access mandate
+
+ + {{openaireEntities.PUBLICATIONS}}: + No + + + {{openaireEntities.DATASETS}}: + No +
-
-
- -
Partners
-
- - + +
+
+ + + + + + + + + + +
+
+ +
+ + + +
+ + +
+
+ + +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + -
- View less + +
+ + +
+
Statistics
+ +
+
+
+
Produced + {{openaireEntities.RESULTS}} per year +
+ +
+
+
+
+
Access mode of + {{openaireEntities.RESULTS}} +
+ +
+
+
+
+
+ {{openaireEntities.RESULTS}} per datasource +
+ +
-
+
-
- -
- - -
-
- - -
- - -
-
- -
- - -
-
- -
- - -
-
- - - - -
-
Statistics
- -
-
-
-
Produced - {{openaireEntities.RESULTS}} per year -
- -
-
-
-
-
Access mode of - {{openaireEntities.RESULTS}} -
- -
-
-
-
-
- {{openaireEntities.RESULTS}} per datasource -
- -
-
-
-
+
+
- -
-
diff --git a/landingPages/project/project.component.ts b/landingPages/project/project.component.ts index 1de8bdea..492df3cc 100644 --- a/landingPages/project/project.component.ts +++ b/landingPages/project/project.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; @@ -30,6 +30,8 @@ import {properties} from "../../../../environments/environment"; import {Option} from "../../sharedComponents/input/input.component"; import {OpenaireEntities} from "../../utils/properties/searchFields"; +declare var ResizeObserver; + @Component({ selector: 'project', templateUrl: 'project.component.html', @@ -149,10 +151,10 @@ export class ProjectComponent { public offset: number; public stickyHeader: boolean = false; public graph_offset: number = 0; + public graph_height: number = 0; @ViewChild("graph_and_feedback") graph_and_feedback; public shouldSticky: boolean = true; - private observer: IntersectionObserver; subscriptions = []; properties: EnvProperties; @@ -170,7 +172,8 @@ export class ProjectComponent { private _searchResearchResultsService: SearchResearchResultsService, private _reportsService: ReportsService, private htmlService: HtmlProjectReportService, - private indexInfoService: IndexInfoService) {} + private indexInfoService: IndexInfoService, + private cdr: ChangeDetectorRef) {} ngOnInit() { @@ -232,38 +235,61 @@ export class ProjectComponent { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); let bottom = document.getElementById('bottom'); if(bottom) { - this.observer = new IntersectionObserver(entries => { + let observer = new IntersectionObserver(entries => { entries.forEach(entry => { this.shouldSticky = !entry.isIntersecting; }) }); - this.observer.observe(bottom); + this.subscriptions.push(observer); + observer.observe(bottom); + } + if(this.graph_and_feedback) { + this.observeGraphAndFeedback(); } } } ngAfterContentChecked() { if(this.graph_and_feedback && window) { - this.graph_offset = this.calcGraphOffset(); + this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement); } } - calcGraphOffset() { - return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; + + public observeGraphAndFeedback() { + let resizeObs = new ResizeObserver(entries => { + entries.forEach(entry => { + setTimeout(() => { + // console.log(entry); + this.graph_offset = this.calcGraphOffset(entry.target); + this.cdr.detectChanges(); + }); + }) + }); + this.subscriptions.push(resizeObs); + resizeObs.observe(this.graph_and_feedback.nativeElement); + } + + calcGraphOffset(element) { + this.graph_height = element.offsetHeight; + return window.innerHeight-this.graph_height; } public getFileNameType(type: string) { - if(type == "results") { - return OpenaireEntities.RESULTS.replace(" ", "-"); - } else if(type == "publications") { - return OpenaireEntities.PUBLICATIONS.replace(" ", "-"); + if(type == "publications") { + // return OpenaireEntities.PUBLICATIONS.replace(" ", "-"); + return OpenaireEntities.PUBLICATIONS_FILE; } else if(type == "datasets") { - return OpenaireEntities.DATASETS.replace(" ", "-"); + // return OpenaireEntities.DATASETS.replace(" ", "-"); + return OpenaireEntities.DATASETS_FILE; } else if(type == "software") { - return OpenaireEntities.SOFTWARE.replace(" ", "-"); + // return OpenaireEntities.SOFTWARE.replace(" ", "-"); + return OpenaireEntities.SOFTWARE_FILE; } else if(type == "other") { - return OpenaireEntities.OTHER.replace(" ", "-"); + // return OpenaireEntities.OTHER.replace(" ", "-"); + return OpenaireEntities.OTHER_FILE; } - return OpenaireEntities.RESULTS.replace(" ", "-"); + // return OpenaireEntities.RESULTS.replace(" ", "-"); + return OpenaireEntities.RESULTS_FILE; } public getCsvParams(type: string) { @@ -319,6 +345,8 @@ export class ProjectComponent { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { subscription.unsubscribe(); + } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + subscription.disconnect(); } }); this.fetchDatasets.clearSubscriptions(); @@ -326,10 +354,6 @@ export class ProjectComponent { this.fetchSoftware.clearSubscriptions(); this.fetchOrps.clearSubscriptions(); this.fetchDmps.clearSubscriptions(); - - if(this.observer) { - this.observer.disconnect(); - } } private createClipboard() { @@ -953,7 +977,5 @@ export class ProjectComponent { (!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0 || this.fetchOrps.searchUtils.status != this.errorCodes.DONE)} ]; - console.log(this.resultTypesForDownloading); - } } diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index b61e4e3a..eac46b9d 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -8,11 +8,11 @@
-
+
-
+
@@ -72,18 +72,18 @@
-
+
-
+
- Powered by OpenAIRE Research Graph - + Powered by OpenAIRE Research Graph + - . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} - + . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} +
@@ -93,243 +93,249 @@
-
-
- - - +
+ + + +
+ + + - - - - View all {{resultLandingInfo.deletedByInferenceIds.length}} versions - - - - - -
- - {{resultLandingInfo.accessMode}} -   - - - - {{language}} -   - - - - - {{programmingLanguage}} -   - - -
-
- -
- -
- -
- -
- - {{(resultLandingInfo.countries.length === 1) ? 'Country: ' : 'Countries: '}} - - {{resultLandingInfo.countries.join(", ")}} -
-
-
- -
-
- - - - - - - - - - - - -
-
- -
- -
-
-
- No summary information available + + + + View all {{resultLandingInfo.deletedByInferenceIds.length}} versions + + + + + +
+ + {{resultLandingInfo.accessMode}} +   + + + + {{language}} +   + + + + + {{programmingLanguage}} +   + + +
+
+ +
+ +
+ +
+ +
+ + {{(resultLandingInfo.countries.length === 1) ? 'Country: ' : 'Countries: '}} + + {{resultLandingInfo.countries.join(", ")}}
-
- -
-
-
Abstract
-
-
+
+ +
+
+ + + + + + + + + + + + +
+
+ +
+ +
+
+
+ No summary information available
+
+
+ +
+
+
Abstract
+
+
+
-
-
-
- - -
- -
-
Related {{openaireEntities.ORGANIZATIONS}}
- - -
- View less -
-
-
-
-
- -
- - -
-

- {{item.name}} - - - [{{getReferenceIdName(id)}} - OpenAIRE] - - -

-
- - -
-
- - - - -
- - -
- - -
-
- {{keyIn}}
- - {{keyIn}} -
-
-
-
- - -
-
- -
-
- Enermaps tool preview -
-

Visit - Enermaps tool -

+
+ + +
+ +
+
Related {{openaireEntities.ORGANIZATIONS}}
+ + +
+ View less +
+
+
-
-
    - -
  • - {{detail[0]}}: - - - {{word}} - {{word}} - - -
  • -
    -
+
+ +
+ + +
+

+ {{item.name}} + + + [{{getReferenceIdName(id)}} + OpenAIRE] + + +

+
+ + +
+
+ + + + +
+ + +
+ + +
+
+ {{keyIn}} +
+ + {{keyIn}} + +
+
+
+
+ + +
+
+ +
+
+ Enermaps tool preview + +
+
    + +
  • + {{detail[0]}}: + + + {{word}} + {{word}} + + +
  • +
    +
+
+
+
+ +
-
- -
@@ -342,7 +348,8 @@
-
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts index 163f6aab..e954e3be 100644 --- a/landingPages/result/resultLanding.component.ts +++ b/landingPages/result/resultLanding.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; @@ -26,7 +26,7 @@ import {UserManagementService} from "../../services/user-management.service"; import {OpenaireEntities} from "../../utils/properties/searchFields"; import {Option} from "../../sharedComponents/input/input.component"; -declare var UIkit; +declare var ResizeObserver; @Component({ selector: 'result-landing', @@ -127,10 +127,10 @@ export class ResultLandingComponent { public offset: number; public stickyHeader: boolean = false; public graph_offset: number = 0; + public graph_height: number = 0; @ViewChild("graph_and_feedback") graph_and_feedback; public shouldSticky: boolean = true; - private observer: IntersectionObserver; public viewAll: string = ""; public noCommunities: boolean = false; @@ -224,23 +224,43 @@ export class ResultLandingComponent { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); let bottom = document.getElementById('bottom'); if(bottom) { - this.observer = new IntersectionObserver(entries => { + let observer = new IntersectionObserver(entries => { entries.forEach(entry => { this.shouldSticky = !entry.isIntersecting; }) }); - this.observer.observe(bottom); + this.subscriptions.push(observer); + observer.observe(bottom); + } + if(this.graph_and_feedback) { + this.observeGraphAndFeedback(); } } } ngAfterContentChecked() { if(this.graph_and_feedback && window) { - this.graph_offset = this.calcGraphOffset(); + this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement); } } - calcGraphOffset() { - return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; + + public observeGraphAndFeedback() { + let resizeObs = new ResizeObserver(entries => { + entries.forEach(entry => { + setTimeout(() => { + // console.log(entry); + this.graph_offset = this.calcGraphOffset(entry.target); + this.cdr.detectChanges(); + }); + }) + }); + this.subscriptions.push(resizeObs); + resizeObs.observe(this.graph_and_feedback.nativeElement); + } + + calcGraphOffset(element) { + this.graph_height = element.offsetHeight; + return window.innerHeight-this.graph_height; } private initMetaAndLinks(type: string) { @@ -299,12 +319,11 @@ export class ResultLandingComponent { subscription.unsubscribe(); } else if (subscription instanceof Function) { subscription(); + } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + subscription.disconnect(); } }); this._vocabulariesService.clearSubscriptions(); - if(this.observer) { - this.observer.disconnect(); - } } public pidInit(event) {