Inline PDF viewer support

public/css/style.css

@@ -864,6 +864,13 @@ body .node input[type="number"] {
 .stag-popup.stag-popup-sm>form {
     max-width: 500px;
 }
+.stag-popup.stag-popup-md>form {
+    max-width: 632pt;
+}
+.stag-popup.stag-popup-right>form {
+    margin-right: 1.5rem;
+    margin-left: auto;
+}
 .no-scroll {
     /*overflow: hidden;*/
 }
@@ -973,3 +980,17 @@ span.select2-container.select2-container--default.select2-container--open {
     background: #fff !important;
 }
 
+#stagPdfViewer>form {
+    padding: 0;
+    background: #eee;
+}
+#stagPdfViewer>form .stag-popup-title {
+    background: #fff;
+    padding: 1rem;
+}
+canvas.pdf-viewer-page {
+    max-width: 100%;
+    margin: 1rem auto;
+    display: block;
+    box-shadow: 0 0 2px #aaa;
+}

resources/views/app/patient/documents.blade.php

@@ -165,6 +165,11 @@
                     <td class="px-2">{{ $document->category }}</td>
                     <td class="px-2">{{ $document->status }}</td>
                     <td class="px-2">
+                        <a class="on-hover-opaque mr-2 pdf-viewer-trigger" native target="_blank"
+                           href="/api/clientDocument/download/{{ $document->uid }}"
+                           title="View">
+                            <i class="font-size-11 fa fa-eye"></i>
+                        </a>
                         <a class="on-hover-opaque mr-2" native target="_blank"
                            href="/api/clientDocument/download/{{ $document->uid }}"
                            title="Download">

resources/views/app/patient/handouts.blade.php

@@ -11,7 +11,7 @@
                     <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                     <div class="mb-2">
                         <select name="handoutUid" class="form-control form-control-sm">
-                            <option value=""> --select-- </option>
+                            <option value=""> --select--</option>
                             @foreach($handouts as $handout)
                                 <option value="{{$handout->uid}}">
                                     {{$handout->display_name}}
@@ -41,7 +41,11 @@
                 <tr>
                     <td class="px-2">{{$handout->internal_name}}</td>
                     <td class="px-2">{{$handout->display_name}}</td>
-                    <td class="px-2"><a native href="{{ $downloadLink }}" target="_blank">View</a></td>
+                    <td class="px-2">
+                        <a native href="{{ $downloadLink }}" target="_blank" class="pdf-viewer-trigger">
+                            <i class="fa fa-eye mr-2"></i>View
+                        </a>
+                    </td>
                     <td class="px-2"><b>{{ $downloadLink }}</b></td>
                 </tr>
             @endforeach

resources/views/app/pdf/viewer.blade.php

@@ -0,0 +1,99 @@
+<script>
+    (function () {
+
+        function init() {
+
+            $('[stag-popup-key="pdf-viewer"]').remove();
+            $('body').append(
+                '<div class="stag-popup stag-popup-md stag-popup-right mcp-theme-1" ' +
+                'stag-popup-key="pdf-viewer" ' +
+                'id="stagPdfViewer">' +
+                '<form>' +
+                '<h3 class="stag-popup-title">' +
+                '<span>PDF Viewer</span>' +
+                '<a href="#" class="ml-auto text-secondary" onclick="return closeStagPopup()">' +
+                '<i class="fa fa-times-circle"></i>' +
+                '</a>' +
+                '</h3>' +
+                '</form>' +
+                '</div>'
+            );
+
+            new Vue({
+                el: '#stagPdfViewer',
+                data: {
+                    loadedPDF: null,
+                    page: 1,
+                },
+                methods: {
+                    load: function (_url) {
+
+                        this.loadedPDF = null;
+                        this.numPages = 1;
+                        this.page = 1;
+
+                        $('#stagPdfViewer>form>canvas').remove();
+
+                        let self = this;
+                        let url = _url;
+                        let pdfjsLib = window['pdfjs-dist/build/pdf'];
+                        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+                        let loadingTask = pdfjsLib.getDocument(url);
+                        // loadingTask.onProgress = function (progress) {
+                        //     self.loadingPercentage = Math.round((progress.loaded / progress.total) * 100);
+                        // };
+                        loadingTask.promise.then(function (pdf) {
+                            self.numPages = pdf.numPages;
+                            self.loadedPDF = pdf;
+                            self.page = 1;
+                            self.render();
+                        }, function (reason) {
+                            // self.pdfNotFound = reason.message;
+                        });
+                    },
+                    render: function () {
+                        let self = this;
+
+                        self.loadedPDF.getPage(self.page).then(function (page) {
+
+                            // create canvas
+                            let canvasElement = $('<canvas/>')
+                                .addClass('pdf-viewer-page')
+                                .appendTo('#stagPdfViewer>form');
+
+                            let canvas = canvasElement[0];
+                            let viewport = page.getViewport({scale: 1.25});
+                            let context = canvas.getContext('2d');
+                            canvas.height = viewport.height;
+                            canvas.width = viewport.width;
+                            const $canvas = $(canvas);
+                            let renderContext = {
+                                canvasContext: context,
+                                viewport: viewport
+                            };
+                            let renderTask = page.render(renderContext);
+                            renderTask.promise.then(function () {
+                                if(self.page < self.numPages) {
+                                    self.page++;
+                                    self.render();
+                                }
+                            });
+                        });
+                    },
+                },
+                mounted: function () {
+                    let self = this;
+                    $(document)
+                        .off('click.pdf-viewer', '.pdf-viewer-trigger')
+                        .on('click.pdf-viewer', '.pdf-viewer-trigger', function () {
+                            self.load(this.href);
+                            showStagPopup('pdf-viewer');
+                            return false;
+                        });
+                }
+            })
+        }
+
+        addMCInitializer('inline-pdf-viewer', init);
+    })();
+</script>

resources/views/layouts/template.blade.php

@@ -43,6 +43,9 @@
     <link href='/bootstrap-datepicker/css/bootstrap-datepicker.min.css' rel="stylesheet">
     <script src='/bootstrap-datepicker/js/bootstrap-datepicker.min.js'></script>
 
+    {{-- pdfjs --}}
+    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
+
     @yield('head')
 </head>
 
@@ -370,7 +373,7 @@
             addMCInitializer('patient-single', window.initAutoRxAndICDComplete);
         })();
     </script>
-
+    @include('app/pdf/viewer')
 </body>
 
 </html>