diff client/src/components/TimeSlider.vue @ 5067:99ac62a56dd2 time-sliding

client: add window resize event listener
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 11 Mar 2020 13:21:36 +0100
parents 46f8c8b3054b
children 7ef8d3dab29b
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Wed Mar 11 12:39:27 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Wed Mar 11 13:21:36 2020 +0100
@@ -62,6 +62,7 @@
 import app from "@/main";
 import { localeDateString } from "@/lib/datelocalization";
 import { format, setHours, setMinutes } from "date-fns";
+import debounce from "debounce";
 
 let zoom = null;
 let xScale = null;
@@ -71,7 +72,8 @@
   name: "timeslider",
   data() {
     return {
-      isSelectedTimeHourly: false
+      isSelectedTimeHourly: false,
+      resizeListenerFunction: null
     };
   },
   watch: {
@@ -276,9 +278,15 @@
       d3.select(".line").attr("x", d3.event.x);
     }
   },
+  created() {
+    this.resizeListenerFunction = debounce(this.createSlider, 100);
+    window.addEventListener("resize", this.resizeListenerFunction);
+  },
+  distoryed() {
+    window.removeEventListener("resize", this.resizeListenerFunction);
+  },
   mounted() {
     setTimeout(this.createSlider, 150);
-    window.addEventListener("resize", this.createSlider);
   }
 };
 </script>