Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(client): fix range slider rendering

Browse Source
This commit is contained in:
syuilo 2021-12-04 20:35:08 +09:00
parent e42e9530cb
commit 8a3f860213
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/form-dialog.vue
View File

@ -40,7 +40,7 @@
<template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> <template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormRadios> </FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" class="_formBlock"> <FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormRange> </FormRange>

28
packages/client/src/components/form/range.vue
View File

@ -16,7 +16,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'; import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ export default defineComponent({
@ -58,6 +58,9 @@ export default defineComponent({
}, },
setup(props, context) { setup(props, context) {
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min)); const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedValue = computed(() => { const steppedValue = computed(() => {
if (props.step) { if (props.step) {
@ -78,10 +81,25 @@ export default defineComponent({
if (thumbEl.value == null) return 0; if (thumbEl.value == null) return 0;
return thumbEl.value!.offsetWidth; return thumbEl.value!.offsetWidth;
}); });
const thumbPosition = computed(() => { const thumbPosition = ref(0);
if (containerEl.value == null) return 0; const calcThumbPosition = () => {
return (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value; if (containerEl.value == null) {
thumbPosition.value = 0;
} else {
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
}
};
watch([steppedValue, containerEl], calcThumbPosition);
onMounted(() => {
const ro = new ResizeObserver((entries, observer) => {
calcThumbPosition();
}); });
ro.observe(containerEl.value);
onUnmounted(() => {
ro.disconnect();
});
});
const steps = computed(() => { const steps = computed(() => {
if (props.step) { if (props.step) {
return (props.max - props.min) / props.step; return (props.max - props.min) / props.step;
@ -89,8 +107,6 @@ export default defineComponent({
return 0; return 0;
} }
}); });
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
const onMousedown = (ev: MouseEvent | TouchEvent) => { const onMousedown = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault(); ev.preventDefault();

1
packages/client/src/pages/settings/sounds.vue
View File

@ -119,6 +119,7 @@ export default defineComponent({
mim: 0, mim: 0,
max: 1, max: 1,
step: 0.05, step: 0.05,
textConverter: (v) => `${Math.floor(v * 100)}%`,
label: this.$ts.volume, label: this.$ts.volume,
default: this.sounds[type].volume default: this.sounds[type].volume
}, },