PDF preview improvements (#3632)

- Added total page and current page preview
- Added new "Page" translation
- Replaced CDN based assets with local
- Production builds of assets

Co-authored-by: David Bomba <turbo124@gmail.com>

public/mix-manifest.json

@@ -1,12 +1,12 @@
 {
     "/js/app.js": "/js/app.js?id=8b49701583f407403ddf",
-    "/css/app.css": "/css/app.css?id=54b56cad767e049a84d7",
+    "/css/app.css": "/css/app.css?id=adcfc72ac9afb077fdb4",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=caec43815d9a13168a38",
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=af49e24958be5fc00c92",
     "/js/clients/payment_methods/authorize-stripe-card.js": "/js/clients/payment_methods/authorize-stripe-card.js?id=f4c45f0da9868d840799",
     "/js/clients/payments/process.js": "/js/clients/payments/process.js?id=bb91cb611d1bdab40973",
     "/js/clients/quotes/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=f7c6bfdbf9cfc3efdf0b",
     "/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=fcb23f15eebc3bff639d",
-    "/js/clients/shared/pdf.js": "/js/clients/shared/pdf.js?id=5e05bbd189e1f70e0c27",
+    "/js/clients/shared/pdf.js": "/js/clients/shared/pdf.js?id=fc675e996ad606c6eca6",
     "/js/setup/setup.js": "/js/setup/setup.js?id=d30808ba9e2c9f908ce5"
 }

resources/js/clients/shared/pdf.js

@@ -53,6 +53,27 @@ class PDF {
         return this;
     }
 
+    setPagesInViewport() {
+        let currentPageContainer = document.getElementById(
+            "current-page-container"
+        );
+
+        let totalPageContainer = document.getElementById(
+            "total-page-container"
+        );
+
+        let paginationButtonContainer = document.getElementById(
+            "pagination-button-container"
+        );
+
+        currentPageContainer.innerText = this.currentPage;
+        totalPageContainer.innerText = this.maxPages;
+
+        if (this.maxPages > 1) {
+            paginationButtonContainer.style.display = "flex";
+        }
+    }
+
     async handle() {
         let pdf = await pdfjsLib.getDocument(this.url).promise;
 
@@ -69,6 +90,8 @@ class PDF {
             canvasContext: this.context,
             viewport
         });
+
+        this.setPagesInViewport();
     }
 }
 

resources/lang/en/texts.php

@@ -3197,5 +3197,8 @@ return [
     'open_in_new_tab' => 'Open in new tab',
     'complete_your_payment' => 'Complete payment',
     'authorize_for_future_use' => 'Authorize payment method for future use',
+
+    'page' => 'Page',
+    'of' => 'Of',
     'view_credit' => 'View Credit',
 ];

resources/views/portal/ninja2020/invoices/show.blade.php

@@ -62,16 +62,23 @@
 
     <div class="flex items-center justify-between">
         <section class="flex items-center">
-            <button class="input-label" id="previous-page-button">
+            <div class="items-center" style="display: none" id="pagination-button-container">
-            <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="previous-page-button" title="Previous page">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            </svg>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-            </button>
+                    </svg>
-            <button class="input-label" id="next-page-button">
+                </button>
-                <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="next-page-button" title="Next page">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                </svg>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-            </button>
+                    </svg>
+                </button>
+            </div>
+            <span class="text-sm text-gray-700 ml-2">{{ ctrans('texts.page') }}: 
+                <span id="current-page-container"></span>
+                <span>{{ strtolower(ctrans('texts.of')) }}</span>
+                <span id="total-page-container"></span>
+            </span>
         </section>
         <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
             <div>
@@ -94,7 +101,6 @@
     <div class="flex justify-center">
         <canvas id="pdf-placeholder" class="shadow rounded-lg bg-white mt-4 p-4"></canvas>
     </div>
-
 @endsection
 
 @section('footer')

resources/views/portal/ninja2020/layout/app.blade.php

@@ -44,8 +44,7 @@
 
         <!-- Scripts -->
         <script src="{{ mix('js/app.js') }}" defer></script>
-        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
+        <script src="{{ asset('js/vendor/alpinejs/alpine.js') }}" defer></script>
-        <script src="https://kit.fontawesome.com/8a87eb8352.js" crossorigin="anonymous"></script>
 
         <!-- Fonts -->
         <link rel="dns-prefetch" href="https://fonts.gstatic.com">

resources/views/portal/ninja2020/layout/clean.blade.php

@@ -44,7 +44,6 @@
 
         <!-- Scripts -->
         <script src="{{ mix('js/app.js') }}" defer></script>
-        <script src="https://kit.fontawesome.com/8a87eb8352.js" crossorigin="anonymous"></script>
 
         <!-- Fonts -->
         <link rel="dns-prefetch" href="https://fonts.gstatic.com">

resources/views/portal/ninja2020/quotes/show.blade.php

@@ -53,16 +53,23 @@
 
     <div class="flex items-center justify-between">
         <section class="flex items-center">
-            <button class="input-label" id="previous-page-button">
+            <div class="items-center" style="display: none" id="pagination-button-container">
-            <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="previous-page-button" title="Previous page">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            </svg>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-            </button>
+                    </svg>
-            <button class="input-label" id="next-page-button">
+                </button>
-                <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button class="input-label focus:outline-none hover:text-blue-600 transition ease-in-out duration-300" id="next-page-button" title="Next page">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                </svg>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-            </button>
+                    </svg>
+                </button>
+            </div>
+            <span class="text-sm text-gray-700 ml-2">{{ ctrans('texts.page') }}: 
+                <span id="current-page-container"></span>
+                <span>{{ strtolower(ctrans('texts.of')) }}</span>
+                <span id="total-page-container"></span>
+            </span>
         </section>
         <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
             <div>
@@ -85,7 +92,6 @@
     <div class="flex justify-center">
         <canvas id="pdf-placeholder" class="shadow rounded-lg bg-white mt-4 p-4"></canvas>
     </div>
-
 @endsection
 
 @section('footer')