2016-08-17 06:01:20 +08:00
|
|
|
import ko from 'ko';
|
2021-12-31 20:30:05 +08:00
|
|
|
import { koComputable } from 'External/ko';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2021-01-26 05:00:13 +08:00
|
|
|
import { convertLangName } from 'Common/Translator';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
import { AbstractViewPopup } from 'Knoin/AbstractViews';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2022-02-24 21:01:41 +08:00
|
|
|
export class LanguagesPopupView extends AbstractViewPopup {
|
2016-08-17 06:01:20 +08:00
|
|
|
constructor() {
|
2021-01-24 17:25:23 +08:00
|
|
|
super('Languages');
|
2016-08-17 06:01:20 +08:00
|
|
|
|
|
|
|
this.fLang = null;
|
|
|
|
this.userLanguage = ko.observable('');
|
|
|
|
|
2021-01-22 19:23:20 +08:00
|
|
|
this.langs = ko.observableArray();
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-12-31 20:30:05 +08:00
|
|
|
this.languages = koComputable(() => {
|
2016-08-17 06:01:20 +08:00
|
|
|
const userLanguage = this.userLanguage();
|
2021-01-22 19:23:20 +08:00
|
|
|
return this.langs.map(language => ({
|
2016-08-17 06:01:20 +08:00
|
|
|
key: language,
|
|
|
|
user: language === userLanguage,
|
|
|
|
selected: ko.observable(false),
|
|
|
|
fullName: convertLangName(language)
|
|
|
|
}));
|
2013-11-16 06:21:12 +08:00
|
|
|
});
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2020-10-26 19:54:03 +08:00
|
|
|
this.langs.subscribe(() => this.setLanguageSelection());
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
languageTooltipName(language) {
|
2021-05-06 08:39:59 +08:00
|
|
|
return convertLangName(language, true);
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
setLanguageSelection() {
|
|
|
|
const currentLang = this.fLang ? ko.unwrap(this.fLang) : '';
|
2021-01-27 17:59:15 +08:00
|
|
|
this.languages().forEach(item => item.selected(item.key === currentLang));
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2022-03-11 17:26:25 +08:00
|
|
|
beforeShow() {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fLang = null;
|
|
|
|
this.userLanguage('');
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.langs([]);
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
onShow(fLanguage, langs, userLanguage) {
|
|
|
|
this.fLang = fLanguage;
|
|
|
|
this.userLanguage(userLanguage || '');
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.langs(langs);
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
changeLanguage(lang) {
|
2022-09-02 17:52:07 +08:00
|
|
|
this.fLang?.(lang);
|
2022-03-04 16:21:24 +08:00
|
|
|
this.close();
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|