daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tambahkan fitur download dan penutupan modal PDF dengan tombol Escape

Browse Source 
Memperbarui tampilan modal untuk menyertakan tombol download PDF dan menutupi modal ketika tombol Escape ditekan. Penyesuaian elemen dalam modal untuk mengatur tata letak yang lebih baik dan menambah event listener untuk menangani penutupan modal saat klik di luar isi modal.
This commit is contained in:
Daeng Deni Mardaeni
2024-11-07 21:31:46 +07:00
parent a3de0bf8de
commit aa41da8a68
1 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/views/component/pdfviewer.blade.php
View File

@@ -1,11 +1,17 @@
<!-- Modal for PDF viewing -->
<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full">
<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full z-50">
<div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all min-w-3xl w-[1500px] h-[1200px]">
<div class="p-4 h-full">
<button onclick="closePDFModal()" class="float-right text-2xl">
<div class="p-4 h-full flex flex-col">
<div class="flex justify-between items-center mb-4">
<button id="downloadPdfBtn" class="btn btn-primary btn-sm">
<i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span class="path2"></span></i>
Download PDF
</button>
<button onclick="closePDFModal()" class="text-2xl">
<i class="ki-filled ki-cross-square text-red-600"></i>
</button>
<div id="pdfViewer" class="h-full"></div>
</div>
<div id="pdfViewer" class="flex-grow"></div>
</div>
</div>
</div>
@@ -13,13 +19,38 @@
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
<script>
let currentPdfUrl = '';
function viewPDF(url) {
currentPdfUrl = url;
PDFObject.embed(url, "#pdfViewer");
document.getElementById('pdfModal').classList.remove('hidden');
document.addEventListener('keydown', handleEscKey);
}
function closePDFModal() {
document.getElementById('pdfModal').classList.add('hidden');
document.removeEventListener('keydown', handleEscKey);
}
function handleEscKey(event) {
if (event.key === 'Escape') {
closePDFModal();
}
}
// Close modal when clicking outside the content
document.getElementById('pdfModal').addEventListener('click', function(event) {
if (event.target === this) {
closePDFModal();
}
});
// Download PDF functionality
document.getElementById('downloadPdfBtn').addEventListener('click', function() {
if (currentPdfUrl) {
window.open(currentPdfUrl, '_blank');
}
});
</script>
@endpush