[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

View File

@ -1000,10 +1000,10 @@
<a href="#">Overview</a>
</li>
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
<a href="#">Impact</a>
<a href="#" (click)="clickedImpactIndicators()">Impact</a>
</li>
<li *ngIf="hasAltMetrics">
<a href="#">Social</a>
<a href="#" (click)="clickedAltMetrics()">Social</a>
</li>
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
@ -1092,6 +1092,7 @@
</li>
<!-- impact -->
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
<ng-container *ngIf="impactClicked">
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
<div class="uk-card uk-card-default uk-padding-small">
<table class="uk-table uk-table-small uk-margin-remove">
@ -1126,10 +1127,11 @@
<span class="uk-text-bolder">BIP!</span>
</a>
</div>
</ng-container>
</li>
<!-- social -->
<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>
<!-- usage -->
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">

View File

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

View File

@ -58,7 +58,7 @@ import {EnvProperties} from "../properties/env-properties";
[type]="getTypeName().toLowerCase()"></citeThis>
</modal-alert>
<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 *ngIf="result" #embedResultsModal large="true">
<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() compactView: boolean = false; // if true, do not show label for actions
public citeThisClicked: boolean;
public addThisClicked: boolean;
public routerHelper: RouterHelper = new RouterHelper();
@ViewChild('citeModal') citeModal;
@ViewChild('embedResultsModal') embedResultsModal;
@ -140,6 +141,7 @@ export class EntityActionsComponent implements OnInit {
}
public openAddThisModal() {
this.addThisClicked = true;
this.addThisModal.cancelButton = false;
this.addThisModal.okButton = false;
this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";