tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

⚡ change translation button way to be in sync with the model

Browse Source
This commit is contained in:
Baptiste Lemoine 2020-01-16 11:02:57 +01:00
parent 051e4d8ee4
commit 37904596fb
2 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/app.component.html
View File

@ -18,16 +18,20 @@
<img <img
src="assets/img/icone-langue.svg" src="assets/img/icone-langue.svg"
alt="location icon" alt="location icon"
class="lang_icon" (click)="changeLanguage()"
> <img class="lang_icon clickable"
src="assets/img/icone-menu.svg" >
alt="menu icon" <img
class="menu_icon" (click)="toggleMenu()"
> alt="menu icon"
class="menu_icon clickable"
src="assets/img/icone-menu.svg"
>
<select <select
name="language" name="language"
class="Language-" class="Language-"
(change)="switchLanguage($event.target.value)" (change)="switchLanguage(currentLang)"
[(ngModel)]="currentLang"
> >
<option <option
value="d" value="d"
@ -37,7 +41,7 @@
<option value="en">English</option> <option value="en">English</option>
<option value="fr">Français</option> <option value="fr">Français</option>
</select> </select>
<span class="menu_label">Menu</span> <span (click)="toggleMenu()" class="menu_label">Menu</span>
</div> </div>
<h1 i18n>{{"Title"|translate}}</h1> <h1 i18n>{{"Title"|translate}}</h1>
<div> <div>

31
src/app/app.component.ts
View File

@ -8,6 +8,8 @@ import {Router} from '@angular/router';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
currentLang = 'fr';
langsAvailable = ['fr', 'en'];
title = 'framadate'; title = 'framadate';
//translation demo: //translation demo:
minutes = 12; minutes = 12;
@ -15,11 +17,17 @@ export class AppComponent {
name: 'Arthur', name: 'Arthur',
age: 42 age: 42
}; };
menuVisible: boolean = true;
private step: string; private step: string;
constructor(private translate: TranslateService, constructor(private translate: TranslateService,
private route: Router) { private route: Router) {
this.translate.setDefaultLang('fr'); this.translate.setDefaultLang(this.currentLang);
this.detectCurrentTabOnRouteChange();
}
detectCurrentTabOnRouteChange() {
this.route.events.subscribe((event: any) => { this.route.events.subscribe((event: any) => {
// console.log('event', event); // console.log('event', event);
@ -39,6 +47,27 @@ export class AppComponent {
switchLanguage(language: string) { switchLanguage(language: string) {
this.translate.use(language); this.translate.use(language);
this.currentLang = language;
} }
/**
* set the next lang or loop to the first
* this is to manage future languages available
*/
changeLanguage() {
let langs = this.langsAvailable;
let indexofCurrent = langs.indexOf(this.currentLang);
if (indexofCurrent > -1) {
let newIndex = indexofCurrent + 1;
if (newIndex > (langs.length - 1)) {
newIndex = 0;
}
this.currentLang = this.langsAvailable[newIndex];
}
this.translate.use(this.currentLang);
}
toggleMenu() {
this.menuVisible = !this.menuVisible;
}
} }