twitch-chatbot/src/js/vue/component/partial/langswitch.vue at main · CodelineRed/twitch-chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script>
    import bsComponent from '../../method/bs-component';
    import dataTable from '../../method/data-table';

    export default {
        mixins: [bsComponent, dataTable],
        props: {
            drop: {
                type: String,
                default: 'up'
            }
        },
        data: function() {
            return {
                currentLocale: window.localStorage.getItem('currentLocale') ? window.localStorage.getItem('currentLocale') : 'en',
                fallbackLocale: 'en',
                languages: ['en', 'de'],
                init: false
            };
        },
        watch: {
            currentLocale(newLocale) {
                window.localStorage.currentLocale = newLocale;
            }
        },
        mounted: function() {
            this.changeLang(this.currentLocale);
        },
        methods: {
            changeLang: function(lang) {
                let $this = this;
                $this.$i18n.locale = lang;
                $this.currentLocale = lang;
                window.localStorage.setItem('currentLocale', lang);

                setTimeout(function() {
                    if ($this.init) {
                        $this.initDataTable();
                    }
                    $this.initTooltip();
                    $this.initPopover();
                    $this.init = true;
                }, 250);
            },
            getButtonClass: function() {
                return 'drop' + this.drop;
            }
        }
    };
</script>

<template>
    <div class="col-auto">
        <div class="btn-group" :class="getButtonClass()">
            <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <font-awesome-icon :icon="['fas', 'globe']" class="fa-fw" />
            </button>
            <div class="dropdown-menu">
                <a v-for="locale in languages" :key="locale" class="dropdown-item" :class="{active: locale === currentLocale}" onclick="javascript:return false;" href="#" @click="changeLang(locale)">{{ $t('lang-' + locale) }}</a>
            </div>
        </div>
    </div>
</template>