/**
* OxiCloud - UI Module
* This file handles UI-related functions, view toggling, and interface interactions
*/
// UI Module
const ui = {
/**
* Initialize context menus and dialogs
*/
initializeContextMenus() {
// Folder context menu
if (!document.getElementById('folder-context-menu')) {
const folderMenu = document.createElement('div');
folderMenu.className = 'context-menu';
folderMenu.id = 'folder-context-menu';
folderMenu.innerHTML = `
`;
document.body.appendChild(folderMenu);
}
// File context menu
if (!document.getElementById('file-context-menu')) {
const fileMenu = document.createElement('div');
fileMenu.className = 'context-menu';
fileMenu.id = 'file-context-menu';
fileMenu.innerHTML = `
`;
document.body.appendChild(fileMenu);
}
// Rename dialog
if (!document.getElementById('rename-dialog')) {
const renameDialog = document.createElement('div');
renameDialog.className = 'rename-dialog';
renameDialog.id = 'rename-dialog';
renameDialog.innerHTML = `
Selecciona la carpeta destino:
`;
document.body.appendChild(moveDialog);
}
// Assign events to menu items
contextMenus.assignMenuEvents();
},
/**
* Set up drag and drop functionality
*/
setupDragAndDrop() {
const dropzone = document.getElementById('dropzone');
// Dropzone events
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('active');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('active');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('active');
if (e.dataTransfer.files.length > 0) {
fileOps.uploadFiles(e.dataTransfer.files);
}
});
// Document-wide drag and drop
document.addEventListener('dragover', (e) => {
e.preventDefault();
if (e.dataTransfer.types.includes('Files')) {
dropzone.style.display = 'block';
dropzone.classList.add('active');
}
});
document.addEventListener('dragleave', (e) => {
if (e.clientX <= 0 || e.clientY <= 0 ||
e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
dropzone.classList.remove('active');
setTimeout(() => {
if (!dropzone.classList.contains('active')) {
dropzone.style.display = 'none';
}
}, 100);
}
});
document.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('active');
if (e.dataTransfer.files.length > 0) {
fileOps.uploadFiles(e.dataTransfer.files);
}
setTimeout(() => {
dropzone.style.display = 'none';
}, 500);
});
},
/**
* Switch to grid view
*/
switchToGridView() {
const filesGrid = document.getElementById('files-grid');
const filesListView = document.getElementById('files-list-view');
const gridViewBtn = document.getElementById('grid-view-btn');
const listViewBtn = document.getElementById('list-view-btn');
filesGrid.style.display = 'grid';
filesListView.style.display = 'none';
gridViewBtn.classList.add('active');
listViewBtn.classList.remove('active');
window.app.currentView = 'grid';
localStorage.setItem('oxicloud-view', 'grid');
},
/**
* Switch to list view
*/
switchToListView() {
const filesGrid = document.getElementById('files-grid');
const filesListView = document.getElementById('files-list-view');
const gridViewBtn = document.getElementById('grid-view-btn');
const listViewBtn = document.getElementById('list-view-btn');
filesGrid.style.display = 'none';
filesListView.style.display = 'flex';
gridViewBtn.classList.remove('active');
listViewBtn.classList.add('active');
window.app.currentView = 'list';
localStorage.setItem('oxicloud-view', 'list');
},
/**
* Update breadcrumb navigation
* @param {string} folderName - Name of the current folder
*/
updateBreadcrumb(folderName) {
const breadcrumb = document.querySelector('.breadcrumb');
breadcrumb.innerHTML = '';
// Get user info to help determine home folder
const USER_DATA_KEY = 'oxicloud_user';
const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
const username = userData.username || '';
// Create the home item - for users, this is their personal folder
const homeItem = document.createElement('span');
homeItem.className = 'breadcrumb-item';
// Helper function to safely get translation text
const getTranslatedText = (key, defaultValue) => {
if (!window.i18n || !window.i18n.t) return defaultValue;
return window.i18n.t(key);
};
// Set appropriate text for home item
if (username && folderName && folderName.includes(username)) {
// If the current folder is the user's home folder, label it as "Home"
homeItem.textContent = getTranslatedText('breadcrumb.home', 'Home');
} else if (folderName && folderName.startsWith('Mi Carpeta')) {
// If the current folder is another user's home folder or a special folder, use its name
homeItem.textContent = folderName;
} else {
// Default - use "Home" label
homeItem.textContent = getTranslatedText('breadcrumb.home', 'Home');
// For searching, we might have a custom breadcrumb text
if (folderName && folderName.startsWith('Búsqueda:')) {
// We're in search mode - don't add click handler
breadcrumb.appendChild(homeItem);
return;
}
}
// Add click handler - but only if we have a user home folder to return to
if (window.app.userHomeFolderId) {
homeItem.addEventListener('click', () => {
window.app.currentPath = window.app.userHomeFolderId;
this.updateBreadcrumb(window.app.userHomeFolderName || 'Home');
window.loadFiles();
});
}
breadcrumb.appendChild(homeItem);
// If we have a subfolder, add it to the breadcrumb
if (folderName && !folderName.startsWith('Mi Carpeta') && !folderName.startsWith('Búsqueda:')) {
const separator = document.createElement('span');
separator.className = 'breadcrumb-separator';
separator.textContent = '>';
breadcrumb.appendChild(separator);
const folderItem = document.createElement('span');
folderItem.className = 'breadcrumb-item';
folderItem.textContent = folderName;
breadcrumb.appendChild(folderItem);
}
},
/**
* Show notification
* @param {string} title - Notification title
* @param {string} message - Notification message
*/
showNotification(title, message) {
let notification = document.querySelector('.notification');
if (!notification) {
notification = document.createElement('div');
notification.className = 'notification';
notification.innerHTML = `