[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:
parent
ed7ee4b4a3
commit
dd4d785d96
|
|
@ -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,44 +1092,46 @@
|
|||
</li>
|
||||
<!-- impact -->
|
||||
<li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
|
||||
<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">
|
||||
<tbody>
|
||||
<ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index">
|
||||
<tr>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
|
||||
<icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
|
||||
<a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container>
|
||||
</td>
|
||||
<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">
|
||||
{{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
<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">
|
||||
<tbody>
|
||||
<ng-container *ngFor="let measure of resultLandingInfo.measure.bip; let i = index">
|
||||
<tr>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
|
||||
<icon [name]="measure.icon" [flex]="true" [customClass]="'bip-icon'"></icon>
|
||||
</td>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == resultLandingInfo.measure.bip.length - 1">
|
||||
<a class="uk-link uk-link-text uk-text-capitalize">{{measure.name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: true}"></ng-container>
|
||||
</td>
|
||||
<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">
|
||||
{{isNumber(measure.value) ? formatNumber(measure.value) : measure.value}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</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 *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 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>
|
||||
</div>
|
||||
<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>
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue