2016-08-17 06:01:20 +08:00
|
|
|
import ko from 'ko';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
import { convertLangName } from 'Common/Utils';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-09-10 06:38:16 +08:00
|
|
|
// import {view, ViewType} from 'Knoin/Knoin';
|
2019-07-05 03:19:24 +08:00
|
|
|
import { popup } from 'Knoin/Knoin';
|
|
|
|
import { AbstractViewNext } from 'Knoin/AbstractViewNext';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-09-10 06:38:16 +08:00
|
|
|
@popup({
|
2016-08-17 06:01:20 +08:00
|
|
|
name: 'View/Popup/Languages',
|
|
|
|
templateID: 'PopupsLanguages'
|
|
|
|
})
|
2019-07-05 03:19:24 +08:00
|
|
|
class LanguagesPopupView extends AbstractViewNext {
|
2016-08-17 06:01:20 +08:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
this.fLang = null;
|
|
|
|
this.userLanguage = ko.observable('');
|
|
|
|
|
|
|
|
this.langs = ko.observableArray([]);
|
|
|
|
|
|
|
|
this.languages = ko.computed(() => {
|
|
|
|
const userLanguage = this.userLanguage();
|
2020-07-23 02:09:31 +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
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.langs.subscribe(() => {
|
|
|
|
this.setLanguageSelection();
|
|
|
|
});
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
languageTooltipName(language) {
|
|
|
|
const result = convertLangName(language, true);
|
|
|
|
return convertLangName(language, false) === result ? '' : result;
|
|
|
|
}
|
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) : '';
|
2020-07-22 20:49:18 +08:00
|
|
|
this.languages().forEach(item => {
|
2016-08-17 06:01:20 +08:00
|
|
|
item.selected(item.key === currentLang);
|
|
|
|
});
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
onBeforeShow() {
|
|
|
|
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) {
|
2019-07-05 03:19:24 +08:00
|
|
|
if (this.fLang) {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fLang(lang);
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.cancelCommand();
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
export { LanguagesPopupView, LanguagesPopupView as default };
|