create a pdf modal
This commit is contained in:
chark1es
parent
04ad149cec
commit
00edb569c3
1 changed files with 257 additions and 0 deletions
257
src/components/modals/FilePreviewModal.astro
Normal file
257
src/components/modals/FilePreviewModal.astro
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
---
|
||||
interface Props {
|
||||
id?: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
id = "filePreviewModal",
|
||||
title = "File Preview",
|
||||
className = "",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<dialog id={id} class={`modal ${className}`}>
|
||||
<!-- Single File Preview -->
|
||||
<div id={`${id}-single`} class="modal-box w-11/12 max-w-5xl h-[80vh]">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-lg" id={`${id}-title`}>{title}</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
id={`${id}-external-link`}
|
||||
href="#"
|
||||
target="_blank"
|
||||
class="btn btn-sm btn-ghost"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 mr-1"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
|
||||
></path>
|
||||
<path
|
||||
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
|
||||
></path>
|
||||
</svg>
|
||||
Open in New Tab
|
||||
</a>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[calc(100%-4rem)] bg-base-200 rounded-lg">
|
||||
<!-- Preview Container -->
|
||||
<div id={`${id}-preview-container`} class="w-full h-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple Files Selection -->
|
||||
<div id={`${id}-multiple`} class="modal-box w-11/12 max-w-5xl hidden">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-lg">Select File to Preview</h3>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
||||
id={`${id}-file-grid`}
|
||||
>
|
||||
<!-- Files will be dynamically inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script define:vars={{ id }}>
|
||||
class FilePreviewModal {
|
||||
constructor(modalId) {
|
||||
this.modal = document.getElementById(modalId);
|
||||
this.singleView = document.getElementById(`${modalId}-single`);
|
||||
this.multipleView = document.getElementById(`${modalId}-multiple`);
|
||||
this.previewContainer = document.getElementById(
|
||||
`${modalId}-preview-container`
|
||||
);
|
||||
this.fileGrid = document.getElementById(`${modalId}-file-grid`);
|
||||
this.titleElement = document.getElementById(`${modalId}-title`);
|
||||
this.externalLink = document.getElementById(
|
||||
`${modalId}-external-link`
|
||||
);
|
||||
|
||||
// Close modal when clicking backdrop
|
||||
this.modal.addEventListener("click", (e) => {
|
||||
const dialogDimensions = this.modal.getBoundingClientRect();
|
||||
if (
|
||||
e.clientX < dialogDimensions.left ||
|
||||
e.clientX > dialogDimensions.right ||
|
||||
e.clientY < dialogDimensions.top ||
|
||||
e.clientY > dialogDimensions.bottom
|
||||
) {
|
||||
this.modal.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getFileType(fileName) {
|
||||
const ext = fileName.split(".").pop()?.toLowerCase() || "";
|
||||
if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext))
|
||||
return "image";
|
||||
if (["mp4", "webm", "ogg"].includes(ext)) return "video";
|
||||
if (["mp3", "wav", "ogg"].includes(ext)) return "audio";
|
||||
if (["pdf"].includes(ext)) return "pdf";
|
||||
return "other";
|
||||
}
|
||||
|
||||
createPreviewElement(file) {
|
||||
const fileType = this.getFileType(file.name);
|
||||
let element;
|
||||
|
||||
switch (fileType) {
|
||||
case "image":
|
||||
element = document.createElement("img");
|
||||
element.className = "w-full h-full object-contain";
|
||||
element.src = file.url;
|
||||
element.alt = file.name;
|
||||
break;
|
||||
|
||||
case "video":
|
||||
element = document.createElement("video");
|
||||
element.className = "w-full h-full";
|
||||
element.setAttribute("controls", "");
|
||||
element.src = file.url;
|
||||
break;
|
||||
|
||||
case "audio":
|
||||
element = document.createElement("div");
|
||||
element.className =
|
||||
"w-full h-full flex items-center justify-center p-4";
|
||||
const audio = document.createElement("audio");
|
||||
audio.className = "w-full";
|
||||
audio.setAttribute("controls", "");
|
||||
audio.src = file.url;
|
||||
element.appendChild(audio);
|
||||
break;
|
||||
|
||||
case "pdf":
|
||||
element = document.createElement("iframe");
|
||||
element.className = "w-full h-full";
|
||||
element.src = file.url;
|
||||
break;
|
||||
|
||||
default:
|
||||
element = document.createElement("div");
|
||||
element.className =
|
||||
"w-full h-full flex items-center justify-center";
|
||||
element.innerHTML = `
|
||||
<div class="text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-base-content/50" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p>This file type cannot be previewed</p>
|
||||
<a href="${file.url}" target="_blank" class="btn btn-primary btn-sm mt-4">Download File</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
showFile(file) {
|
||||
this.titleElement.textContent = file.name;
|
||||
this.externalLink.href = file.url;
|
||||
|
||||
// Clear previous preview
|
||||
this.previewContainer.innerHTML = "";
|
||||
|
||||
// Create and append new preview
|
||||
const previewElement = this.createPreviewElement(file);
|
||||
this.previewContainer.appendChild(previewElement);
|
||||
|
||||
// Show single view
|
||||
this.singleView.classList.remove("hidden");
|
||||
this.multipleView.classList.add("hidden");
|
||||
}
|
||||
|
||||
createFileCard(file) {
|
||||
const fileType = this.getFileType(file.name);
|
||||
const card = document.createElement("div");
|
||||
card.className =
|
||||
"card bg-base-200 hover:bg-base-300 cursor-pointer transition-colors";
|
||||
|
||||
let preview = "";
|
||||
if (fileType === "image") {
|
||||
preview = `
|
||||
<div class="aspect-video bg-base-300 rounded-t-lg overflow-hidden">
|
||||
<img src="${file.url}" alt="${file.name}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
preview = `
|
||||
<div class="aspect-video bg-base-300 rounded-t-lg flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-50" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
${preview}
|
||||
<div class="card-body p-4">
|
||||
<h3 class="card-title text-sm" title="${file.name}">
|
||||
<span class="truncate">${file.name}</span>
|
||||
</h3>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener("click", () => this.showFile(file));
|
||||
return card;
|
||||
}
|
||||
|
||||
show(files) {
|
||||
if (!Array.isArray(files)) {
|
||||
// Single file
|
||||
this.showFile(files);
|
||||
} else if (files.length === 1) {
|
||||
// Single file in array
|
||||
this.showFile(files[0]);
|
||||
} else {
|
||||
// Multiple files
|
||||
this.singleView.classList.add("hidden");
|
||||
this.multipleView.classList.remove("hidden");
|
||||
|
||||
// Clear and populate file grid
|
||||
this.fileGrid.innerHTML = "";
|
||||
files.forEach((file) => {
|
||||
this.fileGrid.appendChild(this.createFileCard(file));
|
||||
});
|
||||
}
|
||||
|
||||
this.modal.showModal();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.modal.close();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the modal
|
||||
const filePreviewModal = new FilePreviewModal(id);
|
||||
|
||||
// Make it available globally
|
||||
window.filePreviewModal = filePreviewModal;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue