Mercurial > gemma
changeset 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 | 6e1174f031f4 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 10 insertions(+), 2 deletions(-) [+] |
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>