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 aa41da8a68
commit 991fda7ccb
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 -->
<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full z-50">
<!-- Modal for PDF and Image viewing -->
<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="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">
<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>
Download PDF
Download File
</button>
<button onclick="closePDFModal()" class="text-2xl">
<button onclick="closePreviewModal()" class="text-2xl">
<i class="ki-filled ki-cross-square text-red-600"></i>
</button>
</div>
<div id="pdfViewer" class="flex-grow"></div>
<div id="previewContent" class="flex-grow"></div>
</div>
</div>
</div>
@@ -19,37 +19,47 @@
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
<script>
let currentPdfUrl = '';
let currentFileUrl = '';
function viewPDF(url) {
currentPdfUrl = url;
PDFObject.embed(url, "#pdfViewer");
document.getElementById('pdfModal').classList.remove('hidden');
currentFileUrl = url;
const fileExtension = url.split('.').pop().toLowerCase();
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);
}
function closePDFModal() {
document.getElementById('pdfModal').classList.add('hidden');
function closePreviewModal() {
document.getElementById('previewModal').classList.add('hidden');
document.removeEventListener('keydown', handleEscKey);
}
function handleEscKey(event) {
if (event.key === 'Escape') {
closePDFModal();
closePreviewModal();
}
}
// 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) {
closePDFModal();
closePreviewModal();
}
});
// Download PDF functionality
document.getElementById('downloadPdfBtn').addEventListener('click', function() {
if (currentPdfUrl) {
window.open(currentPdfUrl, '_blank');
// Download functionality
document.getElementById('downloadBtn').addEventListener('click', function() {
if (currentFileUrl) {
window.open(currentFileUrl, '_blank');
}
});
</script>