Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better preview of files

Browse Source
This commit is contained in:
Kobe
2025-06-01 12:38:51 +02:00
parent aeefd17b10
commit ea118a37c5
8 changed files with 140 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
static/js/file-grid.js
View File

@@ -9,6 +9,28 @@
* - File details display
*/
import { FilePreview } from './components/filePreview.js';
/**
* Formats a file size in bytes to a human-readable string.
* @param {number} bytes - The file size in bytes
* @returns {string} Formatted file size string
*/
function formatFileSize(bytes) {
if (!bytes) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(1)} ${units[unitIndex]}`;
}
let currentView = 'grid';
let lastSelectedIndex = -1;
let sortColumn = 'name'; // Set default sort column to name
@@ -21,6 +43,14 @@ window.isAdmin = document.body.dataset.isAdmin === 'true';
// Check if we're on the trash page
const isTrashPage = window.location.pathname.includes('/trash');
// Initialize FilePreview component
const filePreview = new FilePreview({
containerId: 'filePreviewModal',
onClose: () => {
// Clean up any resources if needed
}
});
/**
* Initializes the file view and fetches files.
* Sets up the preferred view and initial file sorting.
@@ -189,17 +219,31 @@ function renderFiles(files) {
${isTrashPage ? `<th onclick="sortFiles('auto_delete')" style="cursor:pointer;">Auto Delete ${(sortColumn==='auto_delete') ? (sortDirection===1?'▲':'▼') : ''}</th>` : ''}
<th class='file-actions'></th>
</tr></thead><tbody>`;
files.forEach((file, idx) => {
let icon = file.type === 'folder'
? `<i class='fas fa-folder' style='font-size:1.5rem;color:var(--primary-color);'></i>`
: `<i class='fas ${getFileIcon(file.name)}' style='font-size:1.5rem;color:var(--secondary-color);'></i>`;
let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
let icon = file.type === 'folder' ?
`<i class="fas fa-folder" style="color:var(--primary-color);"></i>` :
`<i class="fas ${getFileIcon(file.name)}" style="color:var(--secondary-color);"></i>`;
let size = file.type === 'folder' ? '-' : formatFileSize(file.size);
let dblClickAction = file.type === 'folder' ?
`ondblclick='navigateToFolder("${file.name}")'` : '';
let actionsArr = [];
let dblClickAction = '';
if (file.type === 'folder') {
dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
} else {
dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
// Add preview button for supported file types
if (file.type !== 'folder') {
const extension = file.name.split('.').pop().toLowerCase();
const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
if (supportedTypes.includes(extension)) {
actionsArr.push(`
<button class="btn btn-sm file-action-btn" title="Preview" onclick="event.stopPropagation(); previewFile(${idx})"
style="background-color:var(--primary-opacity-8);color:var(--primary-color);">
<i class="fas fa-eye"></i>
</button>
`);
}
}
if (isTrashPage) {
@@ -225,16 +269,29 @@ function renderFiles(files) {
grid.innerHTML = table;
} else {
files.forEach((file, idx) => {
let icon = file.type === 'folder'
? `<i class='fas fa-folder' style='font-size:2.5rem;color:var(--primary-color);'></i>`
: `<i class='fas ${getFileIcon(file.name)}' style='font-size:2.5rem;color:var(--secondary-color);'></i>`;
let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
let icon = file.type === 'folder' ?
`<i class="fas fa-folder" style="color:var(--primary-color);"></i>` :
`<i class="fas ${getFileIcon(file.name)}" style="color:var(--secondary-color);"></i>`;
let size = file.type === 'folder' ? '-' : formatFileSize(file.size);
let dblClickAction = file.type === 'folder' ?
`ondblclick='navigateToFolder("${file.name}")'` : '';
let actionsArr = [];
let dblClickAction = '';
if (file.type === 'folder') {
dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
} else {
dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
// Add preview button for supported file types
if (file.type !== 'folder') {
const extension = file.name.split('.').pop().toLowerCase();
const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
if (supportedTypes.includes(extension)) {
actionsArr.push(`
<button class="btn btn-sm file-action-btn" title="Preview" onclick="event.stopPropagation(); previewFile(${idx})"
style="background-color:var(--primary-opacity-8);color:var(--primary-color);">
<i class="fas fa-eye"></i>
</button>
`);
}
}
if (isTrashPage) {
@@ -606,6 +663,30 @@ function formatDate(dateString) {
return date.toLocaleString();
}
// Add previewFile function
async function previewFile(index) {
const file = currentFiles[index];
if (!file) return;
const fileUrl = `/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path || '')}&preview=true`;
await filePreview.previewFile({
name: file.name,
url: fileUrl
});
}
// Make functions globally accessible
window.previewFile = previewFile;
window.restoreFile = restoreFile;
window.showPermanentDeleteModal = showPermanentDeleteModal;
window.showDetailsModal = showDetailsModal;
window.toggleStar = toggleStar;
window.sortFiles = sortFiles;
window.navigateToFile = navigateToFile;
window.showEmptyTrashModal = showEmptyTrashModal;
window.permanentDeleteFile = permanentDeleteFile;
// Initialize search functionality
document.addEventListener('DOMContentLoaded', function() {
initializeView();