tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sliders, but for real

Browse Source
This commit is contained in:
Tamius Han 2024-12-28 03:14:53 +01:00
parent 145b361581
commit 8602b53260
1 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
View File

@ -22,7 +22,7 @@
<input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" /> <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
</div> </div>
<div class="field"> <div class="field disabled">
<div class="label"> <div class="label">
Popup activator position: Popup activator position:
</div> </div>
@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<div class="field" :class="{disabled: settings.active.ui.inPlayer.activation !== 'trigger-zone'}"> <div class="field" :class="{'disabled': settings.active.ui.inPlayer.activation !== 'trigger-zone'}">
<div class="label">Edit trigger zone:</div> <div class="label">Edit trigger zone:</div>
<button @click="startTriggerZoneEdit()">Edit</button> <button @click="startTriggerZoneEdit()">Edit</button>
</div> </div>
@ -67,18 +67,19 @@
</div> </div>
<div class="input range-input"> <div class="input range-input">
<input <input
:value="settings.active.ui.inPlayer.minEnabledWidth" :value="settings.active.ui.inPlayer.maxEnabledWidth"
class="slider" class="slider"
type="range" type="range"
min="0" min="0"
max="1" max="1"
step="0.01" step="0.01"
@input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)" @input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value)"
@change="(event) => saveSettings()"
> >
<input <input
:value="settings.active.ui.inPlayer.minEnabledWidth" :value="maxEnabledWidth"
@input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value)" @input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value, true)"
@change="(event) => saveSettings()" @change="(event) => saveSettings(true)"
> >
</div> </div>
</div> </div>
@ -95,12 +96,13 @@
min="0" min="0"
max="1" max="1"
step="0.01" step="0.01"
@input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)" @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value)"
@change="(event) => saveSettings()"
> >
<input <input
:value="minEnabledHeight" :value="minEnabledHeight"
@input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value)" @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
@change="(event) => saveSettings()" @change="(event) => saveSettings(true)"
> >
</div> </div>
</div> </div>
@ -169,14 +171,46 @@ export default {
], ],
created() { created() {
}, },
mounted() { computed: {
maxEnabledWidth() {
const v = this.settings.active.ui.inPlayer.maxEnabledWidth * 100;
return this.optionalToFixed(v, 0);
},
minEnabledHeight() {
const v = this.settings.active.ui.inPlayer.minEnabledHeight * 100;
return this.optionalToFixed(v, 0);
}
}, },
methods: { methods: {
setUiPage(key, event) { forcePositiveNumber(value) {
// Change EU format to US if needed
// | remove everything after second period if necessary
// | | | remove non-numeric characters
// | | | |
return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.]/g, '');
}, },
saveSettings() { optionalToFixed(v, n) {
if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
return v.toFixed(n);
}
return v;
},
setPlayerRestrictions(key, value, isTextInput) {
if (isTextInput) {
value = (+this.forcePositiveNumber(value) / 100);
}
if (isNaN(+value)) {
value = 0.5;
}
this.settings.active.ui.inPlayer[key] = value;
},
saveSettings(forceRefresh) {
this.settings.saveWithoutReload(); this.settings.saveWithoutReload();
if (forceRefresh) {
this.$nextTick( () => this.$forceRefresh() );
}
}, },
startTriggerZoneEdit() { startTriggerZoneEdit() {
this.eventBus.send('start-trigger-zone-edit'); this.eventBus.send('start-trigger-zone-edit');