oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
Code Wiki Activity

Cleanup toggle switch component

Browse source
This commit is contained in:
Dan Salvato 2024-02-10 11:29:54 -07:00
parent 560dc349a6
commit 9b4a0da10b
2 changed files with 35 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/modules/main_menu/components/main-menu.vue
View file

@ -90,16 +90,12 @@
<footer>
<div class="tw-border-t">
<toggle-switch
groupname="ffzSimpleView"
:options="{
config: {
preSelected: context.simple_view ? 'Simple' : 'Advanced',
items: [
{ name: t('main-menu.simple', 'Simple'), value: 'Simple' },
{ name: t('main-menu.advanced', 'Advanced'), value: 'Advanced' }
]
}
}"
group-name="ffzSimpleView"
:preselected="context.simple_view ? 'simple' : 'advanced'"
:items="[
{ name: t('main-menu.simple', 'Simple'), value: 'simple' },
{ name: t('main-menu.advanced', 'Advanced'), value: 'advanced' }
]"
@change="updateSimpleView"
/>
</div>
@ -370,7 +366,7 @@ export default {
updateSimpleView(event) {
const key = 'ffz.simple-view';
const val = event.value === 'Simple';
const val = event.value === 'simple';
this.context.currentProfile.set(key, val);
}
}

158
src/std-components/toggle-switch.vue
View file

@ -3,21 +3,18 @@
class="toggle-switch"
>
<template
v-for="item in defaultOptions.config.items"
v-for="item in items"
>
<input
:id="item.value + group"
:id="item.value"
:value="item.value"
:disabled="defaultOptions.config.disabled || disabled"
:name="groupname"
:class="{ active: !defaultOptions.config.disabled || disabled}"
:name="groupName"
type="radio"
:checked="item.value === selectedItem"
@click="toggle"
>
<label
:class="{ active: !defaultOptions.config.disabled || disabled }"
:for="item.value + group"
:for="item.value"
type="radio"
>
{{ item.name }}
@ -27,157 +24,58 @@
</template>
<script>
const rem = v => `${v}rem`
export default {
props: {
options: {
type: Object,
preselected: {
type: String,
required: false
},
items: {
type: Array,
required: true
},
modelValue: {
type: String,
required: false
},
groupname: {
groupName: {
type: String,
required: true
},
group: {
type: String,
required: false,
default: ''
},
disabled: {
type: Boolean,
required: false,
default: false
}
},
emits: ['update:modelValue'],
data () {
return {
selected: false,
selectedItem: 'unknown',
defaultOptions: Object
}
},
computed: {
toggleSwitchStyle () {
return {
width: rem(this.defaultOptions.size.width),
height: rem(this.defaultOptions.size.height)
}
},
itemStyle () {
return {
width: rem(this.defaultOptions.size.width),
height: rem(this.defaultOptions.size.height),
fontFamily: this.defaultOptions.layout.fontFamily,
fontSize: rem(this.defaultOptions.size.fontSize),
textAlign: 'center'
}
},
labelStyle () {
return {
padding: rem(this.defaultOptions.size.padding),
borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
backgroundColor: this.defaultOptions.layout.backgroundColor,
color: this.defaultOptions.layout.color,
fontWeight: this.defaultOptions.layout.fontWeight
}
selectedItem: ''
}
},
watch: {
modelValue (val) {
this.selectedItem = val
},
options (val) {
if (val !== null && val !== undefined) {
this.mergeDefaultOptionsWithProp(val)
}
}
},
mounted () {
if (this.options !== null && this.options !== undefined) {
this.mergeDefaultOptionsWithProp(this.options)
}
if (this.defaultOptions.config.preSelected !== 'unknown') {
this.selectedItem = this.defaultOptions.config.preSelected
this.$emit('update:modelValue', this.selectedItem)
this.$emit('input', this.selectedItem)
} else if (this.modelValue) {
if (this.preselected)
this.selectedItem = this.preselected
else if (this.modelValue)
this.selectedItem = this.modelValue
this.$emit('update:modelValue', this.selectedItem)
this.$emit('input', this.selectedItem)
}
},
created () {
this.defaultOptions = {
layout: {
color: 'black',
backgroundColor: 'lightgray',
selectedColor: 'white',
selectedBackgroundColor: 'green',
borderColor: 'gray',
fontFamily: 'Arial',
fontWeight: 'normal',
fontWeightSelected: 'bold',
squareCorners: false,
noBorder: false
},
size: {
fontSize: 1.5,
height: 3.25,
padding: 0.5,
width: 10
},
config: {
preSelected: 'unknown',
disabled: false,
items: [
{ name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
{ name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
]
}
}
else return;
this.$emit('update:modelValue', this.selectedItem)
this.$emit('input', this.selectedItem)
},
methods: {
toggle (event) {
if (!this.defaultOptions.config.disabled) {
this.selected = true
this.selectedItem = event.target.id.replace(this.group, '')
this.$emit('selected', this.selected)
this.$emit('update:modelValue', event.target.id.replace(this.group, ''))
this.$emit('input', this.selectedItem)
this.$emit('change', {
value: event.target.id.replace(this.group, ''),
srcEvent: event
})
}
},
labelStyleSelected (color, backgroundColor) {
return {
padding: rem(this.defaultOptions.size.padding),
borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
fontWeight: this.defaultOptions.layout.fontWeightSelected,
backgroundColor: backgroundColor !== undefined ? backgroundColor : this.defaultOptions.layout.selectedBackgroundColor,
color: color !== undefined ? color : this.defaultOptions.layout.selectedColor
}
},
mergeDefaultOptionsWithProp (options) {
const result = this.defaultOptions
for (const option in options) {
if (options[option] !== null && typeof (options[option]) === 'object') {
for (const subOption in options[option]) {
if (options[option][subOption] !== undefined && options[option][subOption] !== null) {
result[option][subOption] = options[option][subOption]
}
}
} else {
result[option] = options[option]
}
}
this.selected = true
this.selectedItem = event.target.id
this.$emit('selected', this.selected)
this.$emit('update:modelValue', event.target.id)
this.$emit('input', this.selectedItem)
this.$emit('change', {
value: event.target.id,
srcEvent: event
})
}
}
}