[Trunk | Library]:

1. Project Landing Page: Add all types of research results (publication, dataset, software, other) in the box, in the right column of page and redesign it (UI/UX).
2. common-assets/library.css: Add classes 'researchResultTypeSelected' and 'researchResultTypeNotSelected'. Used by Project Landing Page.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57853 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/htmlProjectReport/htmlProjectReport.service.ts

@@ -19,7 +19,7 @@ export class HtmlProjectReportService {
         } else if(type == "software") {
           resultTypeId = 'software';
           requestType = 'software'
-        } else if(type == 'other research products') {
+        } else if(type == 'other research product') {
           resultTypeId = 'other';
           requestType = 'other';
         }

landingPages/project/project.component.html

@@ -1,3 +1,67 @@
+<ng-template #share_research_results_box
+             let-fetch="fetch" let-clipboardName="clipboardName" let-dynamic_content="dynamic_content"
+             let-type="type" let-fileName_type="fileName_type" let-csvParams="csvParams">
+  <ul class="uk-list uk-margin-remove-bottom">
+    <li>
+      <a class="clickable"
+         uk-toggle="target: #dynamic_content_id; animation:uk-animation-fade"><span
+        class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
+                             xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
+        fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
+        fill="none" stroke="#000" stroke-width="1.01"
+        points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a>
+      <div hidden id="dynamic_content_id" class="uk-padding-small">
+        <div class="uk-grid">
+          <a
+            [class]="clipboardName+'_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1'"
+            [attr.data-clipboard-target]="'#'+clipboardName" title="Copy to clipboard">
+            <button class="uk-button uk-button-small uk-button-primary uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
+                                                                                     xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
+              fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
+              fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg>
+              <span class="uk-margin-small-left">COPY</span>
+            </button>
+          </a>
+        </div>
+
+        <pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
+          [id]="clipboardName">{{dynamic_content}}</code></pre>
+        <div class="uk-text-small uk-margin-small-top">
+          For further information contact us at
+          <u><a href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a></u>
+        </div>
+
+      </div>
+    </li>
+    <li>
+      <a target="_blank"
+         href="/project-report?projectId={{projectId}}&size={{fetch.searchUtils.totalResults}}&type={{type}}">
+                            <span class="uk-icon">
+                           <svg width="20" height="20" viewBox="0 0 20 20"
+                                   xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
+                                fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
+                                fill="none" stroke="#000" stroke-width="1.01"
+                                points="7,4 1,10 7,16"></polyline></svg>
+                            </span>
+        Get {{projectInfo.funder}} report (HTML)
+      </a>
+    </li>
+    <li>
+      <a class="clickable"
+         (click)="downloadfile(downloadURLAPI+csvParams, 'funder-'+fileName_type+'-report')">
+                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
+                                                       xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
+                              fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
+                                                                                                      width="13"
+                                                                                                      height="1"></rect><line
+                              fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
+        Get {{projectInfo.funder}} report (CSV)
+      </a>
+    </li>
+  </ul>
+</ng-template>
+
+
 <div id="tm-main" class=" uk-section  uk-padding-remove-top uk-margin-small-top tm-middle">
   <div uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
@@ -463,156 +527,140 @@
                 <div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
                 <addThis></addThis>
               </div>
-              <div class="uk-margin-medium-top uk-margin-medium-bottom  uk-margin-medium-top">
+              <div class="uk-margin-top">
-                <div class="uk-text-center uk-text-large">
+                <div class="sideInfoTitle uk-margin-small-bottom">Share project's research results</div>
-                  Application Box
+                <div>
-                </div>
+<!--                <ul class="uk-padding-remove" uk-switcher>-->
-                <div class="app-box">
+
-                  <ul class="uk-tab" uk-tab="connect: #tab-app-box-project">
+                  <!--                  <ul class="uk-tab" uk-tab="connect: #tab-app-box-project">-->
-                    <li>
+<!--                  <ul class="">-->
-                      <a>Publications</a>
+                  <div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
-                    </li>
+                                  + (share_research_results_type == 'publications' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
-                    <li>
+                       (click)="((share_research_results_type == 'publications') ? share_research_results_type='' : share_research_results_type='publications')">
-                      <a>Research Data</a>
+                    Publications
-                    </li>
+                  </div>
-                  </ul>
+                  <div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
-                  <ul id="tab-app-box-project" class="uk-switcher uk-margin uk-padding-small">
+                                  + (share_research_results_type == 'datasets' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
-                    <li class="uk-animation-fade">
+                       (click)="((share_research_results_type == 'datasets') ? share_research_results_type='' : share_research_results_type='datasets')">
+                      Research data
+                  </div>
+                  <div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+                                                    + (share_research_results_type == 'software' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
+                       (click)="((share_research_results_type == 'software') ? share_research_results_type='' : share_research_results_type='software')">
+                      Software
+                  </div>
+                  <div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+                                                    + (share_research_results_type == 'other' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
+                       (click)="((share_research_results_type == 'other') ? share_research_results_type='' : share_research_results_type='other')">
+                      Other
+                  </div>
+<!--                  </ul>-->
+<!--                  <ul id="tab-app-box-project" class="uk-switcher uk-margin uk-padding-small">-->
+                  <div *ngIf="share_research_results_type" class="uk-padding-small app-box">
+                    <div *ngIf="share_research_results_type=='publications'" class="uk-animation-slide-top-small">
                       <!-- Publication box-->
-                      <ul class="uk-list">
+<!--                      <ng-container *ngIf="share_research_results_type=='publications'">-->
-                        <li>
+                        <ng-container *ngTemplateOutlet="share_research_results_box;
-                          <a class="clickable"
+                          context: {  fetch: fetchPublications, clipboardName: 'publications_clipboard',
-                             uk-toggle="target: #publications_dynamic; animation:uk-animation-fade"><span
+                                      dynamic_content: publications_dynamic, type: 'publication',
-                            class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
+                                      fileName_type: 'publications', csvParams: csvParams}">
-                                                 xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
+                        </ng-container>
-                            fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
+<!--                      </ng-container>-->
-                            fill="none" stroke="#000" stroke-width="1.01"
+                    </div>
-                            points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a>
+                    <div *ngIf="share_research_results_type=='datasets'" class="uk-animation-slide-top-small">
-                          <div hidden id="publications_dynamic"
+<!--                    <ng-container *ngIf="share_research_results_type=='datasets'">-->
-                               class="widget-box uk-padding-small uk-card uk-card-default ">
+                        <ng-container *ngTemplateOutlet="share_research_results_box;
-                            <div
+                          context: {  fetch: fetchDatasets, clipboardName: 'datasets_clipboard',
-                              class="  uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">
+                                      dynamic_content: datasets_dynamic, type: 'dataset',
-                              For further information please contact us <a
+                                      fileName_type: 'research-data', csvParams: csvParamsDatasets}">
-                              href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>
+                        </ng-container>
-                            </div>
+<!--                      </ng-container>-->
-                            <div class="uk-grid">
+                    </div>
-                              <a
+                    <div *ngIf="share_research_results_type=='software'" class="uk-animation-slide-top-small">
-                                class="    publ_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "
+<!--                    <ng-container *ngIf="share_research_results_type=='software'">-->
-                                data-clipboard-target="#publ_clipboard" title="Copy to clipboard">
+                        <ng-container *ngTemplateOutlet="share_research_results_box;
-                                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
+                          context: {  fetch: fetchSoftware, clipboardName: 'software_clipboard',
-                                                           xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
+                                      dynamic_content: software_dynamic, type: 'software',
-                                  fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
+                                      fileName_type: 'software', csvParams: csvParamsSoftware}">
-                                  fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
+                        </ng-container>
-                              </a>
+<!--                      </ng-container>-->
-                            </div>
+                    </div>
-
+                    <div *ngIf="share_research_results_type=='other'" class="uk-animation-slide-top-small">
-                            <pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
+<!--                    <ng-container *ngIf="share_research_results_type=='other'">-->
-                              id="publ_clipboard">{{publications_dynamic}}</code></pre>
+                        <ng-container *ngTemplateOutlet="share_research_results_box;
-                          </div>
+                          context: {  fetch: fetchOrps, clipboardName: 'other_clipboard',
-                        </li>
+                                      dynamic_content: orps_dynamic, type: 'other',
-                        <li>
+                                      fileName_type: 'other-research-products', csvParams: csvParamsOrps}">
-                          <a target="_blank"
+                        </ng-container>
-                             href="/project-report?projectId={{projectId}}&size={{fetchPublications.searchUtils.totalResults}}&type=publication">
+<!--                      </ng-container>-->
-                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                       xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect
-                              x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect
-                              x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                            Get {{projectInfo.funder}} report (HTML)
-                          </a>
-                        </li>
-                        <li>
-                          <a class="clickable"
-                             (click)="downloadfile(downloadURLAPI+csvParams, 'funder-publications-report')">
-                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                       xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
-                              fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
-                                                                                                      width="13"
-                                                                                                      height="1"></rect><line
-                              fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
-                            Get {{projectInfo.funder}} report (CSV)
-                          </a>
-                        </li>
-                        <li *ngIf="isRouteAvailable('participate/deposit-publications') ">
-                          <a routerLinkActive="router-link-active" routerLink="/participate/deposit-publications">
-                             <span class="uk-icon">
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><polyline fill="none"
-                                                                                                       stroke="#000"
-                                                                                                       points="5 8 9.5 3.5 14 8 "></polyline><rect
-  x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5"
-                                                  y2="4"></line></svg>
-</span> Deposit
-                          </a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li class="uk-animation-fade">
-                      <!-- Dataset box-->
-                      <ul class="uk-list">
-                        <li>
-                          <a class="clickable" uk-toggle="target: #datasets_dynamic; animation:uk-animation-fade"><span
-                            class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                 xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
-                            fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
-                            fill="none" stroke="#000" stroke-width="1.01"
-                            points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML) </a>
-                          <div hidden id="datasets_dynamic"
-                               class="widget-box uk-padding-small uk-card uk-card-default ">
-                            <div
-                              class="  uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">
-                              For further information please contact us <a
-                              href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>
-                            </div>
-                            <div class="uk-grid">
-                              <a
-                                class="    datasets_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "
-                                data-clipboard-target="#datasets_clipboard" title="Copy to clipboard">
-                                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                           xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
-                                  fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
-                                  fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
-                              </a>
-                            </div>
-                            <pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
-                              id="datasets_clipboard">{{datasets_dynamic}}</code></pre>
-                          </div>
-                        </li>
-                        <li>
-                          <a target="_blank"
-                             href="/project-report?projectId={{projectId}}&size={{fetchDatasets.searchUtils.totalResults}}&type=dataset">
-                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                       xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect
-                              x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect
-                              x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                            Get {{projectInfo.funder}} report (HTML)
-                          </a>
-                        </li>
-                        <li>
-                          <a class="clickable"
-                             (click)="downloadfile(downloadURLAPI+csvParamsDatasets, 'funder-research-data-report')">
-                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                       xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
-                              fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
-                                                                                                      width="13"
-                                                                                                      height="1"></rect><line
-                              fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
-                            Get {{projectInfo.funder}} report (CSV)
-                          </a>
-                        </li>
-                        <li *ngIf="isRouteAvailable('participate/deposit-datasets') ">
-                          <a routerLinkActive="router-link-active" routerLink="/participate/deposit-datasets">
-                              <span class="uk-icon">
-                              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect
-                                x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5"
-                                                                                y1="15" x2="9.5" y2="4"></line></svg>
-                              </span> Deposit
-                          </a>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-
 
+                    </div>
+<!--                    <li class="uk-animation-fade">-->
+<!--                      &lt;!&ndash; Dataset box&ndash;&gt;-->
+<!--                      <ul class="uk-list">-->
+<!--                        <li>-->
+<!--                          <a class="clickable" uk-toggle="target: #datasets_dynamic; animation:uk-animation-fade"><span-->
+<!--                            class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
+<!--                                                 xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline-->
+<!--                            fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline-->
+<!--                            fill="none" stroke="#000" stroke-width="1.01"-->
+<!--                            points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML) </a>-->
+<!--                          <div hidden id="datasets_dynamic"-->
+<!--                               class="widget-box uk-padding-small uk-card uk-card-default ">-->
+<!--                            <div-->
+<!--                              class="  uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">-->
+<!--                              For further information please contact us <a-->
+<!--                              href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>-->
+<!--                            </div>-->
+<!--                            <div class="uk-grid">-->
+<!--                              <a-->
+<!--                                class="    datasets_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "-->
+<!--                                data-clipboard-target="#datasets_clipboard" title="Copy to clipboard">-->
+<!--                                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
+<!--                                                           xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect-->
+<!--                                  fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline-->
+<!--                                  fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>-->
+<!--                              </a>-->
+<!--                            </div>-->
+<!--                            <pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code-->
+<!--                              id="datasets_clipboard">{{datasets_dynamic}}</code></pre>-->
+<!--                          </div>-->
+<!--                        </li>-->
+<!--                        <li>-->
+<!--                          <a target="_blank"-->
+<!--                             href="/project-report?projectId={{projectId}}&size={{fetchDatasets.searchUtils.totalResults}}&type=dataset">-->
+<!--                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
+<!--                                                       xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect-->
+<!--                              x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect-->
+<!--                              x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>-->
+<!--                            Get {{projectInfo.funder}} report (HTML)-->
+<!--                          </a>-->
+<!--                        </li>-->
+<!--                        <li>-->
+<!--                          <a class="clickable"-->
+<!--                             (click)="downloadfile(downloadURLAPI+csvParamsDatasets, 'funder-research-data-report')">-->
+<!--                            <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
+<!--                                                       xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline-->
+<!--                              fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"-->
+<!--                                                                                                      width="13"-->
+<!--                                                                                                      height="1"></rect><line-->
+<!--                              fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>-->
+<!--                            Get {{projectInfo.funder}} report (CSV)-->
+<!--                          </a>-->
+<!--                        </li>-->
+<!--                        <li *ngIf="isRouteAvailable('participate/deposit-datasets') ">-->
+<!--                          <a routerLinkActive="router-link-active" routerLink="/participate/deposit-datasets">-->
+<!--                              <span class="uk-icon">-->
+<!--                              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"-->
+<!--                                   ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect-->
+<!--                                x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5"-->
+<!--                                                                                y1="15" x2="9.5" y2="4"></line></svg>-->
+<!--                              </span> Deposit-->
+<!--                          </a>-->
+<!--                        </li>-->
+<!--                      </ul>-->
+<!--                    </li>-->
+                  </div>
                 </div>
                 <!--metrics [pageViews]="pageViews" shortView=true
                                 [id]="projectId" [entityType]="'projects'" [entity]="'Project'"
@@ -621,6 +669,20 @@
 
 
               </div>
+              <div class="uk-margin-top uk-margin-bottom"
+                   *ngIf="isRouteAvailable('participate/deposit/learn-how') ">
+                <a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
+                   class="uk-button uk-button-primary uk-width-1-1">
+                      <span class="uk-icon">
+                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
+                          <polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline>
+                          <rect x="3" y="17" width="13" height="1"></rect>
+                          <line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line>
+                        </svg>
+                      </span>
+                  Deposit
+                </a>
+              </div>
 
             </div>
           </div>

landingPages/project/project.component.ts

@@ -91,6 +91,8 @@ export class ProjectComponent {
   public pageContents = null;
   public divContents = null;
 
+  public share_research_results_type: string = "";
+
   @ViewChild(ModalLoading) loading: ModalLoading;
   // Alert box when something is wrong with CSV requests
   @ViewChild('AlertModalCsvError') alertCsvError;
@@ -245,13 +247,13 @@ export class ProjectComponent {
   private createClipboard() {
     if (typeof window !== 'undefined') {
 
-      let publ_clipboard, datasets_clipboard, software_clipboard, orps_clipboard;
+      let publications_clipboard, datasets_clipboard, software_clipboard, other_clipboard;
       let Clipboard;
       Clipboard = require('clipboard');
-      publ_clipboard = new Clipboard('.publ_clipboard_btn');
+      publications_clipboard = new Clipboard('.publications_clipboard_btn');
       datasets_clipboard = new Clipboard('.datasets_clipboard_btn');
       software_clipboard = new Clipboard('.software_clipboard_btn');
-      orps_clipboard = new Clipboard('.orps_clipboard_btn');
+      other_clipboard = new Clipboard('.other_clipboard_btn');
     }
   }