adding pdf and image viewer
This commit is contained in:
DioCrafts
@@ -56,6 +56,15 @@ function initApp() {
|
||||
console.log('Using standard file rendering');
|
||||
}
|
||||
|
||||
// Check if inline viewer is initialized
|
||||
if (window.inlineViewer) {
|
||||
console.log('Inline viewer is available');
|
||||
} else {
|
||||
console.warn('Inline viewer not initialized yet, will initialize it now');
|
||||
// Create inline viewer if not already created
|
||||
window.inlineViewer = new InlineViewer();
|
||||
}
|
||||
|
||||
// Wait for translations to load before checking authentication
|
||||
if (window.i18n && window.i18n.isLoaded && window.i18n.isLoaded()) {
|
||||
// Translations already loaded, proceed with authentication
|
||||
|
||||
@@ -10,6 +10,16 @@ const contextMenus = {
|
||||
*/
|
||||
assignMenuEvents() {
|
||||
// Folder context menu options
|
||||
document.getElementById('download-folder-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFolder) {
|
||||
window.fileOps.downloadFolder(
|
||||
window.app.contextMenuTargetFolder.id,
|
||||
window.app.contextMenuTargetFolder.name
|
||||
);
|
||||
}
|
||||
window.ui.closeContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('rename-folder-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFolder) {
|
||||
this.showRenameDialog(window.app.contextMenuTargetFolder);
|
||||
@@ -42,6 +52,16 @@ const contextMenus = {
|
||||
});
|
||||
|
||||
// File context menu options
|
||||
document.getElementById('download-file-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFile) {
|
||||
window.fileOps.downloadFile(
|
||||
window.app.contextMenuTargetFile.id,
|
||||
window.app.contextMenuTargetFile.name
|
||||
);
|
||||
}
|
||||
window.ui.closeFileContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('move-file-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFile) {
|
||||
this.showMoveDialog(window.app.contextMenuTargetFile, 'file');
|
||||
|
||||
@@ -459,6 +459,47 @@ const fileOps = {
|
||||
window.ui.showNotification('Error', 'Error al vaciar la papelera');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Descargar un archivo
|
||||
* @param {string} fileId - ID del archivo
|
||||
* @param {string} fileName - Nombre del archivo
|
||||
*/
|
||||
downloadFile(fileId, fileName) {
|
||||
// Create a link and trigger download
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/files/${fileId}`;
|
||||
link.download = fileName;
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
},
|
||||
|
||||
/**
|
||||
* Descargar una carpeta como ZIP
|
||||
* @param {string} folderId - ID de la carpeta
|
||||
* @param {string} folderName - Nombre de la carpeta
|
||||
*/
|
||||
async downloadFolder(folderId, folderName) {
|
||||
try {
|
||||
// Show notification to user
|
||||
window.ui.showNotification('Preparando descarga', 'Preparando la carpeta para descargar...');
|
||||
|
||||
// Request the server to create a ZIP of the folder
|
||||
// Since the API might not support this directly, we will simply download with zip parameter
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/folders/${folderId}/download?format=zip`;
|
||||
link.download = `${folderName}.zip`;
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} catch (error) {
|
||||
console.error('Error downloading folder:', error);
|
||||
window.ui.showNotification('Error', 'Error al descargar la carpeta');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -291,9 +291,22 @@ class FileRenderer {
|
||||
});
|
||||
});
|
||||
|
||||
// Click event (download)
|
||||
elem.addEventListener('click', () => {
|
||||
window.location.href = `/api/files/${item.id}`;
|
||||
// Click event (preview)
|
||||
elem.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
console.log('File clicked:', item);
|
||||
|
||||
// Open file in our new inline viewer
|
||||
if (window.inlineViewer) {
|
||||
console.log('Using inline viewer');
|
||||
window.inlineViewer.openFile(item);
|
||||
} else {
|
||||
console.warn('Inline viewer not available, downloading directly');
|
||||
// Fallback to direct download if viewer is not available
|
||||
window.location.href = `/api/files/${item.id}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -422,9 +435,22 @@ class FileRenderer {
|
||||
});
|
||||
});
|
||||
|
||||
// Click event (download)
|
||||
elem.addEventListener('click', () => {
|
||||
window.location.href = `/api/files/${item.id}`;
|
||||
// Click event (preview)
|
||||
elem.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
console.log('File clicked:', item);
|
||||
|
||||
// Open file in our new inline viewer
|
||||
if (window.inlineViewer) {
|
||||
console.log('Using inline viewer');
|
||||
window.inlineViewer.openFile(item);
|
||||
} else {
|
||||
console.warn('Inline viewer not available, downloading directly');
|
||||
// Fallback to direct download if viewer is not available
|
||||
window.location.href = `/api/files/${item.id}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,311 @@
|
||||
/**
|
||||
* OxiCloud File Viewer Module
|
||||
* Provides integrated viewers for images, PDFs and other file types
|
||||
*/
|
||||
|
||||
class FileViewer {
|
||||
constructor() {
|
||||
this.viewerContainer = null;
|
||||
this.fileData = null;
|
||||
this.isOpen = false;
|
||||
|
||||
// Create the viewer container on initialization
|
||||
this.createViewerContainer();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the viewer container DOM element
|
||||
*/
|
||||
createViewerContainer() {
|
||||
console.log('Creating file viewer container');
|
||||
|
||||
// Check if container already exists
|
||||
if (document.getElementById('file-viewer-container')) {
|
||||
console.log('Viewer container already exists');
|
||||
this.viewerContainer = document.getElementById('file-viewer-container');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create viewer container
|
||||
this.viewerContainer = document.createElement('div');
|
||||
this.viewerContainer.id = 'file-viewer-container';
|
||||
this.viewerContainer.className = 'file-viewer-container';
|
||||
|
||||
// Create viewer content
|
||||
const viewerContent = document.createElement('div');
|
||||
viewerContent.className = 'file-viewer-content';
|
||||
|
||||
// Create header
|
||||
const header = document.createElement('div');
|
||||
header.className = 'file-viewer-header';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'file-viewer-title';
|
||||
title.textContent = 'File Viewer';
|
||||
header.appendChild(title);
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'file-viewer-close';
|
||||
closeBtn.innerHTML = '<i class="fas fa-times"></i>';
|
||||
closeBtn.addEventListener('click', () => {
|
||||
console.log('Close button clicked');
|
||||
this.close();
|
||||
});
|
||||
header.appendChild(closeBtn);
|
||||
|
||||
// Create viewer area
|
||||
const viewerArea = document.createElement('div');
|
||||
viewerArea.className = 'file-viewer-area';
|
||||
|
||||
// Create toolbar
|
||||
const toolbar = document.createElement('div');
|
||||
toolbar.className = 'file-viewer-toolbar';
|
||||
|
||||
const downloadBtn = document.createElement('button');
|
||||
downloadBtn.className = 'file-viewer-download';
|
||||
downloadBtn.innerHTML = '<i class="fas fa-download"></i>';
|
||||
downloadBtn.addEventListener('click', () => this.downloadFile());
|
||||
toolbar.appendChild(downloadBtn);
|
||||
|
||||
// Assemble the viewer
|
||||
viewerContent.appendChild(header);
|
||||
viewerContent.appendChild(viewerArea);
|
||||
viewerContent.appendChild(toolbar);
|
||||
this.viewerContainer.appendChild(viewerContent);
|
||||
|
||||
// Add to the document
|
||||
if (document.body) {
|
||||
console.log('Adding viewer container to body');
|
||||
document.body.appendChild(this.viewerContainer);
|
||||
} else {
|
||||
console.warn('Document body not ready, will add viewer later');
|
||||
// Try to add it after document is ready
|
||||
setTimeout(() => {
|
||||
if (document.body) {
|
||||
console.log('Adding viewer container to body (delayed)');
|
||||
document.body.appendChild(this.viewerContainer);
|
||||
} else {
|
||||
console.error('Document body still not available after delay');
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Add event listeners for keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (this.isOpen && e.key === 'Escape') {
|
||||
console.log('Escape key pressed, closing viewer');
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Viewer container created');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the viewer with the specified file
|
||||
* @param {Object} fileData - File data with id, name, mime_type
|
||||
*/
|
||||
async open(fileData) {
|
||||
console.log('FileViewer: Opening file', fileData);
|
||||
this.fileData = fileData;
|
||||
this.isOpen = true;
|
||||
|
||||
// Reset the viewer area
|
||||
const viewerArea = this.viewerContainer.querySelector('.file-viewer-area');
|
||||
viewerArea.innerHTML = '';
|
||||
|
||||
// Set the title
|
||||
const title = this.viewerContainer.querySelector('.file-viewer-title');
|
||||
title.textContent = fileData.name;
|
||||
|
||||
// Show the container
|
||||
this.viewerContainer.classList.add('active');
|
||||
|
||||
// Determine content type and load appropriate viewer
|
||||
if (fileData.mime_type && fileData.mime_type.startsWith('image/')) {
|
||||
console.log('FileViewer: Loading image viewer');
|
||||
this.loadImageViewer(fileData.id, viewerArea);
|
||||
} else if (fileData.mime_type && fileData.mime_type === 'application/pdf') {
|
||||
console.log('FileViewer: Loading PDF viewer');
|
||||
this.loadPdfViewer(fileData.id, viewerArea);
|
||||
} else {
|
||||
console.log('FileViewer: Unsupported file type', fileData.mime_type);
|
||||
// For unsupported files, show download prompt
|
||||
this.showUnsupportedFileMessage(viewerArea);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the image viewer
|
||||
* @param {string} fileId - ID of the file to view
|
||||
* @param {HTMLElement} container - Container element to render into
|
||||
*/
|
||||
loadImageViewer(fileId, container) {
|
||||
// Create image element
|
||||
const img = document.createElement('img');
|
||||
img.className = 'file-viewer-image';
|
||||
img.src = `/api/files/${fileId}`;
|
||||
img.alt = this.fileData.name;
|
||||
|
||||
// Create loader
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'file-viewer-loader';
|
||||
loader.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
||||
container.appendChild(loader);
|
||||
|
||||
// When image loads, remove loader
|
||||
img.onload = () => {
|
||||
container.removeChild(loader);
|
||||
};
|
||||
|
||||
// Add image to container
|
||||
container.appendChild(img);
|
||||
|
||||
// Add zoom controls to toolbar
|
||||
const toolbar = this.viewerContainer.querySelector('.file-viewer-toolbar');
|
||||
|
||||
const zoomInBtn = document.createElement('button');
|
||||
zoomInBtn.className = 'file-viewer-zoom-in';
|
||||
zoomInBtn.innerHTML = '<i class="fas fa-search-plus"></i>';
|
||||
zoomInBtn.addEventListener('click', () => this.zoomImage(1.2));
|
||||
toolbar.appendChild(zoomInBtn);
|
||||
|
||||
const zoomOutBtn = document.createElement('button');
|
||||
zoomOutBtn.className = 'file-viewer-zoom-out';
|
||||
zoomOutBtn.innerHTML = '<i class="fas fa-search-minus"></i>';
|
||||
zoomOutBtn.addEventListener('click', () => this.zoomImage(0.8));
|
||||
toolbar.appendChild(zoomOutBtn);
|
||||
|
||||
const resetZoomBtn = document.createElement('button');
|
||||
resetZoomBtn.className = 'file-viewer-zoom-reset';
|
||||
resetZoomBtn.innerHTML = '<i class="fas fa-expand"></i>';
|
||||
resetZoomBtn.addEventListener('click', () => this.resetZoom());
|
||||
toolbar.appendChild(resetZoomBtn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zoom the image
|
||||
* @param {number} factor - Zoom factor
|
||||
*/
|
||||
zoomImage(factor) {
|
||||
const img = this.viewerContainer.querySelector('.file-viewer-image');
|
||||
if (!img) return;
|
||||
|
||||
// Get current scale
|
||||
let scale = img.style.transform ?
|
||||
parseFloat(img.style.transform.replace('scale(', '').replace(')', '')) : 1;
|
||||
|
||||
// Apply new scale
|
||||
scale *= factor;
|
||||
|
||||
// Limit scale range
|
||||
scale = Math.max(0.5, Math.min(5, scale));
|
||||
|
||||
img.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset image zoom
|
||||
*/
|
||||
resetZoom() {
|
||||
const img = this.viewerContainer.querySelector('.file-viewer-image');
|
||||
if (!img) return;
|
||||
|
||||
img.style.transform = 'scale(1)';
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the PDF viewer
|
||||
* @param {string} fileId - ID of the file to view
|
||||
* @param {HTMLElement} container - Container element to render into
|
||||
*/
|
||||
loadPdfViewer(fileId, container) {
|
||||
// Create iframe for PDF viewer
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.className = 'file-viewer-pdf';
|
||||
iframe.src = `/api/files/${fileId}`;
|
||||
iframe.title = this.fileData.name;
|
||||
|
||||
// Create loader
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'file-viewer-loader';
|
||||
loader.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
||||
container.appendChild(loader);
|
||||
|
||||
// When iframe loads, remove loader
|
||||
iframe.onload = () => {
|
||||
container.removeChild(loader);
|
||||
};
|
||||
|
||||
// Add iframe to container
|
||||
container.appendChild(iframe);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show message for unsupported file types
|
||||
* @param {HTMLElement} container - Container element to render into
|
||||
*/
|
||||
showUnsupportedFileMessage(container) {
|
||||
const message = document.createElement('div');
|
||||
message.className = 'file-viewer-unsupported';
|
||||
|
||||
message.innerHTML = `
|
||||
<i class="fas fa-file-download"></i>
|
||||
<p>${window.i18n ? window.i18n.t('viewer.unsupported_file') : 'Este tipo de archivo no se puede previsualizar.'}</p>
|
||||
<button class="btn btn-primary download-btn">
|
||||
<i class="fas fa-download"></i>
|
||||
${window.i18n ? window.i18n.t('viewer.download_file') : 'Descargar archivo'}
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add download button click event
|
||||
message.querySelector('.download-btn').addEventListener('click', () => {
|
||||
this.downloadFile();
|
||||
});
|
||||
|
||||
container.appendChild(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* Download the current file
|
||||
*/
|
||||
downloadFile() {
|
||||
if (!this.fileData) return;
|
||||
|
||||
// Create a link and simulate click
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/files/${this.fileData.id}`;
|
||||
link.download = this.fileData.name;
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the viewer
|
||||
*/
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
this.fileData = null;
|
||||
this.viewerContainer.classList.remove('active');
|
||||
|
||||
// Reset toolbar (remove zoom controls)
|
||||
const toolbar = this.viewerContainer.querySelector('.file-viewer-toolbar');
|
||||
const downloadBtn = toolbar.querySelector('.file-viewer-download');
|
||||
toolbar.innerHTML = '';
|
||||
toolbar.appendChild(downloadBtn);
|
||||
}
|
||||
}
|
||||
|
||||
// Create the file viewer immediately and make it accessible globally
|
||||
window.fileViewer = new FileViewer();
|
||||
|
||||
// Ensure the file viewer is available when the DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('FileViewer initialized:', window.fileViewer ? 'Yes' : 'No');
|
||||
if (!window.fileViewer) {
|
||||
console.warn('Re-initializing fileViewer as it was not properly set');
|
||||
window.fileViewer = new FileViewer();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,329 @@
|
||||
/**
|
||||
* OxiCloud Inline Viewer
|
||||
* A simpler approach to viewing files that doesn't rely on complex DOM manipulation
|
||||
*/
|
||||
|
||||
class InlineViewer {
|
||||
constructor() {
|
||||
this.setupViewer();
|
||||
this.currentFile = null;
|
||||
}
|
||||
|
||||
setupViewer() {
|
||||
// Create the viewer modal if it doesn't exist
|
||||
if (document.getElementById('inline-viewer-modal')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create modal container
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'inline-viewer-modal';
|
||||
modal.className = 'inline-viewer-modal';
|
||||
modal.innerHTML = `
|
||||
<div class="inline-viewer-content">
|
||||
<div class="inline-viewer-header">
|
||||
<div class="inline-viewer-title">File Viewer</div>
|
||||
<button class="inline-viewer-close"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="inline-viewer-container"></div>
|
||||
<div class="inline-viewer-toolbar">
|
||||
<button class="inline-viewer-download"><i class="fas fa-download"></i> Download</button>
|
||||
<div class="inline-viewer-controls">
|
||||
<button class="inline-viewer-zoom-out" title="Zoom Out"><i class="fas fa-search-minus"></i></button>
|
||||
<button class="inline-viewer-zoom-reset" title="Reset Zoom"><i class="fas fa-expand"></i></button>
|
||||
<button class="inline-viewer-zoom-in" title="Zoom In"><i class="fas fa-search-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add to document
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add event listeners
|
||||
modal.querySelector('.inline-viewer-close').addEventListener('click', () => {
|
||||
this.closeViewer();
|
||||
});
|
||||
|
||||
modal.querySelector('.inline-viewer-download').addEventListener('click', () => {
|
||||
if (this.currentFile) {
|
||||
this.downloadFile(this.currentFile);
|
||||
}
|
||||
});
|
||||
|
||||
// Add zoom controls for images
|
||||
modal.querySelector('.inline-viewer-zoom-in').addEventListener('click', () => {
|
||||
this.zoomImage(1.2);
|
||||
});
|
||||
|
||||
modal.querySelector('.inline-viewer-zoom-out').addEventListener('click', () => {
|
||||
this.zoomImage(0.8);
|
||||
});
|
||||
|
||||
modal.querySelector('.inline-viewer-zoom-reset').addEventListener('click', () => {
|
||||
this.resetZoom();
|
||||
});
|
||||
|
||||
// Close on ESC key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
||||
this.closeViewer();
|
||||
}
|
||||
});
|
||||
|
||||
// Click outside to close
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
this.closeViewer();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Inline viewer initialized');
|
||||
}
|
||||
|
||||
openFile(file) {
|
||||
console.log('Opening file:', file);
|
||||
this.currentFile = file;
|
||||
|
||||
// Get container
|
||||
const modal = document.getElementById('inline-viewer-modal');
|
||||
const container = modal.querySelector('.inline-viewer-container');
|
||||
const title = modal.querySelector('.inline-viewer-title');
|
||||
|
||||
// Clear container
|
||||
container.innerHTML = '';
|
||||
|
||||
// Set title
|
||||
title.textContent = file.name;
|
||||
|
||||
// Set controls visibility
|
||||
const controls = modal.querySelector('.inline-viewer-controls');
|
||||
|
||||
// Show viewer based on file type
|
||||
if (file.mime_type && file.mime_type.startsWith('image/')) {
|
||||
// Show zoom controls
|
||||
controls.style.display = 'flex';
|
||||
|
||||
// Show loading indicator
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'inline-viewer-loader';
|
||||
loader.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
||||
container.appendChild(loader);
|
||||
|
||||
// Create image viewer using a blob URL
|
||||
this.createBlobUrlViewer(file, 'image', container, loader);
|
||||
}
|
||||
else if (file.mime_type && file.mime_type === 'application/pdf') {
|
||||
// Hide zoom controls for PDFs
|
||||
controls.style.display = 'none';
|
||||
|
||||
// Show loading indicator
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'inline-viewer-loader';
|
||||
loader.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
||||
container.appendChild(loader);
|
||||
|
||||
// Create PDF viewer using object tag with blob URL
|
||||
this.createBlobUrlViewer(file, 'pdf', container, loader);
|
||||
}
|
||||
else {
|
||||
// Hide zoom controls for unsupported files
|
||||
controls.style.display = 'none';
|
||||
|
||||
// Show unsupported file message
|
||||
const message = document.createElement('div');
|
||||
message.className = 'inline-viewer-message';
|
||||
message.innerHTML = `
|
||||
<div class="inline-viewer-icon"><i class="fas fa-file"></i></div>
|
||||
<div class="inline-viewer-text">
|
||||
<p>Este tipo de archivo no puede ser previsualizado.</p>
|
||||
<p>Haz clic en "Descargar" para obtener el archivo.</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(message);
|
||||
}
|
||||
|
||||
// Show modal
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
// Creates a viewer using a Blob URL to avoid content-disposition header
|
||||
async createBlobUrlViewer(file, type, container, loader) {
|
||||
try {
|
||||
console.log('Creating blob URL viewer for:', file.name, 'type:', type);
|
||||
|
||||
// Use XMLHttpRequest instead of fetch to get better control over the response
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', `/api/files/${file.id}?inline=true`, true);
|
||||
xhr.responseType = 'blob';
|
||||
|
||||
// Create a promise to handle the XHR
|
||||
const response = await new Promise((resolve, reject) => {
|
||||
xhr.onload = function() {
|
||||
if (this.status >= 200 && this.status < 300) {
|
||||
resolve(this.response);
|
||||
} else {
|
||||
reject(new Error(`Error fetching file: ${this.status} ${this.statusText}`));
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
reject(new Error('Network error'));
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
|
||||
// Create blob URL from response
|
||||
const blob = response;
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
console.log('Created blob URL:', blobUrl.substring(0, 30) + '...');
|
||||
|
||||
// Remove loader
|
||||
if (loader && loader.parentNode) {
|
||||
loader.parentNode.removeChild(loader);
|
||||
}
|
||||
|
||||
if (type === 'image') {
|
||||
console.log('Creating image viewer');
|
||||
// Create image element
|
||||
const img = document.createElement('img');
|
||||
img.className = 'inline-viewer-image';
|
||||
img.src = blobUrl;
|
||||
img.alt = file.name;
|
||||
container.appendChild(img);
|
||||
|
||||
// Add loading indicator until image loads
|
||||
img.style.opacity = 0;
|
||||
img.onload = () => {
|
||||
console.log('Image loaded successfully');
|
||||
img.style.opacity = 1;
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load image');
|
||||
container.removeChild(img);
|
||||
this.showErrorMessage(container);
|
||||
};
|
||||
}
|
||||
else if (type === 'pdf') {
|
||||
console.log('Creating PDF viewer');
|
||||
|
||||
// Create iframe for PDF (more reliable than object tag)
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.className = 'inline-viewer-pdf';
|
||||
iframe.src = blobUrl;
|
||||
iframe.setAttribute('allowfullscreen', 'true');
|
||||
container.appendChild(iframe);
|
||||
|
||||
// Monitor iframe for loading issues
|
||||
setTimeout(() => {
|
||||
if (!iframe.contentDocument ||
|
||||
iframe.contentDocument.body.innerHTML === '') {
|
||||
console.warn('PDF viewer might be having issues, adding fallback');
|
||||
|
||||
// Add fallback embed
|
||||
const embed = document.createElement('embed');
|
||||
embed.className = 'inline-viewer-pdf-fallback';
|
||||
embed.type = 'application/pdf';
|
||||
embed.src = blobUrl;
|
||||
container.appendChild(embed);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Store blob URL for cleaning up later
|
||||
this.currentBlobUrl = blobUrl;
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error creating blob URL viewer:', error);
|
||||
|
||||
// Remove loader
|
||||
if (loader && loader.parentNode) {
|
||||
loader.parentNode.removeChild(loader);
|
||||
}
|
||||
|
||||
this.showErrorMessage(container);
|
||||
}
|
||||
},
|
||||
|
||||
// Helper to show error message
|
||||
showErrorMessage(container) {
|
||||
// Show error message
|
||||
const message = document.createElement('div');
|
||||
message.className = 'inline-viewer-message';
|
||||
message.innerHTML = `
|
||||
<div class="inline-viewer-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
<div class="inline-viewer-text">
|
||||
<p>Error al cargar el archivo.</p>
|
||||
<p>Intenta descargarlo directamente.</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(message);
|
||||
}
|
||||
|
||||
closeViewer() {
|
||||
// Get modal
|
||||
const modal = document.getElementById('inline-viewer-modal');
|
||||
|
||||
// Hide modal
|
||||
modal.classList.remove('active');
|
||||
|
||||
// Clean up blob URL if exists
|
||||
if (this.currentBlobUrl) {
|
||||
URL.revokeObjectURL(this.currentBlobUrl);
|
||||
this.currentBlobUrl = null;
|
||||
}
|
||||
|
||||
// Clear references
|
||||
this.currentFile = null;
|
||||
}
|
||||
|
||||
downloadFile(file) {
|
||||
// Create a link and click it
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/files/${file.id}`;
|
||||
link.download = file.name;
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
zoomImage(factor) {
|
||||
const container = document.querySelector('.inline-viewer-container');
|
||||
const img = container.querySelector('.inline-viewer-image');
|
||||
|
||||
if (!img) return;
|
||||
|
||||
// Get current scale
|
||||
let scale = img.dataset.scale ? parseFloat(img.dataset.scale) : 1.0;
|
||||
|
||||
// Apply zoom factor
|
||||
scale *= factor;
|
||||
|
||||
// Limit scale
|
||||
scale = Math.max(0.1, Math.min(5.0, scale));
|
||||
|
||||
// Save scale
|
||||
img.dataset.scale = scale;
|
||||
|
||||
// Apply scale
|
||||
img.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
resetZoom() {
|
||||
const container = document.querySelector('.inline-viewer-container');
|
||||
const img = container.querySelector('.inline-viewer-image');
|
||||
|
||||
if (!img) return;
|
||||
|
||||
// Reset scale
|
||||
img.dataset.scale = 1.0;
|
||||
img.style.transform = 'scale(1.0)';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize viewer
|
||||
window.inlineViewer = new InlineViewer();
|
||||
@@ -15,6 +15,9 @@ const ui = {
|
||||
folderMenu.className = 'context-menu';
|
||||
folderMenu.id = 'folder-context-menu';
|
||||
folderMenu.innerHTML = `
|
||||
<div class="context-menu-item" id="download-folder-option">
|
||||
<i class="fas fa-download"></i> <span data-i18n="actions.download">Descargar</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="rename-folder-option">
|
||||
<i class="fas fa-edit"></i> <span data-i18n="actions.rename">Renombrar</span>
|
||||
</div>
|
||||
@@ -37,6 +40,9 @@ const ui = {
|
||||
fileMenu.className = 'context-menu';
|
||||
fileMenu.id = 'file-context-menu';
|
||||
fileMenu.innerHTML = `
|
||||
<div class="context-menu-item" id="download-file-option">
|
||||
<i class="fas fa-download"></i> <span data-i18n="actions.download">Descargar</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="share-file-option">
|
||||
<i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user