# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1538388106 -7200
# Node ID 52fe3e20f750f32c0d31813faeff77347940990c
# Parent  42df1cabf410d3d993d1b7c224865712510289e0
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.

diff -r 42df1cabf410 -r 52fe3e20f750 client/src/application/Main.vue
--- 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;
diff -r 42df1cabf410 -r 52fe3e20f750 client/src/map/Maplayer.vue
--- 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