Add viewer js when viewing marhun photo

public/css/fix-page-zoom-when-modal-load.css

@@ -0,0 +1,7 @@
+body {
+    padding-right: 0px !important
+}
+
+.modal-open {
+    overflow-y: auto;
+}

public/js/marhun-photo-viewer.js

@@ -0,0 +1,48 @@
+function marhunPhotoViewerFactory(button_selector) {
+
+    return {
+        attachPhotoViewer: function () {
+            document.querySelector(button_selector).addEventListener('click', (event) => {
+            // document.querySelector('a.btn-view-marhun-photo').addEventListener('click', (event) => {
+                event.preventDefault();
+
+                const image = new Image();
+                image.src = event.target.href
+
+                const viewer = new Viewer(image, {
+                    hidden: function () {
+                        viewer.destroy();
+                    },
+                    navbar: false,
+                    title: false,
+                    toolbar: {
+                        zoomIn: {
+                            show: true,
+                            size: 'large',
+                        },
+                        oneToOne: {
+                            show: true,
+                            size: 'large',
+                        },
+                        zoomOut: {
+                            show: true,
+                            size: 'large',
+                        },
+                    },
+                    viewed() {
+                        // Zoom to 50% from the center of the window.
+                        viewer.zoomTo(1.25, {
+                            x: window.innerWidth / 2,
+                            y: viewer.innerHeight / 2,
+                        });
+                    },
+                });
+
+
+                viewer.show();
+
+            })
+
+        }
+    }
+}

resources/js/app.js

@@ -1,6 +1,7 @@
 try {
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');
+    window.Viewer = require('viewerjs');
 
     require('bootstrap');
     require('datatables.net-bs4');

resources/views/layouts/app.blade.php

@@ -64,6 +64,7 @@
     </script>
 
     @stack('additional_scripts')
+    @stack('additional_styles')
 </head>
 
 <body onload="startTime()">

resources/views/marhun/marhun.blade.php

@@ -4,6 +4,7 @@
     <script src="{{ asset('js/marhun-photo-capture.js') }}"></script>
     <script src="{{ asset('js/marhun-photo-capture-reload-https.js') }}"></script>
     <script src="{{ asset('js/marhun-photo-capture-debugger.js') }}"></script>
+    <script src="{{ asset('js/marhun-photo-viewer.js') }}"></script>
     <script>
         var marhun_camera_config = @json(config('marhun_camera.marhun_cameras'));
         let modalOverallPhotoCapture = new marhunPhotoCapturerFactory('#modaloverallphoto-capture');
@@ -12,11 +13,15 @@
         let modalOverallPhotoCapturePerMarhunUpdate = new marhunPhotoCapturerFactory('#modalpermarhunphoto-capture-update');
         let marhunPhotoCapturerReloadHttps = new marhunPhotoCapturerReloadHttpsFactory();
         let marhunPhotoCapturerDebuggerObj = new marhunPhotoCapturerDebugger();
+        let marhunPhotoViewerOverall = new marhunPhotoViewerFactory('a.btn-view-overall-marhun-photo');
+        let marhunPhotoViewerPerMarhun = new marhunPhotoViewerFactory('a.viewPhotoEachMarhunLink');
     </script>
 @endpush
 
 @push('additional_styles')
     <link rel="stylesheet" href="{{ asset('css/marhun-registrations-webcam.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/viewer.min.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/fix-page-zoom-when-modal-load.css') }}">
 @endpush
 
 @section('content')
@@ -446,7 +451,7 @@
                                     @php
                                         $imageLink = route('marhun.showphotomarhun', ['norujukan_sag' => $lelongbid['norujukan'], 'filemarhun_id' => $lelongbid['filemarhun_id']]);
                                     @endphp
-                                    <a href="{{ $imageLink }}" target="_blank" class="btn m-2 btn-warning">Lihat gambar</a>
+                                    <a href="{{ $imageLink }}" target="_blank" class="btn m-2 btn-warning btn-view-overall-marhun-photo">Lihat gambar</a>
                                     <button data-dismiss="modal" onclick="updatePhoto(1)" type="button"
                                         data-target="#modalupdatephoto" data-toggle="modal" class="btn m-2 btn-warning action-invalid-after-semak">Muat naik gambar baru</button>
                                     <button data-dismiss="modal"
@@ -888,5 +893,8 @@
             $("#formkemaskini").submit();
         }
 
+        marhunPhotoViewerOverall.attachPhotoViewer();
+        marhunPhotoViewerPerMarhun.attachPhotoViewer();
+
     </script>
 @endsection