Adding print button for the invoices.
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 28 Dec 2017 17:25:29 +0000 (12:25 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Thu, 28 Dec 2017 17:25:29 +0000 (12:25 -0500)
Adding the PrintArea.js for the printing of the invoices.

views/admin/billing/invoiceStore.html
views/admin/billing/viewInvoice.html

index d493a81..6a71da0 100644 (file)
@@ -1,46 +1,11 @@
 <style>
 #container-table {
-    /* border: solid lightgrey 1px; */
     font-size: 16px;
+    margin: 20px; 50px;
 }
 #container-table .line-items {
     border-collapse: collapse;
 }
-#container-table .line-items tr {
-    /* border: solid green 1px; */
-}
-#container-table .line-items tr td {
-    /* border: solid green 1px; */
-}
-@media print{
-    @page {
-        size: A4;
-        margin: 0.5cm;
-    }
-    .wrap > h2,.nav-tab-wrapper, #adminmenu, #adminmenuback, #adminmenuwrap,
-    .update-nag, .glm-copyright, #wpfooter, a.button.button-primary
-    {
-        display: none;
-    }
-    body {
-        background-color: none;
-    }
-    #glm-admin-content-container {
-        margin: 0;
-        border: 0 !important;
-        background-color: none;
-    }
-    #container-table {
-        width: 90%;
-        page-break-after: avoid;
-        page-break-inside: avoid;
-    }
-    #wpcontent, #wrap {
-        margin: 0;
-        page-break-after: avoid;
-        page-break-inside: avoid;
-    }
-}
 </style>
 <table id="container-table" width="600" cellspacing="0" cellpadding="0">
     <tr>
index 9f23d7a..e2f76ba 100644 (file)
@@ -7,11 +7,35 @@
     {include file='admin/billing/subHeader.html'}
 {/if}
 
+<div class="button button-secondary graph-print glm-right" data-areaToPrint="PrintArea">Print</div>
+<div id="PrintArea">
 {$invoiceHtml}
+</div>
 
 {if $fromMemberMenu}
         <a class="button button-primary" href="#">Make a Payment</a>
     </form>
 {else}
 {/if}
+<script src="{$jsUrl}/PrintArea/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>
+<script>
+jQuery(document).ready(function($) {
+    $(".graph-print").click(function(){
+        var areaToPrint = $(this).attr('data-areaToPrint');
+        var position = $(this).offset();
+        $('#' + areaToPrint).printArea({
+            mode:       'popup',   // printable window is either iframe or browser popup
+            popHt:      800,       // popup window height
+            popWd:      800,       // popup window width
+            popX:       500,       // popup window screen X position
+            popY:       500,       // popup window screen Y position
+            popTitle:   'Invoice', // popup window title element
+            popClose:   true,      // popup window close after printing
+            extraCss:   '',        // Comma separated list of extra css to include
+            extraHead:  '',        // Comma separated list of extra elements to be appended to head tag
+            strict:     false      // strict or looseTransitional html 4.01 document standard or undefined to not include at all only for popup option
+        });
+    });
+});
+</script>
 {include file='admin/footer.html'}