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