<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, i) in langs" :key="`Lang${i}`" :value="lang"> {{ fullName(lang) }} <template v-if="fullName(lang) != localeName(lang)"> ยท {{ localeName(lang) }}</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', // langs: ["af","ar","ca","cs","cy","da","de","el","en","eo","es","eu","fa","fi","fr","gl","he","hu","id","it","ja","ko","ms","nl","no","oc","pl","pt","ro","ru","sr","sv","th","tr","uk","vi","zh","zh-cn","zh-tw"] langs: [ "en", "ar", "ca", "de", "el", "es", "eu", "fr", "he", "gd", "gl", "id", "it", "ja", "nl", "pl", "pt", "ru", "uk", "vi" ] } }, mounted() { this.profile = window._sharedData.user; this.isLoaded = true; this.locale = this.$i18n.locale; }, watch: { locale: function(val) { this.loadLang(val); } }, methods: { fullName(val) { const factory = new Intl.DisplayNames([val], { type: 'language' }); return factory.of(val); }, localeName(val) { const factory = new Intl.DisplayNames([this.$i18n.locale], { type: 'language' }); return factory.of(val); }, loadLang(lang) { axios.post('/api/pixelfed/web/change-language.json', { v: 0.1, l: lang }) .then(res => { this.$i18n.locale = lang; }) } } } </script>