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

[develop | DONE | CHANGED]: [Performance improvement] resultLanding.component: Added fields "impactClicked" and "altMetricsClicked", to initalize and show the relative content only on click | entity-actions.component.ts: Added field "addThisClicked" to call <addThis> only on click.

This commit is contained in:
Konstantina Galouni 2024-07-18 15:48:20 +03:00
parent ed7ee4b4a3
commit dd4d785d96
3 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1000,10 +1000,10 @@
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length"> <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
<a href="#">Impact</a> <a href="#" (click)="clickedImpactIndicators()">Impact</a>
</li> </li>
<li *ngIf="hasAltMetrics"> <li *ngIf="hasAltMetrics">
<a href="#">Social</a> <a href="#" (click)="clickedAltMetrics()">Social</a>
</li> </li>
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length"> <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
<a href="#" (click)="clickedUsageMetrics()">Usage</a> <a href="#" (click)="clickedUsageMetrics()">Usage</a>
@ -1092,44 +1092,46 @@
</li> </li>
<!-- impact --> <!-- impact -->
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length"> <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap"> <ng-container *ngIf="impactClicked">
<div class="uk-card uk-card-default uk-padding-small"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
<table class="uk-table uk-table-small uk-margin-remove"> <div class="uk-card uk-card-default uk-padding-small">
<tbody> <table class="uk-table uk-table-small uk-margin-remove">
<ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index"> <tbody>
<tr> <ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index">
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1"> <tr>
<icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon> <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
</td> <icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon>
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1"> </td>
<a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a> <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
<ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container> <a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a>
</td> <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container>
<td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1"> </td>
{{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}} <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
</td> {{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}}
</tr> </td>
</ng-container> </tr>
</tbody> </ng-container>
</table> </tbody>
</table>
</div>
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
<i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
</div> </div>
<div *ngIf="bipFrameUrl" class="uk-margin-large-left"> <div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false" <span class="uk-text-meta">Powered by</span>
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame> <a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</a>
</div> </div>
</div> </ng-container>
<div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<span class="uk-text-meta">Powered by</span>
<a href='https://bip.imsi.athenarc.gr/' target='_blank' class='uk-link-reset'>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</a>
</div>
</li> </li>
<!-- social --> <!-- social -->
<li *ngIf="hasAltMetrics"> <li *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics> <altmetrics *ngIf="altMetricsClicked" id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
</li> </li>
<!-- usage --> <!-- usage -->
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length"> <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">

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

@ -79,6 +79,8 @@ export class ResultLandingComponent {
public descriptionClicked: boolean; public descriptionClicked: boolean;
// Metrics tab variables // Metrics tab variables
public impactClicked: boolean;
public altMetricsClicked: boolean;
public metricsClicked: boolean; public metricsClicked: boolean;
public hasAltMetrics: boolean = false; public hasAltMetrics: boolean = false;
public viewsFrameUrl: string; public viewsFrameUrl: string;
@ -1126,6 +1128,18 @@ export class ResultLandingComponent {
this.descriptionModal.open(); this.descriptionModal.open();
} }
public clickedImpactIndicators() {
setTimeout( () => {
this.impactClicked = true;
});
}
public clickedAltMetrics() {
setTimeout( () => {
this.altMetricsClicked = true;
});
}
public clickedUsageMetrics() { public clickedUsageMetrics() {
setTimeout( () => { setTimeout( () => {
this.metricsClicked = true; this.metricsClicked = true;

4
utils/entity-actions/entity-actions.component.ts
View File

@ -58,7 +58,7 @@ import {EnvProperties} from "../properties/env-properties";
[type]="getTypeName().toLowerCase()"></citeThis> [type]="getTypeName().toLowerCase()"></citeThis>
</modal-alert> </modal-alert>
<modal-alert *ngIf="share" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle"> <modal-alert *ngIf="share" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis [url]="url"></addThis> <addThis *ngIf="addThisClicked" [url]="url"></addThis>
</modal-alert> </modal-alert>
<modal-alert *ngIf="result" #embedResultsModal large="true"> <modal-alert *ngIf="result" #embedResultsModal large="true">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right"> <div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
@ -98,6 +98,7 @@ export class EntityActionsComponent implements OnInit {
@Input() showTooltip: boolean = true; @Input() showTooltip: boolean = true;
@Input() compactView: boolean = false; // if true, do not show label for actions @Input() compactView: boolean = false; // if true, do not show label for actions
public citeThisClicked: boolean; public citeThisClicked: boolean;
public addThisClicked: boolean;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
@ViewChild('citeModal') citeModal; @ViewChild('citeModal') citeModal;
@ViewChild('embedResultsModal') embedResultsModal; @ViewChild('embedResultsModal') embedResultsModal;
@ -140,6 +141,7 @@ export class EntityActionsComponent implements OnInit {
} }
public openAddThisModal() { public openAddThisModal() {
this.addThisClicked = true;
this.addThisModal.cancelButton = false; this.addThisModal.cancelButton = false;
this.addThisModal.okButton = false; this.addThisModal.okButton = false;
this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks"; this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";