From cee43636bc04b366313fc32fb107f650c07dd5df Mon Sep 17 00:00:00 2001 From: Tom Reijnders Date: Wed, 14 Sep 2022 20:17:16 +0200 Subject: [PATCH] Improve scale of graph and creating pdf of graph --- .../Nottingham/models_html5/opinion.html | 110 ++++++++++++------ 1 file changed, 74 insertions(+), 36 deletions(-) diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html index ec0d7d78e..0f46b70e7 100644 --- a/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html +++ b/modules/xerte/parent_templates/Nottingham/models_html5/opinion.html @@ -72,20 +72,19 @@ } var width = $("#mainPanel").width(), - height = $("#mainPanel").height() - $("#qNo").height() - $("#feedback").height() - $("#buttonHolder").height(), - textSize; - + height = $("#pageContents").innerHeight() - $("#qNo").outerHeight(true) - $("#feedback").outerHeight(true) - $("#buttonHolder").outerHeight(true), + textSize; + let paddingHeightMainPanel = $("#mainPanel").outerHeight(true) - $("#mainPanel").innerHeight() + parseFloat($("#mainPanel").css('padding-top')) + parseFloat($("#mainPanel").css('padding-bottom')); + let paddingWidthMainPanel = $("#mainPanel").outerWidth(true) - $("#mainPanel").innerWidth() + parseFloat($("#mainPanel").css('padding-left')) + parseFloat($("#mainPanel").css('padding-right')); + width -= paddingWidthMainPanel; + height -= paddingHeightMainPanel; + height *= 0.98; // Build in some extra space if(width > height) { - $("#diagram") - .width(height*0.90) - .height(height*0.90); textSize = (width - height) / 10; } else { - $("#diagram") - .width(width*0.90) - .height(width*0.90); textSize = (height - width) / 10; + height = width; } if (textSize > 20) { textSize = 20; @@ -93,8 +92,12 @@ else if (textSize < 12) { textSize = 12; } - $pageContents.data('textSize', textSize); + debugger; + $("#canvas-container") + .css('width', width) + .css('height', height); + }; this.loadAudio = function(currentQuestion, soundFile) @@ -573,9 +576,14 @@ this.trackOpinion = function() { // Last question answered - show results var JSONGraph = this.createGraphObject(); - if (x_currentPageXML.getAttribute("diagram") !== "true"){ - this.createDiagram(JSONGraph); + if (x_currentPageXML.getAttribute("diagram") !== "true") { + if (x_currentPageXML.getAttribute("diagram") !== "true") { + $("#canvas-container").show(); + } else { + $('#canvas-container').hide(); + } this.sizeChanged(); + this.createDiagram(JSONGraph); } $("#qNo").html($pageContents.data("onCompletionText")); @@ -933,6 +941,13 @@ } }); + let startHeight; + let startWidth; + let panelStartWidth; + let startPadding; + let canvasStartHeight; + let canvasStartWidth; + let canvasStartPadding; $("#printBtn") .button({ label: 'Print' @@ -942,38 +957,61 @@ $("#mainPanel").prepend( `` ); + $("#mainPanel .panel").addClass("panel-print"); + $("#mainPanel .panel").removeClass("panel"); startHeight = $("#mainPanel")[0].style.height; - startWidth = $("#mainPanel")[0].style.width; + startWidth = $("#pageContents")[0].style.width; + panelStartWidth = $("#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"); + $("#pageContents").css("width", "794px"); + //$("#mainPanel").css("width", "764px"); + $("#mainPanel").css("max-height", "794px"); + $("#canvas-container canvas").css("min-width", "540px"); + $("#canvas-container canvas").css("min-height", "270px"); + $("#canvas-container canvas").css("max-width", "764px"); + $("#canvas-container canvas").css("max-height", "764px"); + //$("#mainPanel").css("padding", "79.4px"); + /* $("#canvas-container").css("width", "794px"); - $("#canvas-container").css("height", "450px"); + $("#canvas-container").css("height", "750px"); + */ + opinion.sizeChanged(); $("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(); + setTimeout(function(){ + 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 .panel-print").addClass("panel"); + $("#mainPanel .panel").removeClass("panel-print"); + $("#pageContents").css("width", startWidth); + //$("#mainPanel").css("width", panelStartWidth); + $("#mainPanel").css("height", startHeight); + $("#mainPanel").css("padding", startPadding); + $("#canvas-container canvas").css("min-width", ""); + $("#canvas-container canvas").css("min-height", ""); + $("#canvas-container canvas").css("max-width", ""); + $("#canvas-container canvas").css("max-height", ""); + $("#mainPanel").css("max-height", ""); + + /* + $("#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", ""); + opinion.sizeChanged(); + }).save(); + }, 4000) }); $("#printBtn").hide(); this.startQuestions();