js/plugins/exportTimeline.js
/**
* Plugin to add exporting functionality to the timeline
* namely PNG, PDF and SVG
* @type {clinicalTimelinePlugin}
*/
function clinicalTimelineExporter(name, spec){
clinicalTimelinePlugin.call(this, name, spec);
this.id = "exportTimeline";
}
/**
* runs the clinicalTimelineExporter plugin
* @param {function} timeline clinicalTimeline object
* @param {Object} [spec=null] specification specific to the plugin
*/
clinicalTimelineExporter.prototype.run = function(timeline, spec) {
$(spec.exportDivId).css("visibility", "visible");
return {
/**
* Exports the clinical-timeline as SVG
*/
generateSVG : function () {
$("#addtrack").css("visibility","hidden");
var element = document.getElementsByTagName('path')[0];
element.setAttribute("stroke" , "black");
element.setAttribute("fill" , "none");
element = document.getElementsByTagName('line');
for( var i=0 ; i<element.length ; i++)
{
element[i].setAttribute("stroke" , "black");
element[i].setAttribute("fill" , "none");
}
var svg = document.querySelector(spec.timelineDiv+" svg");
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
var link = document.createElement("a");
//name spaces
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//converting SVG source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
link.download = "clinical-timeline.svg";
link.href = url;
link.click();
$("#addtrack").css("visibility","visible");
},
/**
* Exports the clinical-timeline as PNG
* @param {boolean} download enable or disable download
*/
generatePNG : function(download) {
$("#addtrack").css("visibility","hidden");
var element = document.getElementsByTagName('path')[0];
element.setAttribute("stroke" , "black");
element.setAttribute("fill" , "none");
element = document.getElementsByTagName('line');
for( var i=0 ; i<element.length ; i++)
{
element[i].setAttribute("stroke" , "black");
element[i].setAttribute("fill" , "none");
}
var svgString = new XMLSerializer().serializeToString(document.querySelector(spec.timelineDiv+" svg"));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector("#png-container").innerHTML = '<img src="'+png+'"/>';
var link = document.createElement("a");
link.download = "clinical-timeline.png";
if (download) {
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
}
link.click();
DOMURL.revokeObjectURL(png);
link.remove();
};
img.src = url;
$("#addtrack").css("visibility","visible");
},
/**
* Exports the clinical-timeline to PDF
* by converting the PNG generated by clinicalTimelineExporter.generatePNG to PDF
*/
generatePDF : function() {
//to generate a PDF we first need to generate the canvas as done in generatePNG
//just don't need to download the PNG
this.generatePNG(false);
setTimeout(function(){
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var canvas = document.getElementById("canvas");
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('clinical-timeline.pdf');
}
});
}, 50); //wait for 50ms for the canvas to be rendered before saving the PDF
}
}
}
/**
* cleans up the HTML of the export-button
* @param {function} timeline clinicalTimeline object
* @param {Object} [spec=null] specification specific to the plugin
*/
clinicalTimelineExporter.prototype.remove = function(timeline, spec) {
$(spec.exportDivId).css("visibility", "hidden");
}
Object.setPrototypeOf(clinicalTimelineExporter.prototype, clinicalTimelinePlugin.prototype);
/* start-test-code-not-included-in-build */
module.exports = clinicalTimelineExporter;
/* end-test-code-not-included-in-build */