[Trunk|Library]: In Landing Pages: cut description up to 270 characters and add 'view more/less' functionality.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@55059 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-03-21 10:49:50 +00:00
parent f28d8a3b44
commit 0e66e3ac90
8 changed files with 88 additions and 17 deletions

View File

@ -55,9 +55,19 @@
</li>
</ul>
<hr *ngIf="datasetInfo.description" >
<div *ngIf="datasetInfo.description" class="uk-margin-bottom uk-text-justify descriptionText">
{{datasetInfo.description}}
<span>{{datasetInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = datasetInfo.description.length;">
View more
</a>
</span>
</div>
<!-- <div class="uk-clearfix"><div class="uk-float-right uk-margin-top">

View File

@ -29,6 +29,9 @@ export class DatasetComponent {
public showAllDownloadFrom: boolean = false;
public showAllPublishedIn: boolean = false;
public thresholdDescription: number = 270;
public showNumDescription: number = 270;
// Metrics tab variables
public metricsClicked: boolean;
public viewsFrameUrl: string;
@ -99,9 +102,7 @@ export class DatasetComponent {
this.downloadsFrameUrl = this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"'+this.datasetId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
/*this.downloadsFrameUrl = this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloadTimeline", "resTitle":"'+this.datasetId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
*/
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
this.scroll();
});
}
@ -201,6 +202,12 @@ export class DatasetComponent {
return Array.from(map.keys());
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
private handleError(message: string, error) {
console.error("Research Data Landing Page: "+message, error);
}

View File

@ -42,7 +42,18 @@
</ul>
<hr *ngIf="orpInfo.description">
<div *ngIf="orpInfo.description" class="uk-margin-bottom uk-text-justify descriptionText">
{{orpInfo.description}}
<span>{{orpInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && orpInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = orpInfo.description.length;">
View more
</a>
</span>
</div>
<ul class="custom-accordion" uk-accordion>

View File

@ -29,6 +29,9 @@ export class OrpComponent {
public showAllDownloadFrom: boolean = false;
public showAllPublishedIn: boolean = false;
public thresholdDescription: number = 270;
public showNumDescription: number = 270;
// Metrics tab variables
public metricsClicked: boolean;
public viewsFrameUrl: string;
@ -95,9 +98,7 @@ export class OrpComponent {
this.downloadsFrameUrl = this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"'+this.orpId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
this.scroll();
});
}
@ -187,6 +188,12 @@ export class OrpComponent {
return Array.from(map.keys());
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
private handleError(message: string, error) {
console.error("Other Research Product Landing Page: "+message, error);
}

View File

@ -88,7 +88,18 @@
</ul>
<hr *ngIf="publicationInfo.description">
<div *ngIf="publicationInfo.description" class="uk-margin-bottom uk-text-justify descriptionText">
{{publicationInfo.description}}
<span>{{publicationInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && publicationInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = publicationInfo.description.length;">
View more
</a>
</span>
</div>

View File

@ -29,6 +29,9 @@ export class PublicationComponent {
public showAllCollectedFrom: boolean = false;
public showAllDownloadFrom: boolean = false;
public thresholdDescription: number = 270;
public showNumDescription: number = 270;
// Metrics tab variables
public metricsClicked: boolean;
public viewsFrameUrl: string;
@ -111,9 +114,7 @@ export class PublicationComponent {
this.downloadsFrameUrl =this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"'+this.articleId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
this.scroll();
});
}
@ -290,6 +291,12 @@ export class PublicationComponent {
public getKeys( map) {
return Array.from(map.keys());
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
/*
start(i: number, bioentitiesPage: number) {
let sum = 0;

View File

@ -53,7 +53,18 @@
</ul>
<hr *ngIf="softwareInfo.description" >
<div *ngIf="softwareInfo.description" class="uk-margin-bottom uk-text-justify descriptionText">
{{softwareInfo.description}}
<span>{{softwareInfo.description.substring(0, showNumDescription)}}</span
><span *ngIf="showNumDescription > thresholdDescription">
<a (click)="showNumDescription = thresholdDescription; scroll()">
View less
</a>
</span
><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription">...</span
><span *ngIf="showNumDescription == thresholdDescription && softwareInfo.description.length > thresholdDescription" class="uk-text-right">
<a (click)="showNumDescription = softwareInfo.description.length;">
View more
</a>
</span>
</div>
<!-- <div class="uk-clearfix"><div class="uk-button-group uk-float-right uk-margin-top">

View File

@ -28,6 +28,9 @@ export class SoftwareComponent {
public showAllDownloadFrom: boolean = false;
public showAllPublishedIn: boolean = false;
public thresholdDescription: number = 270;
public showNumDescription: number = 270;
// Metrics tab variables
public metricsClicked: boolean;
public viewsFrameUrl: string;
@ -94,9 +97,7 @@ export class SoftwareComponent {
this.downloadsFrameUrl = this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"'+this.softwareId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
/*this.downloadsFrameUrl = this.properties.framesAPIURL+'merge.php?com=query&data=[{"query":"resRepoDownloadTimeline", "resTitle":"'+this.softwareId+'", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
*/
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
this.scroll();
});
}
@ -194,6 +195,12 @@ export class SoftwareComponent {
return Array.from(map.keys());
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
private handleError(message: string, error) {
console.error("Software Landing Page: "+message, error);
}