Skip to content

Commit 67815a6

Browse files
13Ducksmcm001
13Ducks
authored and
mcm001
committed
[UI] Add delay to slider input boxes (#1)
1 parent a5dc0c1 commit 67815a6

2 files changed

Lines changed: 156 additions & 154 deletions

File tree

‎photon-client/src/components/common/cv-range-slider.vue‎

Lines changed: 111 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,123 @@
11
<template>
2-
<div>
3-
<v-row
4-
dense
5-
align="center"
2+
<div>
3+
<v-row dense align="center">
4+
<v-col :cols="2">
5+
<span>{{ name }}</span>
6+
</v-col>
7+
<v-col :cols="10">
8+
<v-range-slider
9+
:value="localValue"
10+
:max="max"
11+
:min="min"
12+
hide-details
13+
class="align-center"
14+
dark
15+
color="#ffd843"
16+
:step="step"
17+
@input="handleInput"
18+
@mousedown="$emit('rollback', localValue)"
619
>
7-
<v-col :cols="2">
8-
<span>{{ name }}</span>
9-
</v-col>
10-
<v-col :cols="10">
11-
<v-range-slider
12-
:value="localValue"
13-
:max="max"
14-
:min="min"
15-
hide-details
16-
class="align-center"
17-
dark
18-
color="#ffd843"
19-
:step="step"
20-
@input="handleInput"
21-
@mousedown="$emit('rollback', localValue)"
22-
>
23-
<template v-slot:prepend>
24-
<v-text-field
25-
dark
26-
:value="localValue[0]"
27-
:max="max"
28-
:min="min"
29-
class="mt-0 pt-0"
30-
hide-details
31-
single-line
32-
type="number"
33-
style="width: 50px"
34-
:step="step"
35-
@input="handleChange"
36-
@focus="prependFocused = true"
37-
@blur="prependFocused = false"
38-
/>
39-
</template>
20+
<template v-slot:prepend>
21+
<v-text-field
22+
dark
23+
:value="localValue[0]"
24+
:max="max"
25+
:min="min"
26+
class="mt-0 pt-0"
27+
hide-details
28+
single-line
29+
type="number"
30+
style="width: 50px"
31+
:step="step"
32+
@input="handleChange"
33+
@focus="prependFocused = true"
34+
@blur="prependFocused = false"
35+
/>
36+
</template>
4037

41-
<template v-slot:append>
42-
<v-text-field
43-
dark
44-
:value="localValue[1]"
45-
:max="max"
46-
:min="min"
47-
class="mt-0 pt-0"
48-
hide-details
49-
single-line
50-
type="number"
51-
style="width: 50px"
52-
:step="step"
53-
@input="handleChange"
54-
@focus="appendFocused = true"
55-
@blur="appendFocused = false"
56-
/>
57-
</template>
58-
</v-range-slider>
59-
</v-col>
60-
</v-row>
61-
</div>
38+
<template v-slot:append>
39+
<v-text-field
40+
dark
41+
:value="localValue[1]"
42+
:max="max"
43+
:min="min"
44+
class="mt-0 pt-0"
45+
hide-details
46+
single-line
47+
type="number"
48+
style="width: 50px"
49+
:step="step"
50+
@input="handleChange"
51+
@focus="appendFocused = true"
52+
@blur="appendFocused = false"
53+
/>
54+
</template>
55+
</v-range-slider>
56+
</v-col>
57+
</v-row>
58+
</div>
6259
</template>
6360

6461
<script>
65-
export default {
66-
name: 'RangeSlider',
67-
// eslint-disable-next-line vue/require-prop-types
68-
props: ['name', 'min', 'max', 'value', 'step'],
69-
data() {
70-
return {
71-
prependFocused: false,
72-
appendFocused: false
62+
export default {
63+
name: "RangeSlider",
64+
// eslint-disable-next-line vue/require-prop-types
65+
props: ["name", "min", "max", "value", "step"],
66+
data() {
67+
return {
68+
prependFocused: false,
69+
appendFocused: false,
70+
currentBoxVals: [null, null]
71+
};
72+
},
73+
computed: {
74+
localValue: {
75+
get() {
76+
return Object.values(this.value);
77+
},
78+
set(value) {
79+
this.$emit("input", value);
80+
}
81+
}
82+
},
83+
methods: {
84+
// handleChange(val) {
85+
// let i = 0;
86+
// if (this.prependFocused === false && this.appendFocused === true) {
87+
// i = 1;
88+
// }
89+
// if (this.prependFocused || this.appendFocused) {
90+
// this.$set(this.localValue, i, val);
91+
// this.$emit('rollback', this.localValue)
92+
// }
93+
// },
94+
handleChange(val) {
95+
let i = 0;
96+
if (this.prependFocused === false && this.appendFocused === true) {
97+
i = 1;
98+
}
7399
74-
}
75-
},
76-
computed: {
77-
localValue: {
78-
get() {
79-
return Object.values(this.value);
80-
},
81-
set(value) {
82-
this.$emit('input', value)
83-
}
84-
}
85-
},
86-
methods: {
87-
// handleChange(val) {
88-
// let i = 0;
89-
// if (this.prependFocused === false && this.appendFocused === true) {
90-
// i = 1;
91-
// }
92-
// if (this.prependFocused || this.appendFocused) {
93-
// this.$set(this.localValue, i, val);
94-
// this.$emit('rollback', this.localValue)
95-
// }
96-
// },
97-
handleChange(val) {
98-
let i = 0;
99-
if (this.prependFocused === false && this.appendFocused === true) {
100-
i = 1;
101-
}
102-
if (this.prependFocused || this.appendFocused) {
103-
let tmp = this.localValue;
104-
let parsed = parseFloat(val);
105-
if (isNaN(parsed)) return;
106-
tmp[i] = parsed;
107-
this.localValue = tmp;
108-
this.$emit("rollback", this.localValue);
109-
}
110-
},
111-
handleInput(val) {
112-
if (!this.prependFocused || !this.appendFocused) {
113-
this.localValue = val;
114-
}
115-
}
116-
}
100+
this.currentBoxVals[i] = val;
101+
setTimeout(() => {
102+
if (this.currentBoxVals[i] !== val) return;
103+
//if (this.prependFocused || this.appendFocused) {
104+
let tmp = this.localValue;
105+
let parsed = parseFloat(val);
106+
if (isNaN(parsed)) return;
107+
tmp[i] = parsed;
108+
this.localValue = tmp;
109+
this.$emit("rollback", this.localValue);
110+
//}
111+
}, 200);
112+
},
113+
handleInput(val) {
114+
if (!this.prependFocused || !this.appendFocused) {
115+
this.localValue = val;
116+
}
117117
}
118+
}
119+
};
118120
</script>
119121

120122
<style lang="" scoped>
121-
122123
</style>

‎photon-client/src/components/common/cv-slider.vue‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<div>
3-
<v-row
4-
dense
5-
align="center"
6-
>
3+
<v-row dense align="center">
74
<v-col :cols="2">
85
<span>{{ name }}</span>
96
</v-col>
@@ -19,7 +16,7 @@
1916
:step="step"
2017
@start="isClicked = true"
2118
@end="isClicked = false"
22-
@change="handleclick"
19+
@change="handleClick"
2320
@input="handleInput"
2421
@mousedown="$emit('rollback', localValue)"
2522
>
@@ -47,47 +44,51 @@
4744
</template>
4845

4946
<script>
50-
export default {
51-
name: 'Slider',
52-
// eslint-disable-next-line vue/require-prop-types
53-
props: ['min', 'max', 'name', 'value', 'step'],
54-
data() {
55-
return {
56-
isFocused: false,
57-
isClicked: false
58-
}
59-
},
60-
computed: {
61-
localValue: {
62-
get() {
63-
return this.value;
64-
},
65-
set(value) {
66-
this.$emit('input', value)
67-
}
68-
}
69-
},
70-
methods: {
71-
handleChange(val) {
72-
if (this.isFocused) {
73-
this.localValue = parseFloat(val);
74-
this.$emit('rollback', this.localValue)
75-
}
76-
},
77-
handleInput(val) {
78-
if (!this.isFocused && this.isClicked) {
79-
this.localValue = val;
80-
}
81-
},
82-
handleclick(val) {
83-
if (!this.isFocused) {
84-
this.localValue = val;
85-
}
86-
}
87-
}
47+
export default {
48+
name: "Slider",
49+
// eslint-disable-next-line vue/require-prop-types
50+
props: ["min", "max", "name", "value", "step"],
51+
data() {
52+
return {
53+
isFocused: false,
54+
isClicked: false,
55+
currentBoxVal: null
56+
};
57+
},
58+
computed: {
59+
localValue: {
60+
get() {
61+
return this.value;
62+
},
63+
set(value) {
64+
this.$emit("input", value);
65+
}
8866
}
67+
},
68+
methods: {
69+
handleChange(val) {
70+
this.currentBoxVal = val;
71+
setTimeout(() => {
72+
if (this.currentBoxVal !== val) return;
73+
// if (this.isFocused) {
74+
this.localValue = parseFloat(val);
75+
this.$emit("rollback", this.localValue);
76+
// }
77+
}, 200);
78+
},
79+
handleInput(val) {
80+
if (!this.isFocused && this.isClicked) {
81+
this.localValue = val;
82+
}
83+
},
84+
handleClick(val) {
85+
if (!this.isFocused) {
86+
this.localValue = val;
87+
}
88+
}
89+
}
90+
};
8991
</script>
9092

9193
<style lang="" scoped>
92-
9394
</style>

0 commit comments

Comments
 (0)