Mercurial > gemma
changeset 3682:c086f5176ef2
client: diagrams: fixed removal of resize listener
listeners were not removed so diagrams were redrawn even if they were closed/not visible/mounted, leading to console errors.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 18 Jun 2019 12:53:05 +0200 |
parents | c9e1848a516a |
children | 4a00ff7e44f0 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 5 files changed, 24 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue Jun 18 12:43:01 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Jun 18 12:53:05 2019 +0200 @@ -93,6 +93,7 @@ data() { return { containerId: "availablefairwaydepth", + resizeListenerFunction: null, loading: false, width: 1000, height: 600, @@ -147,7 +148,11 @@ }; }, created() { - window.addEventListener("resize", debounce(this.drawDiagram), 200); + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); + }, + destroyed() { + window.removeEventListener("resize", this.resizeListenerFunction); }, mounted() { this.drawDiagram();
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Jun 18 12:43:01 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Jun 18 12:53:05 2019 +0200 @@ -90,6 +90,7 @@ data() { return { containerId: "availablefairwaydepthlnwl", + resizeListenerFunction: null, loading: false, labelPaddingTop: 15, scalePaddingLeft: 50, @@ -138,7 +139,11 @@ }; }, created() { - window.addEventListener("resize", debounce(this.drawDiagram), 200); + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); + }, + destroyed() { + window.removeEventListener("resize", this.resizeListenerFunction); }, mounted() { this.drawDiagram();
--- a/client/src/components/fairway/Fairwayprofile.vue Tue Jun 18 12:43:01 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue Jun 18 12:53:05 2019 +0200 @@ -165,6 +165,7 @@ }, data() { return { + resizeListenerFunction: null, width: null, height: null, margin: { @@ -802,7 +803,8 @@ } }, created() { - window.addEventListener("resize", debounce(this.drawDiagram), 100); + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); }, mounted() { this.drawDiagram(); @@ -835,7 +837,7 @@ this.drawDiagram(); }, destroyed() { - window.removeEventListener("resize", debounce(this.drawDiagram)); + window.removeEventListener("resize", this.resizeListenerFunction); } }; </script>
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Jun 18 12:43:01 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Jun 18 12:53:05 2019 +0200 @@ -122,6 +122,7 @@ data() { return { containerId: "hydrologicalconditions-diagram-container", + resizeListenerFunction: null, svg: null, diagram: null, navigation: null, @@ -1116,7 +1117,8 @@ } }, created() { - window.addEventListener("resize", debounce(this.drawDiagram), 100); + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); }, mounted() { this.drawDiagram(); @@ -1149,7 +1151,7 @@ this.drawDiagram(); }, destroyed() { - window.removeEventListener("resize", debounce(this.drawDiagram)); + window.removeEventListener("resize", this.resizeListenerFunction); } }; </script>
--- a/client/src/components/gauge/Waterlevel.vue Tue Jun 18 12:43:01 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Tue Jun 18 12:53:05 2019 +0200 @@ -126,6 +126,7 @@ data() { return { containerId: "waterlevel-diagram-container", + resizeListenerFunction: null, svg: null, diagram: null, navigation: null, @@ -1257,7 +1258,8 @@ } }, created() { - window.addEventListener("resize", debounce(this.drawDiagram), 100); + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); }, mounted() { // Nasty but necessary if we don't want to use the updated hook to re-draw @@ -1295,7 +1297,7 @@ }); }, destroyed() { - window.removeEventListener("resize", debounce(this.drawDiagram)); + window.removeEventListener("resize", this.resizeListenerFunction); } }; </script>