From 0e66e3ac900a2671a0f1f8ef8bbcc5564aa23c05 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 21 Mar 2019 10:49:50 +0000
Subject: [PATCH] [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
---
 landingPages/dataset/dataset.component.html        | 14 ++++++++++++--
 landingPages/dataset/dataset.component.ts          | 13 ++++++++++---
 landingPages/orp/orp.component.html                | 13 ++++++++++++-
 landingPages/orp/orp.component.ts                  | 13 ++++++++++---
 .../publication/publication.component.html         | 13 ++++++++++++-
 landingPages/publication/publication.component.ts  | 13 ++++++++++---
 landingPages/software/software.component.html      | 13 ++++++++++++-
 landingPages/software/software.component.ts        | 13 ++++++++++---
 8 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/landingPages/dataset/dataset.component.html b/landingPages/dataset/dataset.component.html
index e99af4c9..d0ed7ca8 100644
--- a/landingPages/dataset/dataset.component.html
+++ b/landingPages/dataset/dataset.component.html
@@ -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">
diff --git a/landingPages/dataset/dataset.component.ts b/landingPages/dataset/dataset.component.ts
index 36becc0c..a4bc1d54 100644
--- a/landingPages/dataset/dataset.component.ts
+++ b/landingPages/dataset/dataset.component.ts
@@ -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);
     }
diff --git a/landingPages/orp/orp.component.html b/landingPages/orp/orp.component.html
index 9dac97c6..67d556f7 100644
--- a/landingPages/orp/orp.component.html
+++ b/landingPages/orp/orp.component.html
@@ -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>
diff --git a/landingPages/orp/orp.component.ts b/landingPages/orp/orp.component.ts
index d5b8dc4d..7404db96 100644
--- a/landingPages/orp/orp.component.ts
+++ b/landingPages/orp/orp.component.ts
@@ -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);
     }
diff --git a/landingPages/publication/publication.component.html b/landingPages/publication/publication.component.html
index 033435ba..4d37e09d 100644
--- a/landingPages/publication/publication.component.html
+++ b/landingPages/publication/publication.component.html
@@ -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>
 
 
diff --git a/landingPages/publication/publication.component.ts b/landingPages/publication/publication.component.ts
index 49473271..bcd631a4 100644
--- a/landingPages/publication/publication.component.ts
+++ b/landingPages/publication/publication.component.ts
@@ -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;
diff --git a/landingPages/software/software.component.html b/landingPages/software/software.component.html
index d2e2b30b..8d4602f3 100644
--- a/landingPages/software/software.component.html
+++ b/landingPages/software/software.component.html
@@ -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">
diff --git a/landingPages/software/software.component.ts b/landingPages/software/software.component.ts
index a04d05b9..4803e8d4 100644
--- a/landingPages/software/software.component.ts
+++ b/landingPages/software/software.component.ts
@@ -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);
     }