-
Notifications
You must be signed in to change notification settings - Fork 0
/
langswitch.vue
59 lines (56 loc) · 2.01 KB
/
langswitch.vue
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
<script>
import cookieConsent from '../../module/cookie-consent';
import slider from '../../module/slider';
export default {
mixins: [cookieConsent, slider],
props: {
drop: {
type: String,
default: 'up'
}
},
data: function() {
return {
currentLocale: window.localStorage.getItem('currentLocale') ? window.localStorage.getItem('currentLocale') : 'en',
fallbackLocale: 'en',
languages: ['en', 'de']
};
},
watch: {
currentLocale(newLocale) {
window.localStorage.currentLocale = newLocale;
}
},
mounted: function() {
this.changeLang(this.currentLocale);
},
methods: {
changeLang: function(lang) {
let $this = this;
$this.$i18n.locale = lang;
localStorage.currentLocale = lang;
// workaround: initSlider() is called, but it's not right translated
// if you slide to the left, after language has changed
setTimeout(function() {
$this.initCookieConsent();
$this.initSlider();
}, 100);
},
getButtonClass: function() {
return 'drop' + this.drop;
}
}
};
</script>
<template>
<div class="col-4 col-md-6">
<div class="btn-group" :class="getButtonClass()">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<fa icon="fa-solid fa-globe"></fa>
</button>
<div class="dropdown-menu">
<a v-for="lang in languages" :key="lang" class="dropdown-item" onclick="javascript:return false;" href="#" @click="changeLang(lang)">{{ $t("lang-" + lang) }}</a>
</div>
</div>
</div>
</template>