cBioPortal/clinical-timeline

/**
 * 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 */