partial working
This commit is contained in:
chark1es
parent
47acfcf7e2
commit
b811bb6545
1 changed files with 109 additions and 24 deletions
|
|
@ -399,24 +399,24 @@ const {
|
|||
}
|
||||
|
||||
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";
|
||||
|
||||
const fileType = this.getFileType(file.name);
|
||||
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">
|
||||
<img src="${file.url}" alt="${file.name}" class="w-full h-full object-cover" loading="lazy">
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const icon = this.getFileTypeIcon(fileType);
|
||||
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>
|
||||
${icon}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -427,41 +427,126 @@ const {
|
|||
<h3 class="card-title text-sm" title="${file.name}">
|
||||
<span class="truncate">${file.name}</span>
|
||||
</h3>
|
||||
<p class="text-xs opacity-70">${this.getFileTypeLabel(fileType)}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener("click", () => this.showFile(file));
|
||||
return card;
|
||||
}
|
||||
|
||||
getFileTypeLabel(fileType) {
|
||||
switch (fileType) {
|
||||
case "image":
|
||||
return "Image";
|
||||
case "video":
|
||||
return "Video";
|
||||
case "audio":
|
||||
return "Audio";
|
||||
case "pdf":
|
||||
return "PDF Document";
|
||||
case "word":
|
||||
return "Word Document";
|
||||
case "excel":
|
||||
return "Excel Spreadsheet";
|
||||
case "powerpoint":
|
||||
return "PowerPoint Presentation";
|
||||
case "text":
|
||||
return "Text Document";
|
||||
case "code":
|
||||
return "Code File";
|
||||
case "archive":
|
||||
return "Archive";
|
||||
default:
|
||||
return "File";
|
||||
}
|
||||
}
|
||||
|
||||
async show(files) {
|
||||
this.modal.showModal();
|
||||
|
||||
if (!Array.isArray(files)) {
|
||||
// Single file
|
||||
await this.showFile(files);
|
||||
} else if (files.length === 1) {
|
||||
// Single file in array
|
||||
await this.showFile(files[0]);
|
||||
} else {
|
||||
// Multiple files
|
||||
this.singleView.classList.add("hidden");
|
||||
this.multipleView.classList.remove("hidden");
|
||||
|
||||
// Show loading state
|
||||
// Show loading state immediately
|
||||
this.showLoading(false);
|
||||
this.showLoading(true);
|
||||
|
||||
try {
|
||||
// Normalize input to array
|
||||
const fileArray = Array.isArray(files) ? files : [files];
|
||||
|
||||
// Handle empty files
|
||||
if (fileArray.length === 0) {
|
||||
this.previewContainer.innerHTML = `
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="text-center text-base-content/70">
|
||||
<p>No files available</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.hideLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Single file view
|
||||
if (fileArray.length === 1) {
|
||||
this.singleView.classList.remove("hidden");
|
||||
this.multipleView.classList.add("hidden");
|
||||
await this.showFile(fileArray[0]);
|
||||
}
|
||||
// Multiple files view
|
||||
else {
|
||||
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));
|
||||
});
|
||||
} finally {
|
||||
// Hide loading state
|
||||
this.hideLoading(true);
|
||||
|
||||
// Create all file cards and handle their loading
|
||||
const loadingPromises = fileArray.map(async (file) => {
|
||||
const card = this.createFileCard(file);
|
||||
this.fileGrid.appendChild(card);
|
||||
|
||||
// If it's an image, wait for it to load
|
||||
if (this.getFileType(file.name) === "image") {
|
||||
const img = card.querySelector("img");
|
||||
if (img) {
|
||||
await new Promise((resolve, reject) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
// Add a timeout to prevent infinite loading
|
||||
setTimeout(resolve, 5000); // 5 second timeout
|
||||
}).catch(console.warn); // Log but don't fail if image fails to load
|
||||
}
|
||||
}
|
||||
return card;
|
||||
});
|
||||
|
||||
// Wait for all cards to be processed
|
||||
await Promise.all(loadingPromises);
|
||||
|
||||
// Add click handlers after all cards are loaded
|
||||
const cards = this.fileGrid.querySelectorAll(".card");
|
||||
cards.forEach((card, index) => {
|
||||
card.addEventListener("click", () => {
|
||||
this.showFile(fileArray[index]);
|
||||
this.singleView.classList.remove("hidden");
|
||||
this.multipleView.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error showing files:", error);
|
||||
this.previewContainer.innerHTML = `
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="text-center text-error">
|
||||
<p>Failed to load files</p>
|
||||
<p class="text-sm mt-2 opacity-70">${error instanceof Error ? error.message : "Unknown error"}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} finally {
|
||||
// Hide both loading states
|
||||
this.hideLoading(false);
|
||||
this.hideLoading(true);
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue