MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

[Monitor | Trunk]: Add condition check for animation starting only in browser. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@58872 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-06-10 09:12:17 +00:00
parent 8481958d00
commit 7f07534d02
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/home/home.component.html
View File

@ -21,7 +21,7 @@
<div class="uk-container uk-container-large uk-margin-large-top uk-text-justify"> <div class="uk-container uk-container-large uk-margin-large-top uk-text-justify">
<div class="uk-margin-left uk-margin-right uk-margin-large-bottom"> <div class="uk-margin-left uk-margin-right uk-margin-large-bottom">
<div class="uk-child-width-1-3@m uk-grid uk-grid-large" uk-grid> <div class="uk-child-width-1-3@m uk-grid uk-grid-large" uk-grid>
<div [@1]="state.toString()" class="clickable" (click)="startCaptainsAnimation()"> <div [@1]="state.toString()" class="clickable" (click)="startAnimation()">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5 class="uk-margin-remove-bottom uk-text-bold">
Get a complete picture Get a complete picture
</h5> </h5>
@ -30,7 +30,7 @@
view of your publications-data-code. view of your publications-data-code.
</div> </div>
</div> </div>
<div [@2]="state.toString()" class="clickable" (click)="startCaptainsAnimation(2)"> <div [@2]="state.toString()" class="clickable" (click)="startAnimation(2)">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5 class="uk-margin-remove-bottom uk-text-bold">
Monitor open science compliance Monitor open science compliance
</h5> </h5>
@ -39,7 +39,7 @@
for your organization and see how you fare in EOSC. for your organization and see how you fare in EOSC.
</div> </div>
</div> </div>
<div [@3]="state.toString()" class="clickable" (click)="startCaptainsAnimation(3)"> <div [@3]="state.toString()" class="clickable" (click)="startAnimation(3)">
<h5 class="uk-margin-remove-bottom uk-text-bold"> <h5 class="uk-margin-remove-bottom uk-text-bold">
Turn research results to insights Turn research results to insights
</h5> </h5>

17
src/app/home/home.component.ts
View File

@ -16,7 +16,7 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service"; import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
import {Stakeholder, StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder"; import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
@Component({ @Component({
selector: 'home', selector: 'home',
@ -167,8 +167,10 @@ export class HomeComponent {
this.directLink = value; this.directLink = value;
}) })
}); });
if(typeof document != "undefined") {
this.initAnimations(); this.initAnimations();
this.startCaptainsAnimation(); this.startAnimation();
}
} }
public initAnimations() { public initAnimations() {
@ -180,14 +182,14 @@ export class HomeComponent {
this.observer.observe(this.ref.nativeElement); this.observer.observe(this.ref.nativeElement);
} }
public startCaptainsAnimation(state = 1) { public startAnimation(state = 1) {
this.clearTimeouts(); this.clearTimeouts();
this.state = state; this.state = state;
this.timeouts.push(setTimeout(() => { this.timeouts.push(setTimeout(() => {
if (this.state < 3) { if (this.state < 3) {
this.startCaptainsAnimation(this.state + 1); this.startAnimation(this.state + 1);
} else { } else {
this.startCaptainsAnimation(); this.startAnimation();
} }
}, 6000)); }, 6000));
} }
@ -214,7 +216,6 @@ export class HomeComponent {
if(this.type === null) { if(this.type === null) {
return this.stakeholders.length; return this.stakeholders.length;
} else { } else {
console.log(this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length);
return this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length; return this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length;
} }
} }
@ -322,7 +323,6 @@ export class HomeComponent {
let mod = index % 9; let mod = index % 9;
if (mod === 0 || mod === 4 || mod === 8) { if (mod === 0 || mod === 4 || mod === 8) {
this.stakeholders[index].size = 'large'; this.stakeholders[index].size = 'large';
console.log(this.stakeholders[index]);
} else if (mod === 1 || mod === 5 || mod === 6) { } else if (mod === 1 || mod === 5 || mod === 6) {
this.stakeholders[index].size = 'small'; this.stakeholders[index].size = 'small';
} else { } else {
@ -364,6 +364,9 @@ export class HomeComponent {
this.piwiksub.unsubscribe(); this.piwiksub.unsubscribe();
} }
this.clearTimeouts(); this.clearTimeouts();
if(this.observer) {
this.observer.disconnect();
}
} }
private handleError(message: string, error): number { private handleError(message: string, error): number {