114 lines
3.7 KiB
TypeScript
114 lines
3.7 KiB
TypeScript
import {Component, OnInit} from '@angular/core';
|
|
import {ActivatedRoute, NavigationEnd, ParamMap, Router} from '@angular/router';
|
|
import {StateService} from '../../services/state.service';
|
|
import {Observable} from 'rxjs/Observable';
|
|
|
|
import 'rxjs/add/operator/first';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './root.component.html',
|
|
styleUrls: ['./root.component.scss']
|
|
})
|
|
export class RootComponent implements OnInit {
|
|
|
|
title = 'Joachim Homepage';
|
|
mousingOver: string = null;
|
|
pageType: string;
|
|
|
|
constructor(private router: Router, private route: ActivatedRoute, private stateService: StateService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
// console.log('oninit of root component');
|
|
this.route.paramMap.subscribe(val => console.log(val));
|
|
|
|
// this.stateService.getLanguageFromRoute(this.route).subscribe(val => {
|
|
// console.log('ngoninit root language: ' + val)
|
|
// });
|
|
|
|
/**
|
|
* Listen to changes in the param map (this is the root level, so will only see changes in 'language'. good!
|
|
*/
|
|
// this.route.paramMap.subscribe((paramMap: ParamMap) => {
|
|
// const language = paramMap.get('language');
|
|
// console.log(`root comp listens for parammap: ${language}`)
|
|
// // console.log('root: parammap changed ' + language);
|
|
// if (language !== null) {
|
|
// console.log('the subscriber of root changes the language to '+language);
|
|
// this.stateService.setLanguage(language, this.route, this.router);
|
|
// }
|
|
// });
|
|
|
|
// set the service, we know that this route is the one we need for language changes (parameter), so we gotta keep track of it
|
|
this.stateService.setRootRoute(this.route);
|
|
|
|
// we listen to a 'navigation end' event -> at that point we need update our pagetype string
|
|
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
|
|
// navigated somewhere, got to make sure the pagetype has updated too
|
|
this.updatePageType();
|
|
});
|
|
|
|
// do the first update for the page type
|
|
this.updatePageType();
|
|
|
|
|
|
}
|
|
|
|
/**
|
|
* Update the pagetype according to the right language and current router url.
|
|
*/
|
|
updatePageType() {
|
|
// console.log('firing update page type');
|
|
// console.log(this.router.url);
|
|
if (this.router.url.endsWith('posts')) {
|
|
this.pageType = 'Posts';
|
|
} else if (this.router.url.endsWith('cv')) {
|
|
this.pageType = 'Curriculum Vitae';
|
|
} else if (this.router.url.endsWith('home')) {
|
|
if (this.stateService.getLanguage() === 'nl') {
|
|
this.pageType = 'Thuis';
|
|
} else {
|
|
this.pageType = 'Home';
|
|
}
|
|
} else {
|
|
this.pageType = 'Joa did something wrong...';
|
|
}
|
|
}
|
|
|
|
mouseOver(s: string) {
|
|
// console.log('mouseover!' + s);
|
|
// do some translation
|
|
let language = this.stateService.getLanguage();
|
|
if (s === 'lang') {
|
|
if (language == 'nl') {
|
|
this.mousingOver = 'Taal: Nederlands';
|
|
} else if (language = 'en') {
|
|
this.mousingOver = 'Language: English';
|
|
} else {
|
|
this.mousingOver = 'Language: Yaaarrrr matey!';
|
|
}
|
|
} else {
|
|
// default: use the passed string
|
|
this.mousingOver = s;
|
|
}
|
|
}
|
|
|
|
mouseOut(s: string) {
|
|
this.mousingOver = null;
|
|
}
|
|
|
|
toggleLanguage() {
|
|
console.log('toggleLanguage called');
|
|
if (this.stateService.getLanguage() === 'nl') {
|
|
console.log(' > toggle switched to en');
|
|
this.stateService.setLanguage('en', this.route, this.router);
|
|
} else if (this.stateService.getLanguage() === 'en') {
|
|
this.stateService.setLanguage('nl', this.route, this.router);
|
|
console.log(' > toggle switched to nl');
|
|
} else {
|
|
console.log(' > Could not toggle the language, pirates stole your tongue.');
|
|
}
|
|
}
|
|
}
|