Last size adjustments
[vchess.git] / client / src / components / Language.vue
CommitLineData
98db2082
BA
1<template lang="pug">
2div
3 -
4 var langName = {
5 "en": "English",
6 "es": "Español",
7 "fr": "Français",
8 };
9 input#modalLang.modal(type="checkbox")
10 div(role="dialog")
11 #language.card
12 label.modal-close(for="modalLang")
4f887105 13 form(@change="setLanguage")
98db2082 14 fieldset
c66a829b 15 label(for="langSelect") {{ st.tr["Language"] }}
98db2082
BA
16 select#langSelect
17 each language,langCode in langName
4f887105 18 option(value=langCode)
98db2082
BA
19 =language
20</template>
21
22<script>
c66a829b 23import { store } from "@/store";
98db2082 24export default {
c66a829b
BA
25 name: "my-language",
26 data: function() {
27 return {
28 st: store.state,
29 };
30 },
4f887105
BA
31 mounted: function() {
32 // TODO: better style would be in pug directly, but how?
33 document.querySelectorAll("#langSelect > option").forEach(opt => {
34 if (opt.value == this.st.lang)
35 opt.selected = true;
36 });
37 },
38 methods: {
98db2082
BA
39 setLanguage: function(e) {
40 localStorage["lang"] = e.target.value;
c66a829b 41 store.setLanguage(e.target.value);
98db2082
BA
42 },
43 },
44};
45</script>