changeset 5162:eb4683befb39

timeslider: prevent selecting future dates while dragging
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 03 Apr 2020 10:36:16 +0200
parents 1ece2e6ac754
children 745c7d8aadbe
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 7 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Fri Apr 03 10:23:13 2020 +0200
+++ b/client/src/components/TimeSlider.vue	Fri Apr 03 10:36:16 2020 +0200
@@ -265,14 +265,6 @@
         .on("drag", this.onDrag)
         .on("end", () => {
           d3.select(".line").classed("active", false);
-          const now = new Date();
-          if (this.selectedTime > now) {
-            this.selectedTime = now;
-            d3.select(".line").attr(
-              "x",
-              xAxis.scale()(d3.isoParse(this.selectedTime))
-            );
-          }
         });
       const main = svg
         .append("g")
@@ -379,7 +371,13 @@
     },
     onDrag() {
       this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
-      d3.select(".line").attr("x", d3.event.x);
+      const now = new Date();
+      if (this.selectedTime > now) {
+        this.selectedTime = now;
+        d3.select(".line").attr("x", xAxis.scale()(d3.isoParse(now)));
+      } else {
+        d3.select(".line").attr("x", d3.event.x);
+      }
     },
     redrawTimeSlider() {
       const bodyWidth = document.querySelector("body").clientWidth;