Skip to content

Commit

Permalink
Improve scale of graph and creating pdf of graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@torinfo
torinfo committed Sep 14, 2022
1 parent 3110854 commit cee4363
Showing 1 changed file with 74 additions and 36 deletions.
110 changes: 74 additions & 36 deletions modules/xerte/parent_templates/Nottingham/models_html5/opinion.html
View file
Expand Up @@ -72,29 +72,32 @@
}

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;
}
else if (textSize < 12) {
textSize = 12;
}

$pageContents.data('textSize', textSize);
debugger;
$("#canvas-container")
.css('width', width)
.css('height', height);

};

this.loadAudio = function(currentQuestion, soundFile)
Expand Down Expand Up @@ -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"));
Expand Down Expand Up @@ -933,6 +941,13 @@
}
});

let startHeight;
let startWidth;
let panelStartWidth;
let startPadding;
let canvasStartHeight;
let canvasStartWidth;
let canvasStartPadding;
$("#printBtn")
.button({
label: 'Print'
Expand All @@ -942,38 +957,61 @@
$("#mainPanel").prepend(
`<div id="print-title" style="font-size: 30px"><h1>${x_currentPageXML.getAttribute("name")}</h1></div>`
);
$("#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();
Expand Down

0 comments on commit cee4363

Please sign in to comment.