diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 394a7fc..0867156 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -43,17 +43,31 @@ export class AppComponent { dataService: DataService; + alarmClockTimelines: gsap.core.Timeline[] = []; + constructor(dataService: DataService) { this.dataService = dataService; + this.dataService.langChange.subscribe(() => this.onLangChange()); } ngAfterViewInit(): void { this.addLangButtonAnimation(); + this.addProgressBarAnimation(); // @ts-ignore for (let el of document.getElementsByClassName("alarm-clock-animated")) { this.addAlarmClockAnimation(el); } - this.addProgressBarAnimation(); + } + + onLangChange() { + this.alarmClockTimelines.forEach(tl => tl.kill()); + this.alarmClockTimelines = []; + + let objectsToAnimate = document.getElementsByClassName("alarm-clock-animated"); + // @ts-ignore + for (let el of objectsToAnimate) { + this.addAlarmClockAnimation(el); + } } addProgressBarAnimation() { @@ -134,6 +148,7 @@ export class AppComponent { rotationX: "30deg", transformPerspective: "1400px", }) + this.alarmClockTimelines.push(bottomHalfTl, upperHalfTl); } } diff --git a/src/app/data/data.service.ts b/src/app/data/data.service.ts index beb52f3..b3c8887 100644 --- a/src/app/data/data.service.ts +++ b/src/app/data/data.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {EventEmitter, Injectable} from '@angular/core'; import * as educationJson from '../../data/education.json'; import * as generalJson from '../../data/general.json'; import * as experienceJson from '../../data/experience.json'; @@ -22,6 +22,8 @@ export class DataService { skillCategories: SkillCategory[]; skills: Skill[]; + langChange: EventEmitter = new EventEmitter(true); + constructor() { this.determineLanguage(); } @@ -72,7 +74,10 @@ export class DataService { this.languagesMenuItems.push({ id: langPack.id, icon: `fi fis fi-${langPack.isoAlpha2} flag-icon${flagActive}`, - command: () => this.setLang(lang) + command: () => { + this.setLang(lang); + this.langChange.emit(); + } }) }