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