Dear support,
I’m trying to implement a language selector in your admin demo (with material skin). In this way I have added this item to the topbar (in admin.js):
{view: "icon", icon: "language", width: 45, popup: "langSelector"}
and the import to the popup object. The popup is defined as JetView object with the function:
onShow: function(){
const langs = this.$scope.app.getService("locale");
this.queryView({view: "list"}).select(langs.getLang());
}
and a child list with the function onSelectChange: () => this.toggleLanguage()
where toggleLanguage is the same as your locales example:
toggleLanguage(){
const langs = this.app.getService("locale");
const value = this.getRoot().queryView({view: "list"}).getSelectedId();
if (value!=langs.getLang()){
langs.setLang(value);
}
}
If I switch to “Italian” I don’t get errors but the translation doesn’t work and the graphical layout of the page is distorted. Note that if I set the italian language in the config code of sidebar.js (to translate the title and details of the pages called through the sidebar menu), the translation works.
Another question: which is the best way to storing the language selected? cookie, url, other?
This is the entire code of the jetview object:
import {JetView} from "webix-jet";
// export default ui;
class LanguageView extends JetView {
config(){
return {
view: "popup",
id: "langSelector",
width: 300,
padding:0,
css:"submenu_language",
body:{
type: "clean",
borderless:true,
rows:[
{
view: "list",
autoheight: true,
data: [
{id: "en", value: "English"},
{id: "it", value: "Italiano"},
],
type:{
height: 45,
template: " <img class='flag' src='assets/imgs/flags/#id#.png' /><span class='text'>#value#</span>"
},
select: true,
on:{
onSelectChange: () => this.toggleLanguage()
}
}
]
},
on: {
onShow: function(){
const langs = this.$scope.app.getService("locale");
this.queryView({view: "list"}).select(langs.getLang());
}
}
};
}
showWindow(){
this.getRoot().show();
}
toggleLanguage(){
const langs = this.app.getService("locale");
const value = this.getRoot().queryView({view: "list"}).getSelectedId();
if (value!=langs.getLang()){
langs.setLang(value);
}
}
}
export default LanguageView;