From 79e01812158e9c60b26d872bedcc8add7430b330 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 28 Dec 2017 12:25:29 -0500
Subject: [PATCH] Adding print button for the invoices.

Adding the PrintArea.js for the printing of the invoices.
---
 views/admin/billing/invoiceStore.html | 37 +--------------------------
 views/admin/billing/viewInvoice.html  | 24 +++++++++++++++++
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/views/admin/billing/invoiceStore.html b/views/admin/billing/invoiceStore.html
index d493a81..6a71da0 100644
--- a/views/admin/billing/invoiceStore.html
+++ b/views/admin/billing/invoiceStore.html
@@ -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>
diff --git a/views/admin/billing/viewInvoice.html b/views/admin/billing/viewInvoice.html
index 9f23d7a..e2f76ba 100644
--- a/views/admin/billing/viewInvoice.html
+++ b/views/admin/billing/viewInvoice.html
@@ -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'}
-- 
2.17.1