]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 | 1 | <template> |
a46bede2 BW |
2 | <a |
3 | @click.prevent="toggleSetting()" | |
4 | class="navbar-item is-inline-block-mobile" | |
5 | > | |
ed8b17e0 | 6 | <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span> |
b9c5fcf0 BW |
7 | <slot></slot> |
8 | </a> | |
9 | </template> | |
10 | ||
11 | <script> | |
12 | export default { | |
13 | name: "SettingToggle", | |
14 | props: { | |
15 | name: String, | |
16 | icon: String, | |
17 | iconAlt: String, | |
5db2414d | 18 | defaultValue: Boolean, |
b9c5fcf0 BW |
19 | }, |
20 | data: function () { | |
21 | return { | |
ed8b17e0 | 22 | secondaryIcon: null, |
b9c5fcf0 BW |
23 | value: true, |
24 | }; | |
25 | }, | |
26 | created: function () { | |
ed8b17e0 | 27 | this.secondaryIcon = this.iconAlt || this.icon; |
b9c5fcf0 BW |
28 | |
29 | if (this.name in localStorage) { | |
30 | this.value = JSON.parse(localStorage[this.name]); | |
5db2414d A |
31 | } else { |
32 | this.value = this.defaultValue; | |
b9c5fcf0 BW |
33 | } |
34 | ||
35 | this.$emit("updated", this.value); | |
36 | }, | |
37 | methods: { | |
38 | toggleSetting: function () { | |
39 | this.value = !this.value; | |
40 | localStorage[this.name] = this.value; | |
41 | this.$emit("updated", this.value); | |
42 | }, | |
43 | }, | |
44 | }; | |
45 | </script> |