You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pixelfed/resources/assets/components/Language.vue

97 lines
2.4 KiB
Vue

<template>
<div class="web-wrapper">
<div v-if="isLoaded" class="container-fluid mt-3">
<div class="row">
<div class="col-md-3 d-md-block">
<sidebar :user="profile" />
</div>
<div class="col-md-6">
<div class="jumbotron shadow-sm bg-white">
<div class="text-center">
<h1 class="font-weight-bold mb-0">Language</h1>
</div>
</div>
<div class="card shadow-sm mb-3">
<div class="card-body">
<div class="locale-changer form-group">
<label>Language</label>
<select class="form-control" v-model="locale">
<option v-for="lang in langs" :key="lang.code" :value="lang.code">
{{ lang.name }}
<template v-if="lang.nativeName && lang.nativeName != lang.name"> · {{ lang.nativeName }}</template>
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<drawer />
</div>
</template>
<script type="text/javascript">
import Drawer from './partials/drawer.vue';
import Sidebar from './partials/sidebar.vue';
export default {
components: {
"drawer": Drawer,
"sidebar": Sidebar,
},
data() {
return {
isLoaded: false,
profile: undefined,
locale: 'en-US',
// Loaded from the static locales manifest (/_lang/locales.json)
// generated by `php artisan i18n:export`. Objects of the shape
// { code, name, nativeName }, pre-sorted by display name.
langs: []
}
},
mounted() {
this.profile = window._sharedData.user;
this.locale = this.$i18n.locale;
axios.get('/_lang/locales.json')
.then(res => {
this.langs = Array.isArray(res.data) ? res.data : [];
})
.catch(() => {
// Fall back to whatever locales were bundled into VueI18n.
this.langs = this.$i18n.availableLocales.slice().sort().map(code => ({
code,
name: code,
nativeName: code,
}));
})
.finally(() => {
this.isLoaded = true;
});
},
watch: {
locale: function(val) {
this.loadLang(val);
}
},
methods: {
loadLang(lang) {
axios.post('/api/pixelfed/web/change-language.json', {
v: 0.1,
l: lang
})
.then(res => {
this.$i18n.locale = lang;
})
}
}
}
</script>