Mercurial > gemma
changeset 5071:45d868476dea time-sliding
timeslider: resizable
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 11 Mar 2020 16:34:03 +0100 |
parents | a0b0e0f916f5 |
children | 51b30f7c64a2 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 38 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- 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() {