funky-framadate-front/src/app/shared/components/selectors/language-selector/language-selector.component.ts

import { Component, Inject, OnInit } from '@angular/core';

import { LanguageEnum } from '../../../../core/enums/language.enum';
import { LanguageService } from '../../../../core/services/language.service';
import { StorageService } from '../../../../core/services/storage.service';
import { DOCUMENT } from '@angular/common';

@Component({
	selector: 'app-language-selector',
	templateUrl: './language-selector.component.html',
	styleUrls: ['./language-selector.component.scss'],
})
export class LanguageSelectorComponent implements OnInit {
	public currentLang: string;
	public availableLanguages: any = ['FR', 'EN', 'ES'];
	language: string;
	language_to_apply: string;
	display_lang_dialog: boolean = false;

	constructor(
		private languageService: LanguageService,
		private storageService: StorageService,
		@Inject(DOCUMENT) private document: any
	) {}

	ngOnInit(): void {
		this.availableLanguages = this.languageService.getAvailableLanguages();
		this.currentLang = this.languageService.getLangage();
		if (this.storageService.language && this.availableLanguages.indexOf(this.storageService.language) !== -1) {
			this.languageService.setLanguage(this.storageService.language);
		}
	}

	setLang(newlang: string = 'fr'): void {
		this.currentLang = newlang;
		this.languageService.setLanguage(newlang);
		this.storageService.language = this.currentLang;
	}

	focusOnCancelButton() {
		this.display_lang_dialog = false;
		let buttonClose = this.document.querySelector('#display_cancel_popup_button');
		if (buttonClose) {
			buttonClose.focus();
		}
	}

	nextLang(): void {
		const index = this.availableLanguages.indexOf(this.currentLang);

		if (index !== -1) {
			// on passe au language suivant si il existe, sinon on revient au numéro 0

			if (this.availableLanguages[index + 1]) {
				this.currentLang = this.availableLanguages[index + 1];
			} else {
				this.currentLang = this.availableLanguages[0];
			}
			this.setLang();
		}
	}

	applyLangAndClosePopup() {
		this.setLang(this.language_to_apply);
		this.display_lang_dialog = false;
		let elem = this.document.querySelector('#lang_button_popup');
		if (elem) {
			elem.focus();
		}
	}

	openDialogLang() {
		this.display_lang_dialog = true;
		let elem = this.document.querySelector('#lang_button_popup');
		if (elem) {
			elem.focus();
		}
	}
}