Changeset 1849


Ignore:
Timestamp:
Feb 18, 2013, 9:54:47 AM (7 years ago)
Author:
Nicklas Nordborg
Message:

References #462: Implement a print function that can print complete pages

Implemented a javascript function that opens a popup window and copies the content of a specified html tag (given by the id) to the popup window.

openPrintWindow(ID, printElementId, pageTitle, pageOrientation, printNote)

The change also includes printing changes made in separate branch for #425 in [1723].

Location:
extensions/net.sf.basedb.reggie/trunk/resources
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed
  • extensions/net.sf.basedb.reggie/trunk/resources/allprep_protocol2.jsp

    r1662 r1849  
    4242<head>
    4343  <title>Lab Tracking Protocol for Allprep isolation</title>
     44  <link rel="SHORTCUT ICON" href="<%=home%>/images/extraction.png">
    4445  <link rel="stylesheet" type="text/css" href="<%=home %>/css/printable.css">
    4546  <style>
     
    112113</head>
    113114<body>
     115  <div class="paper">
    114116  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
    115     <a href="javascript:window.print()"><img src="images/print.png" style="padding-right: 4px;">Print</a>
     117    <span class="button" onclick="window.print()">
     118      <img src="images/print.png">Print&hellip;
     119    </span>
    116120  </div>
    117121 
     
    173177  %>
    174178  </table>
    175  
     179  </div>
    176180</body>
    177181</html>
  • extensions/net.sf.basedb.reggie/trunk/resources/css/printable.css

    r1681 r1849  
    33@media print
    44{
     5  body
     6  {
     7    width: 100%;
     8    margin: 0;
     9    padding: 0;
     10  }
     11 
    512  /* Start a new page on all elements with 'pagebreak' class */
    613  .pagebreak
     
    1017 
    1118  /* Hide when printing */
    12   .noprint
     19  .noprint, .debug
    1320  {
    14     display:none;
     21    display: none;
    1522  }
    1623}
     
    1825@media screen
    1926{
     27  body
     28  {
     29    background-color: #E8E8E8;
     30  }
     31 
     32  /* Default is portrait */
     33  .paper
     34  {
     35    width: 210mm;
     36    padding: 1em;
     37    margin: 1em;
     38    background-color: #FFFFFF;
     39    border: 1px dashed #A0A0A0;
     40   
     41  }
     42 
     43  .paper.landscape
     44  {
     45    width: 300mm;
     46  }
     47 
    2048  .pagebreak
    2149  {
     
    2351    margin-left: -1em;
    2452    margin-right: -1em;
     53  }
     54 
     55  .debug
     56  {
     57    position: absolute;
     58    bottom: 0px;
     59    left: 0px;
     60    right: 0px;
     61    height: 5em;
     62    font-family: monospace;
     63    background: #DDDDFF;
     64    border-top: 1px solid #2288AA;
     65    z-index: 999;
     66    overflow: auto;
     67  }
     68 
     69  .debug > div
     70  {
     71    border-bottom: 1px dotted #2288AA;
    2572  }
    2673}
     
    3077  body
    3178  {
    32     margin-left: 1em;
    33     margin-right: 1em;
    3479    font-family: verdana, arial, sans-serif;
    3580    font-size: 75%;
     81    padding: 0;
     82    margin: 0;
    3683  }
    3784 
     
    3986  {
    4087    font-size: 1.4em;
     88    margin-top: 0;
    4189  }
    4290 
     
    83131  }
    84132 
     133  .reggie
     134  {
     135    font-size: smaller;
     136  }
     137 
     138  .reggie:before
     139  {
     140    content: "(";
     141  }
     142  .reggie:after
     143  {
     144    content: ")";
     145  }
    85146 
    86147}
  • extensions/net.sf.basedb.reggie/trunk/resources/histology_protocol2.jsp

    r1778 r1849  
    166166</head>
    167167<body>
     168  <div class="paper">
    168169  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
    169170    <span class="button" onclick="window.print()">
     
    259260  }
    260261  %>
    261  
     262  </div>
    262263</body>
    263264</html>
  • extensions/net.sf.basedb.reggie/trunk/resources/reggie.js

    r1838 r1849  
    359359}
    360360
    361 
    362 
     361/**
     362  Open a popup window and copy a part of the current window to the popup
     363  and make it suitable for printin.
     364
     365  @param ID The current session id
     366  @param printElementId The id of a html tag in the current page that should
     367    be copied to the print window
     368  @param pageTitle The title of the print window
     369  @param pageOrientation 'landscape' or 'portrait' (default)
     370  @param printNote Optional note intended to include instructions how to configure
     371    the browser for optimal printing (eg. set to landscape and scale to 75%)
     372*/
     373function openPrintWindow(ID, printElementId, pageTitle, pageOrientation, printNote)
     374{
     375  // Default width/height is for 'portrait' orientation
     376  var width = 900;
     377  var height = 900;
     378  if (pageOrientation == 'landscape')
     379  {
     380    width = 1300;
     381    height = 700;
     382  }
     383 
     384  // Create callback function for the copy
     385  window.finalizePrint = function()
     386    {
     387      // Set page title...
     388      if (pageTitle) printWin.document.title = pageTitle;
     389   
     390      // ...orientation...
     391      if (pageOrientation)
     392      {
     393        var paper = printWin.document.getElementById('paper');
     394        paper.className += ' ' + pageOrientation;
     395      }
     396     
     397      // ... and print note
     398      if (printNote)
     399      {
     400        var note = printWin.document.getElementById('printNote');
     401        note.innerHTML = printNote;
     402      }
     403           
     404      // Get the HTML from the <div> tag to be printed
     405      var printElement = document.getElementById(printElementId);
     406      var printHtml = printElement.innerHTML;
     407      // Replace all <canvas> elements with <img>
     408      // since that seems the only way to make things work in IE
     409      printHtml = printHtml.replace(/\<canvas.*?\<\/canvas\>/g, '<img class="canvas-copy">');
     410   
     411      // Copy the HTML to the print-area in the print-window
     412      var printArea = printWin.document.getElementById('printarea');
     413      printArea.innerHTML = printHtml;
     414   
     415      // Copy the <canvas> elements as images to the <img> elements
     416      // using toDataURL()
     417      var srcCanvas = printElement.getElementsByTagName('canvas');
     418      var printImg = printArea.getElementsByClassName('canvas-copy');
     419      for (var i = 0; i < srcCanvas.length; i++)
     420      {
     421        printImg[i].src = srcCanvas[i].toDataURL();
     422      }
     423    };
     424
     425 
     426  // Open the print-window
     427  var printWin = window.open('print_template.jsp?ID='+ID+'&callback=finalizePrint', 'PrintWindow', 'width='+width+',height='+height+',toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=yes');
     428
     429}
     430
  • extensions/net.sf.basedb.reggie/trunk/resources/scanbquartermonthreportgenerator.jsp

    r1843 r1849  
    254254      reportTable = messageTable;     
    255255    }
     256    Main.show('printButton');
    256257    Main.show('gorestart');   
    257258  }
     
    408409  }
    409410
     411  function goPrint()
     412  {
     413    var printNote = '<b>Note!</b> For better printing set page orientation to <i>portrait</i>.';
     414    printNote += ' Scale down to <i>90%</i> to fit 2 plots per page.';
     415    openPrintWindow('<%=ID%>', 'reportcell', 'Sample processing statistics', 'portrait', printNote);
     416  }
    410417  </script>
    411418 
     
    415422    <p:path><p:pathelement
    416423      title="Reggie" href="<%="index.jsp?ID="+ID%>"
    417       /><p:pathelement title="Sample processing report"
     424      /><p:pathelement title="Sample processing statistics"
    418425      /></p:path>
    419426    <div class="content">
     
    570577        <tr>
    571578          <td rowspan="3" class="stepno">3</td>
    572           <td class="steptitle">Generated report</td>
     579          <td class="steptitle">Generated report
     580            <span id="printButton" class="link" style="float:right; display: none;" onclick="goPrint()"><img src="images/print.png" style="padding-right: 0.5em;">Print version&hellip;</span>
     581          </td>
    573582        </tr>
    574583        <tr>
     
    578587        </tr>
    579588        </table>
    580         <div id="canvasDiv01" style="display: none;>
    581           <canvas id="plot01" width="700" height="550">
    582             <p>Your browser doesn't support canvas.</p>
    583           </canvas>
    584         </div>
    585         <div id="canvasDiv02" style="display: none;>
    586           <canvas id="plot02" width="700" height="550">
    587             <p>Your browser doesn't support canvas.</p>
    588           </canvas>
    589         </div>
    590         <div id="canvasDiv03" style="display: none;>
    591           <canvas id="plot03" width="700" height="450">
    592             <p>Your browser doesn't support canvas.</p>
    593           </canvas>
    594         </div>
    595589      </div> 
    596590     
Note: See TracChangeset for help on using the changeset viewer.