From f888e1090db76418dd488994727aed0eb881c885 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Wed, 21 Sep 2022 13:32:21 +0300 Subject: [PATCH] landing: cut description & show more in modal after 10 lines of content --- .../dataProvider/dataProvider.component.html | 22 +++++++++++++------ .../dataProvider/dataProvider.component.ts | 18 +++++++++++++-- .../landing-utils/parsingFunctions.class.ts | 12 +++++----- landingPages/project/project.component.html | 19 +++++++++++----- landingPages/project/project.component.ts | 21 ++++++++++++++---- .../result/resultLanding.component.html | 20 ++++++++++++----- .../result/resultLanding.component.ts | 18 +++++++++++++-- services/searchDataproviders.service.ts | 4 ++-- services/searchProjects.service.ts | 4 ++-- services/searchResearchResults.service.ts | 4 ++-- utils/entities/dataProviderInfo.ts | 2 +- utils/entities/projectInfo.ts | 2 +- utils/entities/resultLandingInfo.ts | 2 +- 13 files changed, 108 insertions(+), 40 deletions(-) diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html index bd67c04a..c07d2248 100644 --- a/landingPages/dataProvider/dataProvider.component.html +++ b/landingPages/dataProvider/dataProvider.component.html @@ -221,15 +221,18 @@
-
-
+
+
Description
-
-
+
+
- +
+ + View more + +
@@ -457,6 +460,11 @@ + +
+ + = 10 * 21); + } + public observeGraphAndFeedback() { let resizeObs = new ResizeObserver(entries => { entries.forEach(entry => { @@ -333,6 +340,7 @@ export class DataProviderComponent { } else { this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.identifier, this.properties, this.typeQueryPathParam).subscribe( data => { + this.cdr.detectChanges(); this.dataProviderInfo = data; this.getProvenanceUrls(); this.datasourceId = this.dataProviderInfo.objIdentifier; @@ -353,7 +361,7 @@ export class DataProviderComponent { } this.showTabs = true; this.updateTitle(this.dataProviderInfo.title.name?this.dataProviderInfo.title.name:this.dataProviderInfo.officialName); - this.updateDescription((this.dataProviderInfo.description && this.dataProviderInfo.description[0] ? (this.dataProviderInfo.description[0].substr(0,157) + (this.dataProviderInfo.description[0].substr(0,157).length == 157?"...":"")) : (this.dataProviderInfo.title.name?this.dataProviderInfo.title.name:this.dataProviderInfo.officialName))); + this.updateDescription((this.dataProviderInfo.description ? (this.dataProviderInfo.description.substr(0,157) + (this.dataProviderInfo.description.substr(0,157).length == 157?"...":"")) : (this.dataProviderInfo.title.name?this.dataProviderInfo.title.name:this.dataProviderInfo.officialName))); if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.subscriptions.push(this._piwikService.trackView(this.properties, this.dataProviderInfo.title.name, this.piwikSiteId).subscribe()); } @@ -813,4 +821,10 @@ export class DataProviderComponent { public getTypeName(): string { return StringUtils.getEntityName(this.type, false); } + + public openDescriptionModal() { + this.descriptionModal.alertFooter = false; + this.descriptionModal.alertTitle = "Description"; + this.descriptionModal.open(); + } } diff --git a/landingPages/landing-utils/parsingFunctions.class.ts b/landingPages/landing-utils/parsingFunctions.class.ts index 3563e839..e8b456aa 100644 --- a/landingPages/landing-utils/parsingFunctions.class.ts +++ b/landingPages/landing-utils/parsingFunctions.class.ts @@ -788,8 +788,7 @@ export class ParsingFunctions { } - parseDescription(description):string[] { - + parseDescription(description, stripHTML: boolean = false):string { let abstracts = []; if(!Array.isArray(description)) { abstracts = [description ? String(description) : ""]; @@ -799,8 +798,11 @@ export class ParsingFunctions { try{ abstracts = abstracts.map( x => StringUtils.HTMLToString(x)); } catch (e) {} - abstracts =abstracts.sort((a,b) => b.length - a.length); - return abstracts; + abstracts = abstracts.sort((a,b) => b.length - a.length); + if(stripHTML) { + return abstracts.join(' '); + } else { + return abstracts.length > 0 ? ('

' + abstracts.join('

') + '

') : abstracts.join(' '); + } } - } diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html index cdaf61ed..1fcaadb4 100644 --- a/landingPages/project/project.component.html +++ b/landingPages/project/project.component.html @@ -341,14 +341,18 @@
-
+
Description
-
-
+
+
- +
+ + View more + +
@@ -571,6 +575,11 @@ + +
+ + = 10 * 21); + } + public observeGraphAndFeedback() { let resizeObs = new ResizeObserver(entries => { entries.forEach(entry => { @@ -444,8 +451,7 @@ export class ProjectComponent { this.subscriptions.push(this._projectService.getProjectInfoByGrantId(grantId, funder, this.properties).subscribe( data => { - - this.projectInfo = data; + this.projectInfo = data; this.actionsAfterGettingProjectInfo(); this.projectId = this.projectInfo.id; @@ -468,6 +474,7 @@ export class ProjectComponent { } actionsAfterGettingProjectInfo() { + this.cdr.detectChanges(); this.projectName = this.projectInfo.acronym; if (this.projectName == undefined || this.projectName == '') { this.projectName = this.projectInfo.title; @@ -475,7 +482,7 @@ export class ProjectComponent { this.seoService.createLinkForCanonicalURL(this.properties.domain + this.properties.baseLink + this._router.url); this.updateTitle(this.projectName); // this.updateDescription(this.projectInfo.description?this.projectInfo.description: ("project" + (this.projectInfo.title?"," + this.projectInfo.title:"") + (this.projectInfo.funding && this.projectInfo.funding.funderName?", funder: " + this.projectInfo.funding.funderName:"") + (this.projectInfo.acronym?"," + this.projectInfo.acronym:""))); - this.updateDescription((this.projectInfo.description && this.projectInfo.description[0] ? (this.projectInfo.description[0].substr(0,157) + (this.projectInfo.description[0].substr(0,157).length == 157?"...":"")) : (this.projectInfo.title))); + this.updateDescription((this.projectInfo.description ? (this.projectInfo.description.substr(0,157) + (this.projectInfo.description.substr(0,157).length == 157?"...":"")) : (this.projectInfo.title))); if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.subscriptions.push(this._piwikService.trackView(this.properties, this.projectName, this.piwikSiteId).subscribe()); } @@ -948,4 +955,10 @@ export class ProjectComponent { || this.fetchOrps.searchUtils.status != this.errorCodes.DONE)} ]; } + + public openDescriptionModal() { + this.descriptionModal.alertFooter = false; + this.descriptionModal.alertTitle = "Description"; + this.descriptionModal.open(); + } } diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index 17c91f2f..cedd2c18 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -268,15 +268,18 @@
-
+
Abstract
-
-
+
+
- +
+ + View more + +
+ +
+ +
  • diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts index e34ee52b..bfe9f6b5 100644 --- a/landingPages/result/resultLanding.component.ts +++ b/landingPages/result/resultLanding.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; @@ -134,6 +134,9 @@ export class ResultLandingComponent { public graph_height: number = 0; @ViewChild("graph_and_feedback") graph_and_feedback; + @ViewChild("descriptionDiv") descriptionDiv: ElementRef; + @ViewChild('descriptionModal') descriptionModal; + // public shouldSticky: boolean = true; public viewAll: string = ""; @@ -251,6 +254,10 @@ export class ResultLandingComponent { } } + get showViewMoreButton():boolean { + return !!this.descriptionDiv && (this.descriptionDiv.nativeElement.clientHeight >= 10 * 21); + } + public observeGraphAndFeedback() { let resizeObs = new ResizeObserver(entries => { entries.forEach(entry => { @@ -440,6 +447,7 @@ export class ResultLandingComponent { this.hasAltMetrics = false; this.subscriptions.push(this._resultLandingService.getResultLandingInfo(this.id, this.identifier, this.type, subjectsVocabulary, this.properties).subscribe( data => { + this.cdr.detectChanges(); this.resultLandingInfo = data; this.id = this.resultLandingInfo.objIdentifier; //old @@ -460,7 +468,7 @@ export class ResultLandingComponent { this.addNoIndexFilter(); if (this.resultLandingInfo.title) { this.updateTitle(this.resultLandingInfo.title); - this.updateDescription((this.resultLandingInfo.description && this.resultLandingInfo.description[0] ? (this.resultLandingInfo.description[0].substr(0,157) + (this.resultLandingInfo.description[0].substr(0,157).length == 157?"...":"")) : (this.resultLandingInfo.title))); + this.updateDescription((this.resultLandingInfo.description ? (this.resultLandingInfo.description.substr(0,157) + (this.resultLandingInfo.description.substr(0,157).length == 157?"...":"")) : (this.resultLandingInfo.title))); } if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.subscriptions.push(this._piwikService.trackViewForCustomUrl(this.properties, this.resultLandingInfo.title, this.linkToLandingPage.split("?")[1] + this.id ,this.piwikSiteId).subscribe()); @@ -892,4 +900,10 @@ export class ResultLandingComponent { this.scroll(); this.viewAll = ""; } + + public openDescriptionModal() { + this.descriptionModal.alertFooter = false; + this.descriptionModal.alertTitle = "Abstract"; + this.descriptionModal.open(); + } } diff --git a/services/searchDataproviders.service.ts b/services/searchDataproviders.service.ts index fb9199fe..d452003a 100644 --- a/services/searchDataproviders.service.ts +++ b/services/searchDataproviders.service.ts @@ -123,8 +123,8 @@ export class SearchDataprovidersService { result.entityType = resData['eosctype'].classname == "Service" ? "service" : "dataprovider"; } - let abstracts = this.parsingFunctions.parseDescription(resData.description); - result.description = abstracts.length > 0 ? abstracts[0] : ""; + let abstracts = this.parsingFunctions.parseDescription(resData.description, true); + result.description = abstracts; if (result.description && result.description.length > this.sizeOfDescription) { result.description = result.description.substring(0, this.sizeOfDescription) + "..."; } diff --git a/services/searchProjects.service.ts b/services/searchProjects.service.ts index 41b10fbd..b9e60214 100644 --- a/services/searchProjects.service.ts +++ b/services/searchProjects.service.ts @@ -158,8 +158,8 @@ export class SearchProjectsService { result.id = Array.isArray(data) ? data[i]['result']['header']['dri:objIdentifier'] : data['result']['header']['dri:objIdentifier']; - let abstracts = this.parsingFunctions.parseDescription(resData.summary); - result.description = abstracts.length > 0 ? abstracts[0] : ""; + let abstracts = this.parsingFunctions.parseDescription(resData.summary, true); + result.description = abstracts; if (result.description && result.description.length > this.sizeOfDescription) { result.description = result.description.substring(0, this.sizeOfDescription) + "..."; } diff --git a/services/searchResearchResults.service.ts b/services/searchResearchResults.service.ts index 6e69e315..023aba7d 100644 --- a/services/searchResearchResults.service.ts +++ b/services/searchResearchResults.service.ts @@ -370,8 +370,8 @@ export class SearchResearchResultsService { var date: string = (resData.dateofacceptance ? resData.dateofacceptance : '') + ''; // transform to string in case it is an integer result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date; - let abstracts = this.parsingFunctions.parseDescription(resData.description); - result.description = abstracts.length > 0 ? abstracts[0] : ""; + let abstracts = this.parsingFunctions.parseDescription(resData.description, true); + result.description = abstracts; if (result.description && result.description.length > this.sizeOfDescription) { result.description = result.description.substring(0, this.sizeOfDescription) + "..."; } diff --git a/utils/entities/dataProviderInfo.ts b/utils/entities/dataProviderInfo.ts index 0f329175..47cabf6c 100644 --- a/utils/entities/dataProviderInfo.ts +++ b/utils/entities/dataProviderInfo.ts @@ -28,7 +28,7 @@ export class DataProviderInfo { originalId: string; countries: string[]; journal: {"journal": "", "issn": string, "lissn": string, "eissn": string}; - description: string[] = []; + description: string; subjects: string[]; jurisdiction: string; thematic: boolean; diff --git a/utils/entities/projectInfo.ts b/utils/entities/projectInfo.ts index 28f080df..84d0f47b 100644 --- a/utils/entities/projectInfo.ts +++ b/utils/entities/projectInfo.ts @@ -15,7 +15,7 @@ export class ProjectInfo { organizations: { "acronym": string, "name": string, "id": string }[];//Map; url: string; urlInfo: string; - description: string[] = []; + description: string; //publications: any; researchData: any; diff --git a/utils/entities/resultLandingInfo.ts b/utils/entities/resultLandingInfo.ts index c47c002c..c531307d 100644 --- a/utils/entities/resultLandingInfo.ts +++ b/utils/entities/resultLandingInfo.ts @@ -46,7 +46,7 @@ export class ResultLandingInfo { identifiers: Map; //key is the classname languages: string[]; countries: string[]; - description: string[] = []; + description: string; hostedBy_collectedFrom: HostedByCollectedFrom[];