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

**Tambahkan dukungan pratinjau untuk gambar dan file PDF**

Browse Source 
Modal pratinjau sekarang mendukung gambar (JPG, JPEG, PNG, GIF) selain PDF.
Refaktor kode untuk menangani berbagai jenis file dan perubahan elemen HTML terkait untuk mendukung fungsi baru.
This commit is contained in:
Daeng Deni Mardaeni
2024-11-07 23:11:41 +07:00
parent acf121cc2c
commit 2ef55f8df5
1 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,17 @@
<!-- Modal for PDF viewing --> <!-- Modal for PDF and Image viewing -->
<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full z-50"> <div id="previewModal" 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="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all min-w-3xl w-[1500px] h-[1200px]">
<div class="p-4 h-full flex flex-col"> <div class="p-4 h-full flex flex-col">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<button id="downloadPdfBtn" class="btn btn-primary btn-sm"> <button id="downloadBtn" class="btn btn-primary btn-sm">
<i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span class="path2"></span></i> <i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span class="path2"></span></i>
Download PDF Download File
</button> </button>
<button onclick="closePDFModal()" class="text-2xl"> <button onclick="closePreviewModal()" class="text-2xl">
<i class="ki-filled ki-cross-square text-red-600"></i> <i class="ki-filled ki-cross-square text-red-600"></i>
</button> </button>
</div> </div>
<div id="pdfViewer" class="flex-grow"></div> <div id="previewContent" class="flex-grow"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -19,37 +19,47 @@
@push('scripts') @push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
<script> <script>
let currentPdfUrl = ''; let currentFileUrl = '';
function viewPDF(url) { function viewPDF(url) {
currentPdfUrl = url; currentFileUrl = url;
PDFObject.embed(url, "#pdfViewer"); const fileExtension = url.split('.').pop().toLowerCase();
document.getElementById('pdfModal').classList.remove('hidden'); const previewContent = document.getElementById('previewContent');
if (['pdf'].includes(fileExtension)) {
PDFObject.embed(url, "#previewContent");
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
previewContent.innerHTML = `<img src="${url}" alt="Preview" class="max-w-full max-h-full object-contain">`;
} else {
previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>';
}
document.getElementById('previewModal').classList.remove('hidden');
document.addEventListener('keydown', handleEscKey); document.addEventListener('keydown', handleEscKey);
} }
function closePDFModal() { function closePreviewModal() {
document.getElementById('pdfModal').classList.add('hidden'); document.getElementById('previewModal').classList.add('hidden');
document.removeEventListener('keydown', handleEscKey); document.removeEventListener('keydown', handleEscKey);
} }
function handleEscKey(event) { function handleEscKey(event) {
if (event.key === 'Escape') { if (event.key === 'Escape') {
closePDFModal(); closePreviewModal();
} }
} }
// Close modal when clicking outside the content // Close modal when clicking outside the content
document.getElementById('pdfModal').addEventListener('click', function(event) { document.getElementById('previewModal').addEventListener('click', function(event) {
if (event.target === this) { if (event.target === this) {
closePDFModal(); closePreviewModal();
} }
}); });
// Download PDF functionality // Download functionality
document.getElementById('downloadPdfBtn').addEventListener('click', function() { document.getElementById('downloadBtn').addEventListener('click', function() {
if (currentPdfUrl) { if (currentFileUrl) {
window.open(currentPdfUrl, '_blank'); window.open(currentFileUrl, '_blank');
} }
}); });
</script> </script>