Opinion improve size and scale of graph and printing to PDF

thexerteproject · Aug 31, 2022 · 37dcd6e · 37dcd6e
1 parent 5a4b331
commit 37dcd6e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 34 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.css
@@ -138,3 +138,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
@@ -72,7 +72,7 @@
 			}
 
 			var width = $("#mainPanel").width(),
-				height = $("#mainPanel").height(),
+				height = $("#mainPanel").height() - $("#qNo").height() - $("#feedback").height() - $("#buttonHolder").height(),
 				textSize;
 
 			if(width > height) {
@@ -949,39 +949,42 @@
 					label: 'Print'
 				})
 				.click(async function() {
-            $("#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`,
-                jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
-              };
-            html2pdf().set(opt).from($("#mainPanel")[0]).toPdf().get('pdf').then(function (pdf) {
-              $("#mainPanel").css("width", startWidth);
-              $("#mainPanel").css("height", startHeight);
-              $("#mainPanel").css("padding", startPadding);
-              $("#canvas-container").css("width", canvasStartWidth);
-              $("#canvas-container").css("height", canvasStartHeight);
-              $("#print-title").remove();
-              $("#buttonHolder").show();
-              $("p").css("font-size", "");
-              $("h3").css("font-size", "");
-            }).save();
+					$("#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();