From 9e5e5368b6228c8e75d055b956fca3771d2a64f1 Mon Sep 17 00:00:00 2001
From: Aaryan Agrawal <aaryanagrawal03@gmail.com>
Date: Wed, 1 Jul 2020 16:03:06 -0700
Subject: [PATCH] add delay to slider input boxes

---
 .../src/components/common/cv-range-slider.vue | 221 +++++++++---------
 .../src/components/common/cv-slider.vue       |  89 +++----
 2 files changed, 156 insertions(+), 154 deletions(-)

diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/cv-range-slider.vue
index 1e55b6645f..09804e54a4 100644
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -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>
\ No newline at end of file
diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/cv-slider.vue
index 86d463033a..0d73687c19 100644
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/cv-slider.vue
@@ -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>
@@ -19,7 +16,7 @@
           :step="step"
           @start="isClicked = true"
           @end="isClicked = false"
-          @change="handleclick"
+          @change="handleClick"
           @input="handleInput"
           @mousedown="$emit('rollback', localValue)"
         >
@@ -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>
\ No newline at end of file