Add modal preview for OPD history scans
This commit is contained in:
parent
f90bb94063
commit
9a3f29660b
|
|
@ -460,6 +460,25 @@
|
|||
object-fit: contain;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.rx-history-scan-modal-body {
|
||||
max-height: calc(100vh - 140px);
|
||||
min-height: 70vh;
|
||||
overflow: auto;
|
||||
background: #f8f9fa;
|
||||
padding: .75rem;
|
||||
}
|
||||
.rx-history-scan-modal-dialog {
|
||||
width: min(96vw, 1600px);
|
||||
max-width: min(96vw, 1600px);
|
||||
}
|
||||
.rx-history-scan-modal-img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 190px);
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.rx-two-panel {
|
||||
--rx-panel-height: calc(100vh - 170px);
|
||||
|
|
@ -1636,6 +1655,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="historyScanPreviewModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog rx-history-scan-modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="historyScanPreviewTitle">OPD Scan</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body rx-history-scan-modal-body text-center">
|
||||
<img src="" alt="OPD history scan" id="historyScanPreviewImage" class="rx-history-scan-modal-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
|
|
@ -6638,6 +6671,36 @@
|
|||
$(this).text($item.hasClass('expanded') ? 'Minimize' : 'Expand');
|
||||
});
|
||||
|
||||
$(document).on('click', '.js-history-scan-link', function(e) {
|
||||
var modalEl;
|
||||
var modalInst;
|
||||
var src;
|
||||
var title;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
src = ($(this).data('scan-src') || $(this).attr('href') || '').toString().trim();
|
||||
if (!src) {
|
||||
return;
|
||||
}
|
||||
|
||||
title = ($(this).data('scan-title') || 'OPD Scan').toString().trim();
|
||||
$('#historyScanPreviewImage').attr('src', src);
|
||||
$('#historyScanPreviewTitle').text(title || 'OPD Scan');
|
||||
|
||||
if (window.bootstrap && window.bootstrap.Modal) {
|
||||
modalEl = document.getElementById('historyScanPreviewModal');
|
||||
modalInst = window.bootstrap.Modal.getOrCreateInstance(modalEl);
|
||||
modalInst.show();
|
||||
} else {
|
||||
window.open(src, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
$('#historyScanPreviewModal').on('hidden.bs.modal', function() {
|
||||
$('#historyScanPreviewImage').attr('src', '');
|
||||
});
|
||||
|
||||
$(document).on('click', '.btn-use-current-scan-report', function() {
|
||||
var txt = ($(this).data('report') || '').toString().trim();
|
||||
if (!txt) {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,12 @@
|
|||
<?php if (!empty($scan['is_pdf'])) { ?>
|
||||
<a class="btn btn-outline-secondary btn-sm w-100" target="_blank" href="<?= esc((string) ($scan['path'] ?? '')) ?>">Open PDF</a>
|
||||
<?php } else { ?>
|
||||
<a target="_blank" href="<?= esc((string) ($scan['path'] ?? '')) ?>">
|
||||
<a
|
||||
href="<?= esc((string) ($scan['path'] ?? '')) ?>"
|
||||
class="js-history-scan-link"
|
||||
data-scan-src="<?= esc((string) ($scan['path'] ?? '')) ?>"
|
||||
data-scan-title="<?= esc((string) (($scan['opd_code'] ?? '') !== '' ? $scan['opd_code'] : ('OPD #' . ((int) ($scan['opd_id'] ?? 0)))) . ' ' . ($scan['opd_date'] ?? '')) ?>"
|
||||
>
|
||||
<img src="<?= esc((string) ($scan['path'] ?? '')) ?>" loading="lazy" decoding="async" class="rx-history-preview" alt="history scan">
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary mt-1 w-100 btn-history-toggle-image">Expand</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user