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

landing: cut description & show more in modal after 10 lines of content

This commit is contained in:
Alex Martzios 2022-09-21 13:32:21 +03:00
parent 05cfd20bb9
commit f888e1090d
13 changed files with 108 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
landingPages/dataProvider/dataProvider.component.html
View File

@ -221,15 +221,18 @@
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
class="uk-width-expand uk-padding uk-inline">
<!-- Description -->
<div *ngIf="dataProviderInfo.description && dataProviderInfo.description.length > 0"
class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div *ngIf="dataProviderInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-justify">
<div class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of dataProviderInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
<div class="multi-line-ellipsis lines-10">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="dataProviderInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
@ -457,6 +460,11 @@
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: dataProviderInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="dataProviderInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="dataProviderInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of dataProviderInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"

18
landingPages/dataProvider/dataProvider.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
@ -135,6 +135,9 @@ export class DataProviderComponent {
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback;
@ViewChild("descriptionDiv") descriptionDiv: ElementRef;
@ViewChild('descriptionModal') descriptionModal;
// public shouldSticky: boolean = true;
subscriptions = [];
@ -235,6 +238,10 @@ export class DataProviderComponent {
}
}
get showViewMoreButton():boolean {
return !!this.descriptionDiv && (this.descriptionDiv.nativeElement.clientHeight >= 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();
}
}

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

@ -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 ? ('<p>' + abstracts.join('</p><p>') + '</p>') : abstracts.join(' ');
}
}
}

19
landingPages/project/project.component.html
View File

@ -341,14 +341,18 @@
</div>
<div *ngIf="hasPrimaryInfo" class="uk-width-expand">
<!-- Description -->
<div class="uk-margin-medium-bottom">
<div *ngIf="projectInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta uk-margin-small-bottom">Description</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of projectInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
<div class="multi-line-ellipsis lines-10">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHtml]="projectInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
</div>
@ -571,6 +575,11 @@
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: projectInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="projectInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="projectInfo.description"></div>
</modal-alert>
<ng-template #organizations_template let-threshold="threshold">
<span *ngFor="let organization of projectInfo.organizations.slice(0, threshold); let i=index" class="uk-text-small"
[attr.uk-tooltip]="organization.acronym && organization.name ? 'pos:right; delay:10' : 'cls: uk-invisible'"

19
landingPages/project/project.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
@ -154,6 +154,9 @@ export class ProjectComponent {
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback;
@ViewChild("descriptionDiv") descriptionDiv: ElementRef;
@ViewChild('descriptionModal') descriptionModal;
// public shouldSticky: boolean = true;
subscriptions = [];
@ -255,6 +258,10 @@ export class ProjectComponent {
}
}
get showViewMoreButton():boolean {
return !!this.descriptionDiv && (this.descriptionDiv.nativeElement.clientHeight >= 10 * 21);
}
public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
@ -444,7 +451,6 @@ export class ProjectComponent {
this.subscriptions.push(this._projectService.getProjectInfoByGrantId(grantId, funder, this.properties).subscribe(
data => {
this.projectInfo = data;
this.actionsAfterGettingProjectInfo();
@ -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();
}
}

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

@ -268,15 +268,18 @@
</div>
<div *ngIf="hasPrimaryInfo">
<!-- Description -->
<div *ngIf="resultLandingInfo.description && resultLandingInfo.description.length > 0"
class="uk-margin-medium-bottom">
<div *ngIf="resultLandingInfo.description" class="uk-margin-medium-bottom">
<div class="uk-text-justify ">
<div class="uk-text-meta">Abstract</div>
<div class=" uk-height-max-medium uk-overflow-auto">
<div *ngFor="let description of resultLandingInfo.description" class="uk-margin-small-bottom "
[innerHtml]="description"></div>
<div class="multi-line-ellipsis lines-10">
<div #descriptionDiv class="uk-margin-small-bottom"
[innerHTML]="resultLandingInfo.description"></div>
</div>
<div *ngIf="showViewMoreButton" class="uk-flex uk-flex-right">
<a (click)="openDescriptionModal();" class="view-more-less-link">
View more
</a>
</div>
</div>
</div>
<div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
@ -537,6 +540,11 @@
<ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
</modal-alert>
<modal-alert *ngIf="resultLandingInfo?.description" #descriptionModal
[large]="true">
<div [innerHTML]="resultLandingInfo.description"></div>
</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">

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

@ -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();
}
}

4
services/searchDataproviders.service.ts
View File

@ -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) + "...";
}

4
services/searchProjects.service.ts
View File

@ -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) + "...";
}

4
services/searchResearchResults.service.ts
View File

@ -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) + "...";
}

2
utils/entities/dataProviderInfo.ts
View File

@ -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;

2
utils/entities/projectInfo.ts
View File

@ -15,7 +15,7 @@ export class ProjectInfo {
organizations: { "acronym": string, "name": string, "id": string }[];//Map<string, string>;
url: string;
urlInfo: string;
description: string[] = [];
description: string;
//publications: any;
researchData: any;

2
utils/entities/resultLandingInfo.ts
View File

@ -46,7 +46,7 @@ export class ResultLandingInfo {
identifiers: Map<string, string[]>; //key is the classname
languages: string[];
countries: string[];
description: string[] = [];
description: string;
hostedBy_collectedFrom: HostedByCollectedFrom[];