Mercurial > gemma
changeset 879:52fe3e20f750
client: improve print styling
* Set explicit pixel width and height for the map for printing. This
results in a map which roughly has the right scale, though it is
not centered on the screen view anymore and also does not take up
the full printed page.
* Add handlers for detecting print events, with some experiments
in deactivated code.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 01 Oct 2018 12:01:46 +0200 |
parents | 42df1cabf410 |
children | aa2acb942e55 27282bfd1ba7 |
files | client/src/application/Main.vue client/src/map/Maplayer.vue |
diffstat | 2 files changed, 46 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Sat Sep 29 22:35:53 2018 +0200 +++ b/client/src/application/Main.vue Mon Oct 01 12:01:46 2018 +0200 @@ -81,6 +81,7 @@ }, created() { window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); + window.addEventListener("onbeforeprint", this.test); }, updated() { this.scaleFairwayProfile(); @@ -89,6 +90,9 @@ window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); }, methods: { + test(evt) { + console.log("test: ", evt); + }, scaleFairwayProfile() { if (!document.querySelector(".profile")) return; const clientHeight = document.querySelector(".profile").clientHeight;
--- a/client/src/map/Maplayer.vue Sat Sep 29 22:35:53 2018 +0200 +++ b/client/src/map/Maplayer.vue Mon Oct 01 12:01:46 2018 +0200 @@ -10,6 +10,17 @@ .mapfull { height: 100vh; } + +@media print { + .mapfull { + width: 2000px; + heigth: 2828px; + } + .mapsplit { + width: 2000px; + heigth: 2828px; + } +} </style> <script> @@ -294,6 +305,34 @@ bottleneck_id + "'" }); + }, + onBeforePrint(/* evt */) { + // console.log("onBeforePrint(", evt ,")"); + // + // the following code shows how to get the current map canvas + // and change it, however this does not work well enough, as + // another mechanism seems to update the size again before the rendering + // for printing is done: + // console.log(this.openLayersMap.getViewport()); + // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; + // console.log(canvas); + // canvas.width=1000; + // canvas.height=1414; + // + // An experiment which also did not work: + // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4 + // + // according to documentation + // http://openlayers.org/en/latest/apidoc/module-ol_PluggableMap-PluggableMap.html#updateSize + // "Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport." + // but did not help + // this.openLayersMap.updateSize(); + }, + onAfterPrint(/* evt */) { + // could be used to undo changes that have been done for printing + // though https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ + // reported that this was not feasable (back then). + // console.log("onAfterPrint(", evt, ")"); } }, watch: { @@ -487,6 +526,9 @@ console.log(error); }); + window.addEventListener("beforeprint", this.onBeforePrint); + window.addEventListener("afterprint", this.onAfterPrint); + // so none is shown // this.updateBottleneckFilter("1999-10-01", "AT_Bottleneck_44"); // test date