# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1583940843 -3600
# Node ID 45d868476dea5fdd1f6434be5f97675650ebdbb3
# Parent  a0b0e0f916f52454ba616a107541735e0b76217c
timeslider: resizable

diff -r a0b0e0f916f5 -r 45d868476dea client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Wed Mar 11 16:30:03 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Wed Mar 11 16:34:03 2020 +0100
@@ -7,7 +7,7 @@
     ]"
     :style="reposition"
   >
-    <div class="d-flex mt-1 mr-1">
+    <div id="timeselection" class="d-flex mt-1 mr-1">
       <input
         class="form-control-sm mr-1"
         type="date"
@@ -28,20 +28,28 @@
       class="d-flex sliderContainer"
       style="width: 98%;"
     ></div>
-    <div @click="close" class="d-flex box-control mr-0" style="width: 2%;">
+    <div
+      id="closebutton"
+      @click="close"
+      class="d-flex box-control mr-0"
+      style="width: 2%;"
+    >
       <font-awesome-icon icon="times"></font-awesome-icon>
     </div>
   </div>
 </template>
-<style lang="sass" scoped>
-#slider
-  position: absolute
-  bottom: 0
-  min-width: 100vw
-  &.expanded
-    max-height: 100%
-    max-width: 100%
-    margin: 0
+<style lang="scss" scoped>
+#slider {
+  position: absolute;
+  bottom: 0;
+  min-width: 100vw;
+}
+
+#slider.expanded {
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0;
+}
 </style>
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
@@ -151,7 +159,6 @@
       d3.select(".zoom").call(zoom.transform, t);
     },
     createSlider() {
-      d3.select(".sliderContainer svg").remove();
       const element = document.getElementById("sliderContainer");
       const svgWidth = element ? element.clientWidth : 0,
         svgHeight = 40,
@@ -276,13 +283,30 @@
     onDrag() {
       this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
       d3.select(".line").attr("x", d3.event.x);
+    },
+    rescaleTimeSlider() {
+      const bodyWidth = document.querySelector("body").clientWidth;
+      const timeSelectionWidth = document.querySelector("#timeselection")
+        .clientWidth;
+      const closeButton = document.querySelector("#closebutton").clientWidth;
+      const svgWidth = bodyWidth - timeSelectionWidth - closeButton;
+      document
+        .querySelector(".sliderContainer svg")
+        .setAttribute("width", svgWidth);
+      xScale.range([0, svgWidth]);
+      xAxis.scale(xScale);
+      d3.select(".axis--x").call(xAxis);
+      d3.select(".line").attr(
+        "x",
+        xAxis.scale()(d3.isoParse(this.selectedTime))
+      );
     }
   },
   created() {
-    this.resizeListenerFunction = debounce(this.createSlider, 100);
+    this.resizeListenerFunction = debounce(this.rescaleTimeSlider, 100);
     window.addEventListener("resize", this.resizeListenerFunction);
   },
-  distoryed() {
+  destroyed() {
     window.removeEventListener("resize", this.resizeListenerFunction);
   },
   mounted() {