public/javascripts/jqplot/examples/kcp.print.js

   1 // <--- --------------------------------------------------------------------------------------- ----\r
   2         \r
   3 //      Blog Entry:\r
   4 //      Ask Ben: Print Part Of A Web Page With jQuery\r
   5         \r
   6 //      Author:\r
   7 //      Ben Nadel / Kinky Solutions\r
   8         \r
   9 //      Link:\r
  10 //      http://www.bennadel.com/index.cfm?event=blog.view&id=1591\r
  11         \r
  12 //      Date Posted:\r
  13 //      May 21, 2009 at 9:10 PM\r
  14         \r
  15 // ---- --------------------------------------------------------------------------------------- --->\r
  16 \r
  17 \r
  18 // Create a jquery plugin that prints the given element.\r
  19 jQuery.fn.print = function(){\r
  20         // NOTE: We are trimming the jQuery collection down to the\r
  21         // first element in the collection.\r
  22         if (this.size() > 1){\r
  23                 this.eq( 0 ).print();\r
  24                 return;\r
  25         } else if (!this.size()){\r
  26                 return;\r
  27         }\r
  28 \r
  29     var chart = $(this).closest('div.quintile-outer-container').find('div.jqplot-target');\r
  30     // var imgelem = chart.jqplotToImageElem();\r
  31     var imageElemStr = chart.jqplotToImageElemStr();\r
  32     // var statsrows = $(this).closest('div.quintile-outer-container').find('table.stats-table tr');\r
  33     var statsTable = $('<div></div>').append($(this).closest('div.quintile-outer-container').find('table.stats-table').clone());\r
  34     // var rowstyles = window.getComputedStyle(statsrows.get(0), '');\r
  35  \r
  36         // ASSERT: At this point, we know that the current jQuery\r
  37         // collection (as defined by THIS), contains only one\r
  38         // printable element.\r
  39  \r
  40         // Create a random name for the print frame.\r
  41         var strFrameName = ("printer-" + (new Date()).getTime());\r
  42  \r
  43         // Create an iFrame with the new name.\r
  44         var jFrame = $( "<iframe name='" + strFrameName + "'>" );\r
  45  \r
  46         // Hide the frame (sort of) and attach to the body.\r
  47         jFrame\r
  48                 .css( "width", "1px" )\r
  49                 .css( "height", "1px" )\r
  50                 .css( "position", "absolute" )\r
  51                 .css( "left", "-9999px" )\r
  52                 .appendTo( $( "body:first" ) )\r
  53         ;\r
  54  \r
  55         // Get a FRAMES reference to the new frame.\r
  56         var objFrame = window.frames[ strFrameName ];\r
  57  \r
  58         // Get a reference to the DOM in the new frame.\r
  59         var objDoc = objFrame.document;\r
  60  \r
  61         // Grab all the style tags and copy to the new\r
  62         // document so that we capture look and feel of\r
  63         // the current document.\r
  64  \r
  65         // Create a temp document DIV to hold the style tags.\r
  66         // This is the only way I could find to get the style\r
  67         // tags into IE.\r
  68         var jStyleDiv = $( "<div>" ).append(\r
  69                 $( "style" ).clone()\r
  70                 );\r
  71  \r
  72         // Write the HTML for the document. In this, we will\r
  73         // write out the HTML of the current element.\r
  74         objDoc.open();\r
  75         objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );\r
  76         objDoc.write( "<html>" );\r
  77         objDoc.write( "<body>" );\r
  78         objDoc.write( "<head>" );\r
  79         objDoc.write( "<title>" );\r
  80         objDoc.write( document.title );\r
  81         objDoc.write( "</title>" );\r
  82         objDoc.write( jStyleDiv.html() );\r
  83         objDoc.write( "</head>" );\r
  84 \r
  85         // Typically, would just write out the html.    \r
  86         // objDoc.write( this.html() );\r
  87 \r
  88         // We need to do specific manipulation for kcp quintiles.\r
  89         objDoc.write( '<div class="quintile-outer-container ui-widget ui-corner-all"> \\r
  90     <div class="quintile-content ui-widget-content ui-corner-bottom"> \\r
  91                 <table class="quintile-display"> \\r
  92             <tr> \\r
  93                 <td class="chart-cell">');\r
  94 \r
  95     objDoc.write(imageElemStr);\r
  96     \r
  97     objDoc.write('</td> <td class="stats-cell">');\r
  98 \r
  99     objDoc.write(statsTable.html());\r
 100 \r
 101     objDoc.write('</td></tr></table></div></div>');\r
 102 \r
 103         objDoc.write( "</body>" );\r
 104         objDoc.write( "</html>" );\r
 105         objDoc.close();\r
 106  \r
 107         // \r
 108         // When the iframe is completely loaded, print it.\r
 109         // This seemed worked in IE 9, but caused problems in FF.\r
 110         //\r
 111         // $(objFrame).load(function() {\r
 112         //      objFrame.focus();\r
 113         //      objFrame.print();\r
 114         // });\r
 115 \r
 116         //\r
 117         // This works in all supported browsers.\r
 118         // Note, might have to adjust time.\r
 119         //\r
 120         setTimeout(\r
 121                 function() {\r
 122                         objFrame.focus();\r
 123                         objFrame.print();\r
 124                 }, 750);\r
 125  \r
 126 \r
 127         // Have the frame remove itself in about a minute so that\r
 128         // we don't build up too many of these frames.\r
 129         setTimeout(\r
 130                 function(){\r
 131                         jFrame.empty();\r
 132                         jFrame.remove();\r
 133                 },\r
 134                 (60 * 1000)\r
 135                 );\r
 136 }