fix(QSlider/QRange): emitting @input/@change

rstoenescu · rstoenescu · commit e5930d6fe3a7 · 2018-03-15T22:18:09.000+02:00
diff --git a/src/components/knob/QKnob.js b/src/components/knob/QKnob.js
@@ -215,7 +215,7 @@ export default {
     }, [
       h('div', {
         on: {
-          click: e => !this.dragging && this.__onInput(e, undefined, true)
+          click: e => !this.dragging && this.__onInput(e, void 0, true)
         },
         directives: [{
           name: 'touch-pan',
diff --git a/src/components/range/QRange.js b/src/components/range/QRange.js
@@ -118,13 +118,13 @@ export default {
     }
   },
   methods: {
-    __setActive (event) {
+    __getDragging (event) {
       let
         container = this.$refs.handle,
         width = container.offsetWidth,
         sensitivity = (this.dragOnlyRange ? -1 : 1) * this.$refs.handleMin.offsetWidth / (2 * width)
 
-      this.dragging = {
+      let dragging = {
         left: container.getBoundingClientRect().left,
         width,
         valueMin: this.model.min,
@@ -134,7 +134,7 @@ export default {
       }
 
       let
-        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
+        percentage = getPercentage(event, dragging, this.$q.i18n.rtl),
         type
 
       if (percentage < this.currentMinPercentage + sensitivity) {
@@ -143,10 +143,10 @@ export default {
       else if (percentage < this.currentMaxPercentage - sensitivity) {
         if (this.dragRange || this.dragOnlyRange) {
           type = dragType.RANGE
-          extend(this.dragging, {
+          extend(dragging, {
             offsetPercentage: percentage,
             offsetModel: getModel(percentage, this.min, this.max, this.step, this.computedDecimals),
-            rangeValue: this.dragging.valueMax - this.dragging.valueMin,
+            rangeValue: dragging.valueMax - dragging.valueMin,
             rangePercentage: this.currentMaxPercentage - this.currentMinPercentage
           })
         }
@@ -161,89 +161,84 @@ export default {
       }
 
       if (this.dragOnlyRange && type !== dragType.RANGE) {
-        setTimeout(() => {
-          this.dragging = false
-        }, 100)
-        return
+        return false
       }
 
-      this.dragging.type = type
-      this.__update(event)
+      dragging.type = type
+      return dragging
     },
-    __update (event) {
+    __move (event, dragging = this.dragging) {
       let
-        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
+        percentage = getPercentage(event, dragging, this.$q.i18n.rtl),
         model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals),
         pos
 
-      switch (this.dragging.type) {
+      switch (dragging.type) {
         case dragType.MIN:
-          if (percentage <= this.dragging.percentageMax) {
+          if (percentage <= dragging.percentageMax) {
             pos = {
               minP: percentage,
-              maxP: this.dragging.percentageMax,
+              maxP: dragging.percentageMax,
               min: model,
-              max: this.dragging.valueMax
+              max: dragging.valueMax
             }
           }
           else {
             pos = {
-              minP: this.dragging.percentageMax,
+              minP: dragging.percentageMax,
               maxP: percentage,
-              min: this.dragging.valueMax,
+              min: dragging.valueMax,
               max: model
             }
           }
           break
 
         case dragType.MAX:
-          if (percentage >= this.dragging.percentageMin) {
+          if (percentage >= dragging.percentageMin) {
             pos = {
-              minP: this.dragging.percentageMin,
+              minP: dragging.percentageMin,
               maxP: percentage,
-              min: this.dragging.valueMin,
+              min: dragging.valueMin,
               max: model
             }
           }
           else {
             pos = {
               minP: percentage,
-              maxP: this.dragging.percentageMin,
+              maxP: dragging.percentageMin,
               min: model,
-              max: this.dragging.valueMin
+              max: dragging.valueMin
             }
           }
           break
 
         case dragType.RANGE:
           let
-            percentageDelta = percentage - this.dragging.offsetPercentage,
-            minP = between(this.dragging.percentageMin + percentageDelta, 0, 1 - this.dragging.rangePercentage),
-            modelDelta = model - this.dragging.offsetModel,
-            min = between(this.dragging.valueMin + modelDelta, this.min, this.max - this.dragging.rangeValue)
+            percentageDelta = percentage - dragging.offsetPercentage,
+            minP = between(dragging.percentageMin + percentageDelta, 0, 1 - dragging.rangePercentage),
+            modelDelta = model - dragging.offsetModel,
+            min = between(dragging.valueMin + modelDelta, this.min, this.max - dragging.rangeValue)
 
           pos = {
             minP,
-            maxP: minP + this.dragging.rangePercentage,
+            maxP: minP + dragging.rangePercentage,
             min: parseFloat(min.toFixed(this.computedDecimals)),
-            max: parseFloat((min + this.dragging.rangeValue).toFixed(this.computedDecimals))
+            max: parseFloat((min + dragging.rangeValue).toFixed(this.computedDecimals))
           }
           break
       }
 
       this.currentMinPercentage = pos.minP
       this.currentMaxPercentage = pos.maxP
-      this.__updateInput(pos)
+      this.model = {
+        min: pos.min,
+        max: pos.max
+      }
     },
-    __end () {
+    __end (event, dragging = this.dragging) {
+      this.__move(event, dragging)
       this.currentMinPercentage = (this.model.min - this.min) / (this.max - this.min)
       this.currentMaxPercentage = (this.model.max - this.min) / (this.max - this.min)
-      this.__endEmit()
-    },
-    __updateInput ({min = this.model.min, max = this.model.max}) {
-      const model = {min, max}
-      this.model = model
-      this.$emit('input', model)
     },
     __validateProps () {
       if (this.min >= this.max) {
diff --git a/src/components/slider/QSlider.js b/src/components/slider/QSlider.js
@@ -68,27 +68,31 @@ export default {
     }
   },
   methods: {
-    __setActive (event) {
-      let container = this.$refs.handle
-
-      this.dragging = {
+    __getDragging (evt) {
+      const container = this.$refs.handle
+      return {
         left: container.getBoundingClientRect().left,
         width: container.offsetWidth
       }
-      this.__update(event)
     },
-    __update (event) {
-      let
-        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
-        model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals)
+    __move (event) {
+      const percentage = getPercentage(
+        event,
+        this.dragging,
+        this.$q.i18n.rtl
+      )
 
       this.currentPercentage = percentage
-      this.model = model
-      this.$emit('input', model)
+      this.model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals)
     },
-    __end () {
+    __end (event, dragging = this.dragging) {
+      const percentage = getPercentage(
+        event,
+        dragging,
+        this.$q.i18n.rtl
+      )
+      this.model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals)
       this.currentPercentage = (this.model - this.min) / (this.max - this.min)
-      this.__endEmit()
     },
     __validateProps () {
       if (this.min >= this.max) {
diff --git a/src/components/slider/slider-utils.js b/src/components/slider/slider-utils.js
@@ -59,11 +59,6 @@ export let SliderMixin = {
     readonly: Boolean,
     disable: Boolean
   },
-  data () {
-    return {
-      clickDisabled: false
-    }
-  },
   computed: {
     editable () {
       return !this.disable && !this.readonly
@@ -98,37 +93,44 @@ export let SliderMixin = {
   methods: {
     __pan (event) {
       if (event.isFinal) {
-        this.clickDisabled = true
-        this.$nextTick(() => {
-          this.clickDisabled = false
-        })
-        this.__end(event.evt)
+        if (this.dragging) {
+          this.dragTimer = setTimeout(() => {
+            this.dragging = false
+          }, 100)
+          this.__end(event.evt)
+          this.__update(true)
+        }
       }
       else if (event.isFirst) {
-        this.__setActive(event.evt)
+        clearTimeout(this.dragTimer)
+        this.dragging = this.__getDragging(event.evt)
       }
       else if (this.dragging) {
-        this.__update(event.evt)
+        this.__move(event.evt)
+        this.__update()
       }
     },
-    __endEmit () {
-      setTimeout(() => {
-        this.dragging = false
-      }, 100)
+    __update (change) {
+      if (JSON.stringify(this.model) === JSON.stringify(this.value)) {
+        return
+      }
       this.$emit('input', this.model)
-      this.$nextTick(() => {
-        this.$emit('dragend', this.model)
-        if (JSON.stringify(this.model) !== JSON.stringify(this.value)) {
-          this.$emit('change', this.model)
-        }
-      })
+      if (change) {
+        this.$nextTick(() => {
+          if (JSON.stringify(this.model) !== JSON.stringify(this.value)) {
+            this.$emit('change', this.model)
+          }
+        })
+      }
     },
     __click (event) {
-      if (this.clickDisabled || this.dragging) {
-        return
+      if (!this.dragging) {
+        const dragging = this.__getDragging(event)
+        if (dragging) {
+          this.__end(event, dragging)
+          this.__update(true)
+        }
       }
-      this.__setActive(event)
-      this.__end(event)
     },
     __getMarkers (h) {
       if (!this.markers) {
