pixelfed/pixelfed

<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>