Fix sliders, but for real this time (pt 2)
This commit is contained in:
parent
8602b53260
commit
b2bfde4426
@ -88,17 +88,13 @@
|
||||
v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0"
|
||||
@click="showUwWindow('playerUiSettings')"
|
||||
>
|
||||
<span style="color: #fa6;">I hate this popup<br/></span>
|
||||
<span style="font-size: 0.8em">
|
||||
<span style="text-transform: uppercase; font-size: 0.8em">
|
||||
<a @click="showUwWindow('playerUiSettings')">
|
||||
Do something about it
|
||||
</a> × <a @click="acknowledgeNewFeature('uw6.ui-popup')">keep the popup</a>
|
||||
<span style="color: #fa6;">Change when and if<br/>this popup appears</span>
|
||||
<span style="font-size: 0.8rem">
|
||||
<span style="font-size: 0.8rem; opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
|
||||
Also accessible via:<br/> <span style="font-size: 0.85em">EXTENSION SETTINGS > UI AND KEYBOARD</span>.
|
||||
</span>
|
||||
<br/>
|
||||
<span style="opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
|
||||
Also accessible via <span style="font-variant: small-caps">extension settings</span>.
|
||||
</span>
|
||||
<a style="color: #fa6; cursor: pointer;" @click="() => acknowledgeNewFeature('uw6.ui-popup')">Dismiss this option</a>
|
||||
</span>
|
||||
</GhettoContextMenuOption>
|
||||
|
||||
|
||||
@ -67,18 +67,18 @@
|
||||
</div>
|
||||
<div class="input range-input">
|
||||
<input
|
||||
:value="settings.active.ui.inPlayer.maxEnabledWidth"
|
||||
:value="settings.active.ui.inPlayer.minEnabledWidth"
|
||||
class="slider"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value)"
|
||||
@input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value)"
|
||||
@change="(event) => saveSettings()"
|
||||
>
|
||||
<input
|
||||
:value="maxEnabledWidth"
|
||||
@input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value, true)"
|
||||
:value="ghettoComputed.minEnabledWidth"
|
||||
@input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)"
|
||||
@change="(event) => saveSettings(true)"
|
||||
>
|
||||
</div>
|
||||
@ -100,7 +100,7 @@
|
||||
@change="(event) => saveSettings()"
|
||||
>
|
||||
<input
|
||||
:value="minEnabledHeight"
|
||||
:value="ghettoComputed.minEnabledHeight"
|
||||
@input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
|
||||
@change="(event) => saveSettings(true)"
|
||||
>
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
ghettoComputed: { }
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
@ -169,16 +169,10 @@ export default {
|
||||
'settings', // required for buttons and actions, which are global
|
||||
'eventBus',
|
||||
],
|
||||
created() {
|
||||
},
|
||||
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);
|
||||
mounted() {
|
||||
this.ghettoComputed = {
|
||||
minEnabledWidth: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledWidth * 100, 0),
|
||||
minEnabledHeight: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledHeight * 100, 0),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -204,6 +198,12 @@ export default {
|
||||
}
|
||||
|
||||
this.settings.active.ui.inPlayer[key] = value;
|
||||
|
||||
if (isTextInput) {
|
||||
this.ghettoComputed[key] = this.optionalToFixed(value, 0);
|
||||
} else {
|
||||
this.ghettoComputed[key] = this.optionalToFixed(value * 100, 0);
|
||||
}
|
||||
},
|
||||
saveSettings(forceRefresh) {
|
||||
this.settings.saveWithoutReload();
|
||||
|
||||
@ -64,12 +64,13 @@
|
||||
min="0.1"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="(event) => setTriggerZoneOffset('width', event.target.value, true)"
|
||||
@input="(event) => setValue('width', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
<input
|
||||
:value="triggerZoneWidth"
|
||||
@input="(event) => setTriggerZoneSize('width', event.target.value)"
|
||||
@change="(event) => updateSettings()"
|
||||
:value="ghettoComputed.width"
|
||||
@input="(event) => setValue('width', event.target.value, true)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
@ -85,12 +86,13 @@
|
||||
min="0.1"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="(event) => setTriggerZoneOffset('height', event.target.value, true)"
|
||||
@input="(event) => setValue('height', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
<input
|
||||
:value="triggerZoneHeight"
|
||||
@input="(event) => setTriggerZoneSize('height', event.target.value)"
|
||||
@change="(event) => updateSettings()"
|
||||
:value="ghettoComputed.height"
|
||||
@input="(event) => setValue('height', event.target.value, true)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
@ -105,12 +107,13 @@
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
@input="(event) => setTriggerZoneOffset('offsetX', event.target.value, true)"
|
||||
@input="(event) => setValue('offsetX', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
<input
|
||||
:value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetX"
|
||||
@input="(event) => setTriggerZoneOffset('offsetX', event.target.value)"
|
||||
@change="(event) => updateSettings()"
|
||||
@input="(event) => setValue('offsetX', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
@ -125,12 +128,13 @@
|
||||
type="range"
|
||||
min="-100"
|
||||
max="100"
|
||||
@input="(event) => setTriggerZoneOffset('offsetY', event.target.value, true)"
|
||||
@input="(event) => setValue('offsetY', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
<input
|
||||
:value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetY"
|
||||
@input="(event) => setTriggerZoneOffset('offsetY', event.target.value)"
|
||||
@change="(event) => updateSettings()"
|
||||
@input="(event) => setValue('offsetY', event.target.value)"
|
||||
@change="(event) => updateSettings(true)"
|
||||
>
|
||||
</div>
|
||||
<div class="hint">
|
||||
@ -164,28 +168,27 @@ export default {
|
||||
activeCornerDrag: undefined,
|
||||
dragStartPosition: undefined,
|
||||
dragStartConfiguration: undefined,
|
||||
ghettoComputed: { }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.addEventListener("mouseup", this.handleMouseUp);
|
||||
document.addEventListener("mousemove", this.handleMouseMove);
|
||||
this.ghettoComputed = {
|
||||
width: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.width * 100, 0),
|
||||
height: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.height * 100, 0)
|
||||
};
|
||||
this.updateTriggerZones(false);
|
||||
},
|
||||
computed: {
|
||||
triggerZoneWidth() {
|
||||
const v = this.settings.active.ui.inPlayer.triggerZoneDimensions.width * 100;
|
||||
return this.optionalToFixed(v, 2);
|
||||
},
|
||||
triggerZoneHeight() {
|
||||
const v = this.settings.active.ui.inPlayer.triggerZoneDimensions.height * 100;
|
||||
return this.optionalToFixed(v, 2);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
optionalToFixed(v, n) {
|
||||
try {
|
||||
if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
|
||||
return v.toFixed(n);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
return v;
|
||||
},
|
||||
updateTriggerZones(forceRefresh = true) {
|
||||
@ -229,7 +232,6 @@ export default {
|
||||
this.handleResize(event);
|
||||
}
|
||||
|
||||
|
||||
this.updateTriggerZones();
|
||||
},
|
||||
handleResize(event) {
|
||||
@ -300,31 +302,38 @@ export default {
|
||||
// | | | |
|
||||
return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.\-]/g, '');
|
||||
},
|
||||
setTriggerZoneSize(key, value, instantUpdate) {
|
||||
let size = (+this.forceNumber(value) / 100);
|
||||
setValue(key, originalValue, isTextInput) {
|
||||
console.log('trying to set value:', key, value, isTextInput);
|
||||
|
||||
if (isNaN(+size)) {
|
||||
size = 0.5;
|
||||
let value = originalValue;
|
||||
if (isTextInput) {
|
||||
value = (+this.forceNumber(value) / 100);
|
||||
} else {
|
||||
value = +this.forceNumber(value);
|
||||
}
|
||||
|
||||
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = size;
|
||||
console.log('rocessed value:', value);
|
||||
|
||||
if (instantUpdate) {
|
||||
if (isNaN(+value)) {
|
||||
value = 0.5;
|
||||
}
|
||||
|
||||
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = value;
|
||||
if (isTextInput) {
|
||||
this.ghettoComputed[key] = this.optionalToFixed(originalValue, 0);
|
||||
} else {
|
||||
this.ghettoComputed[key] = this.optionalToFixed(originalValue * 100, 0);
|
||||
}
|
||||
this.updateSettings();
|
||||
}
|
||||
},
|
||||
setTriggerZoneOffset(key, value, instantUpdate) {
|
||||
let offset = +this.forceNumber(value);
|
||||
|
||||
this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = offset;
|
||||
|
||||
if (instantUpdate) {
|
||||
this.updateSettings();
|
||||
}
|
||||
},
|
||||
updateSettings() {
|
||||
updateSettings(forceRefresh) {
|
||||
this.settings.saveWithoutReload();
|
||||
this.updateTriggerZones();
|
||||
|
||||
if (forceRefresh) {
|
||||
this.$nextTick( () => this.$forceUpdate() );
|
||||
}
|
||||
},
|
||||
|
||||
//#endregion
|
||||
@ -454,4 +463,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.action-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user