From 4964e93cd36c6ba42c755990c76e4b83c0b44878 Mon Sep 17 00:00:00 2001
From: Tom Reijnders <reijnders@tor.nl>
Date: Wed, 31 Aug 2022 21:37:03 +0200
Subject: [PATCH] Opinion improve size and scale of graph and printing to PDF

---
 .../Nottingham/models_html5/opinion.css       | 18 +++++++
 .../Nottingham/models_html5/opinion.html      | 52 ++++++++++++++-----
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css
index 312c3d2913..8008b948d2 100644
--- a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css
+++ b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css
@@ -135,3 +135,21 @@
 .qImg, .opinionImg {
 	max-width: 90%;
 }
+
+#print-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1;
+}
+
+#print-overlay-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html
index e4dfaa6007..4f2d447c68 100644
--- a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html
+++ b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html
@@ -72,7 +72,7 @@
 			}
 			
 			var width = $("#mainPanel").width(),
-				height = $("#mainPanel").height(),
+				height = $("#mainPanel").height() - $("#qNo").height() - $("#feedback").height() - $("#buttonHolder").height(),
 				textSize;
 			
 			if(width > height) {
@@ -937,19 +937,43 @@
 				.button({
 					label: 'Print'
 				})
-				.click(function() {
-            $("#mainPanel").prepend(
-                `<div class="print-title" style="font-size: 30px"><h1>${x_currentPageXML.getAttribute("name")}</h1></div>`
-            );
-            $("#mainPanel #buttonHolder").hide();
-            let opt = {
-                filename: `xerte-opinion${x_currentPageXML.getAttribute("name")}.pdf`,
-                jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
-              };
-            html2pdf().set(opt).from($("#mainPanel")[0]).toPdf().get('pdf').then(function (pdf) {
-              $("#print-title").remove();
-              $("#buttonHolder").show();
-            }).save();
+				.click(async function() {
+					$("#pageContents").prepend("<div id='print-overlay'><img id='print-overlay-spinner' src='" + x_templateLocation + "common_html5/loading16.gif'></div>");
+					$("#mainPanel").prepend(
+							`<div id="print-title" style="font-size: 30px"><h1>${x_currentPageXML.getAttribute("name")}</h1></div>`
+					);
+					startHeight = $("#mainPanel")[0].style.height;
+					startWidth = $("#mainPanel")[0].style.width;
+					startPadding = $("#mainPanel")[0].style.padding;
+					canvasStartHeight = $("#canvas-container")[0].style.height;
+					canvasStartWidth = $("#canvas-container")[0].style.width;
+					$("#mainPanel #buttonHolder").hide();
+					$("#mainPanel").css("width", "794px");
+					$("#mainPanel").css("height", "500px");
+					$("#mainPanel").css("padding", "79.4px");
+					$("#canvas-container").css("width", "794px");
+					$("#canvas-container").css("height", "450px");
+					$("p").css("font-size", "16px");
+					$("h3").css("font-size", "18px");
+
+					await new Promise(resolve => setTimeout(resolve, 1000));
+					let opt = {
+						filename: `xerte-opinion${x_currentPageXML.getAttribute("name")}.pdf`,
+						html2canvas: { scale: 2 },
+						jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
+					};
+					html2pdf().set(opt).from($("#mainPanel")[0]).toPdf().get('pdf').then(function (pdf) {
+						$("#mainPanel").css("width", "");
+						$("#mainPanel").css("height", "");
+						$("#mainPanel").css("padding", "");
+						$("#canvas-container").css("width", canvasStartWidth);
+						$("#canvas-container").css("height", canvasStartHeight);
+						$("#print-title").remove();
+						$("#print-overlay").remove();
+						$("#buttonHolder").show();
+						$("p").css("font-size", "");
+						$("h3").css("font-size", "");
+					}).save();
 				});
 	        $("#printBtn").hide();
 			this.startQuestions();