Skip to content

Commit

Permalink
[UI] Add delay to slider input boxes (#1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@13Ducks @mcm001
13Ducks authored and mcm001 committed Jul 7, 2020
1 parent a5dc0c1 commit 67815a6
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 154 deletions.
221 changes: 111 additions & 110 deletions photon-client/src/components/common/cv-range-slider.vue
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,123 @@
<template>
<div>
<v-row
dense
align="center"
<div>
<v-row dense align="center">
<v-col :cols="2">
<span>{{ name }}</span>
</v-col>
<v-col :cols="10">
<v-range-slider
:value="localValue"
:max="max"
:min="min"
hide-details
class="align-center"
dark
color="#ffd843"
:step="step"
@input="handleInput"
@mousedown="$emit('rollback', localValue)"
>
<v-col :cols="2">
<span>{{ name }}</span>
</v-col>
<v-col :cols="10">
<v-range-slider
:value="localValue"
:max="max"
:min="min"
hide-details
class="align-center"
dark
color="#ffd843"
:step="step"
@input="handleInput"
@mousedown="$emit('rollback', localValue)"
>
<template v-slot:prepend>
<v-text-field
dark
:value="localValue[0]"
:max="max"
:min="min"
class="mt-0 pt-0"
hide-details
single-line
type="number"
style="width: 50px"
:step="step"
@input="handleChange"
@focus="prependFocused = true"
@blur="prependFocused = false"
/>
</template>
<template v-slot:prepend>
<v-text-field
dark
:value="localValue[0]"
:max="max"
:min="min"
class="mt-0 pt-0"
hide-details
single-line
type="number"
style="width: 50px"
:step="step"
@input="handleChange"
@focus="prependFocused = true"
@blur="prependFocused = false"
/>
</template>

<template v-slot:append>
<v-text-field
dark
:value="localValue[1]"
:max="max"
:min="min"
class="mt-0 pt-0"
hide-details
single-line
type="number"
style="width: 50px"
:step="step"
@input="handleChange"
@focus="appendFocused = true"
@blur="appendFocused = false"
/>
</template>
</v-range-slider>
</v-col>
</v-row>
</div>
<template v-slot:append>
<v-text-field
dark
:value="localValue[1]"
:max="max"
:min="min"
class="mt-0 pt-0"
hide-details
single-line
type="number"
style="width: 50px"
:step="step"
@input="handleChange"
@focus="appendFocused = true"
@blur="appendFocused = false"
/>
</template>
</v-range-slider>
</v-col>
</v-row>
</div>
</template>

<script>
export default {
name: 'RangeSlider',
// eslint-disable-next-line vue/require-prop-types
props: ['name', 'min', 'max', 'value', 'step'],
data() {
return {
prependFocused: false,
appendFocused: false
export default {
name: "RangeSlider",
// eslint-disable-next-line vue/require-prop-types
props: ["name", "min", "max", "value", "step"],
data() {
return {
prependFocused: false,
appendFocused: false,
currentBoxVals: [null, null]
};
},
computed: {
localValue: {
get() {
return Object.values(this.value);
},
set(value) {
this.$emit("input", value);
}
}
},
methods: {
// handleChange(val) {
// let i = 0;
// if (this.prependFocused === false && this.appendFocused === true) {
// i = 1;
// }
// if (this.prependFocused || this.appendFocused) {
// this.$set(this.localValue, i, val);
// this.$emit('rollback', this.localValue)
// }
// },
handleChange(val) {
let i = 0;
if (this.prependFocused === false && this.appendFocused === true) {
i = 1;
}
}
},
computed: {
localValue: {
get() {
return Object.values(this.value);
},
set(value) {
this.$emit('input', value)
}
}
},
methods: {
// handleChange(val) {
// let i = 0;
// if (this.prependFocused === false && this.appendFocused === true) {
// i = 1;
// }
// if (this.prependFocused || this.appendFocused) {
// this.$set(this.localValue, i, val);
// this.$emit('rollback', this.localValue)
// }
// },
handleChange(val) {
let i = 0;
if (this.prependFocused === false && this.appendFocused === true) {
i = 1;
}
if (this.prependFocused || this.appendFocused) {
let tmp = this.localValue;
let parsed = parseFloat(val);
if (isNaN(parsed)) return;
tmp[i] = parsed;
this.localValue = tmp;
this.$emit("rollback", this.localValue);
}
},
handleInput(val) {
if (!this.prependFocused || !this.appendFocused) {
this.localValue = val;
}
}
}
this.currentBoxVals[i] = val;
setTimeout(() => {
if (this.currentBoxVals[i] !== val) return;
//if (this.prependFocused || this.appendFocused) {
let tmp = this.localValue;
let parsed = parseFloat(val);
if (isNaN(parsed)) return;
tmp[i] = parsed;
this.localValue = tmp;
this.$emit("rollback", this.localValue);
//}
}, 200);
},
handleInput(val) {
if (!this.prependFocused || !this.appendFocused) {
this.localValue = val;
}
}
}
};
</script>

<style lang="" scoped>
</style>
89 changes: 45 additions & 44 deletions photon-client/src/components/common/cv-slider.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<template>
<div>
<v-row
dense
align="center"
>
<v-row dense align="center">
<v-col :cols="2">
<span>{{ name }}</span>
</v-col>
Expand All @@ -19,7 +16,7 @@
:step="step"
@start="isClicked = true"
@end="isClicked = false"
@change="handleclick"
@change="handleClick"
@input="handleInput"
@mousedown="$emit('rollback', localValue)"
>
Expand Down Expand Up @@ -47,47 +44,51 @@
</template>

<script>
export default {
name: 'Slider',
// eslint-disable-next-line vue/require-prop-types
props: ['min', 'max', 'name', 'value', 'step'],
data() {
return {
isFocused: false,
isClicked: false
}
},
computed: {
localValue: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value)
}
}
},
methods: {
handleChange(val) {
if (this.isFocused) {
this.localValue = parseFloat(val);
this.$emit('rollback', this.localValue)
}
},
handleInput(val) {
if (!this.isFocused && this.isClicked) {
this.localValue = val;
}
},
handleclick(val) {
if (!this.isFocused) {
this.localValue = val;
}
}
}
export default {
name: "Slider",
// eslint-disable-next-line vue/require-prop-types
props: ["min", "max", "name", "value", "step"],
data() {
return {
isFocused: false,
isClicked: false,
currentBoxVal: null
};
},
computed: {
localValue: {
get() {
return this.value;
},
set(value) {
this.$emit("input", value);
}
}
},
methods: {
handleChange(val) {
this.currentBoxVal = val;
setTimeout(() => {
if (this.currentBoxVal !== val) return;
// if (this.isFocused) {
this.localValue = parseFloat(val);
this.$emit("rollback", this.localValue);
// }
}, 200);
},
handleInput(val) {
if (!this.isFocused && this.isClicked) {
this.localValue = val;
}
},
handleClick(val) {
if (!this.isFocused) {
this.localValue = val;
}
}
}
};
</script>

<style lang="" scoped>
</style>

0 comments on commit 67815a6

Please sign in to comment.