Edouard Vanbelle
322 lines
11 KiB
JavaScript
322 lines
11 KiB
JavaScript
/**
|
|
* OxiCloud - View navigation actions
|
|
* Extracted from main.js to keep navigation concerns isolated.
|
|
*/
|
|
|
|
/**
|
|
* Sync the hidden class and inline display for the grid/list containers
|
|
* based on the current view preference.
|
|
*/
|
|
function syncViewContainers() {
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
const isGrid = window.app.currentView === 'grid';
|
|
if (filesGrid) {
|
|
filesGrid.style.display = isGrid ? 'grid' : 'none';
|
|
filesGrid.classList.toggle('hidden', !isGrid);
|
|
}
|
|
if (filesListView) {
|
|
filesListView.style.display = isGrid ? 'none' : 'flex';
|
|
filesListView.classList.toggle('hidden', isGrid);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hide both grid and list containers (used when switching to non-file views).
|
|
*/
|
|
function hideFileContainers() {
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) { filesGrid.style.display = 'none'; filesGrid.classList.add('hidden'); }
|
|
if (filesListView) { filesListView.style.display = 'none'; filesListView.classList.add('hidden'); }
|
|
}
|
|
|
|
/**
|
|
* Mobile sidebar toggle functionality
|
|
*/
|
|
function initSidebarToggle() {
|
|
const sidebarToggle = document.getElementById('sidebar-toggle');
|
|
const sidebar = document.getElementById('sidebar');
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
|
|
if (!sidebarToggle || !sidebar || !sidebarOverlay) return;
|
|
|
|
function openSidebar() {
|
|
sidebar.classList.add('open');
|
|
sidebarOverlay.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeSidebar() {
|
|
sidebar.classList.remove('open');
|
|
sidebarOverlay.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
if (sidebar.classList.contains('open')) {
|
|
closeSidebar();
|
|
} else {
|
|
openSidebar();
|
|
}
|
|
}
|
|
|
|
// Toggle button click
|
|
sidebarToggle.addEventListener('click', toggleSidebar);
|
|
|
|
// Close sidebar when clicking overlay
|
|
sidebarOverlay.addEventListener('click', closeSidebar);
|
|
|
|
// Close sidebar on escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && sidebar.classList.contains('open')) {
|
|
closeSidebar();
|
|
}
|
|
});
|
|
|
|
// Close sidebar when navigating (nav item click on mobile)
|
|
const navItems = sidebar.querySelectorAll('.nav-item');
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
if (window.innerWidth <= 768) {
|
|
closeSidebar();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Expose functions globally
|
|
window.sidebarToggle = {
|
|
open: openSidebar,
|
|
close: closeSidebar,
|
|
toggle: toggleSidebar
|
|
};
|
|
}
|
|
|
|
// Initialize sidebar toggle when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', initSidebarToggle);
|
|
|
|
// Mapping of section names to their corresponding view flags
|
|
const VIEW_FLAGS = {
|
|
'files': 'isFilesView',
|
|
'shared': 'isSharedView',
|
|
'recent': 'isRecentView',
|
|
'favorites': 'isFavoritesView',
|
|
'trash': 'isTrashView',
|
|
'photos': 'isPhotosView'
|
|
};
|
|
|
|
/**
|
|
* Derive section name from nav item's data-i18n attribute.
|
|
* @param {HTMLElement} navItem - The nav item element
|
|
* @returns {string|null} - Section name or null if not found
|
|
*/
|
|
function getSectionFromNavItem(navItem) {
|
|
const i18nKey = navItem.querySelector('span[data-i18n]')?.getAttribute('data-i18n');
|
|
return i18nKey ? i18nKey.replace('nav.', '') : null;
|
|
}
|
|
|
|
/**
|
|
* Set the current active section, updating all view flags and nav UI.
|
|
* @param {string} section - The section to activate ('files', 'shared', 'recent', 'favorites', 'trash')
|
|
* @returns {boolean} true if the section changed
|
|
*/
|
|
function setCurrentSection(section) {
|
|
|
|
if (window.app.currentSection == section) return false;
|
|
|
|
// Set all view flags - true for active section, false for others
|
|
Object.entries(VIEW_FLAGS).forEach(([key, flag]) => {
|
|
window.app[flag] = (key === section);
|
|
});
|
|
|
|
window.app.currentSection = section;
|
|
|
|
// Update nav item active classes by finding matching item from DOM
|
|
window.appElements.navItems.forEach(item => {
|
|
const itemSection = getSectionFromNavItem(item);
|
|
item.classList.toggle('active', itemSection === section);
|
|
});
|
|
|
|
// Update page title
|
|
const titleKey = `nav.${section}`;
|
|
const defaultTitle = section.charAt(0).toUpperCase() + section.slice(1);
|
|
window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t(titleKey) : defaultTitle;
|
|
window.appElements.pageTitle.setAttribute('data-i18n', titleKey);
|
|
|
|
// Hide sharedView when switching to any other section
|
|
if (section !== 'shared' && window.sharedView) {
|
|
window.sharedView.hide();
|
|
}
|
|
|
|
// Hide photosView when switching to any other section
|
|
if (section !== 'photos' && window.photosView) {
|
|
window.photosView.hide();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function switchToSharedView() {
|
|
|
|
if (!setCurrentSection('shared')) return;
|
|
|
|
// Hide breadcrumb (only shown in Files view)
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = 'none';
|
|
|
|
// Hide actions-bar for shared view
|
|
window.setActionsBarMode('hidden');
|
|
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) filesGrid.style.display = 'none';
|
|
if (filesListView) filesListView.style.display = 'none';
|
|
if (filesGrid) filesGrid.classList.add('hidden');
|
|
if (filesListView) filesListView.classList.add('hidden');
|
|
|
|
// Show shared view
|
|
if (window.sharedView) {
|
|
window.sharedView.init();
|
|
window.sharedView.show();
|
|
}
|
|
}
|
|
|
|
function switchToFilesView() {
|
|
if (!setCurrentSection('files')) return;
|
|
|
|
// Set actions bar mode
|
|
window.setActionsBarMode('files', true);
|
|
|
|
// Show breadcrumb (only in Files view)
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = '';
|
|
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
|
|
if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
|
|
if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
|
|
if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
|
|
|
|
// Reset to home folder and update breadcrumb
|
|
window.app.currentPath = window.app.userHomeFolderId || '';
|
|
window.app.breadcrumbPath = [];
|
|
window.ui.updateBreadcrumb();
|
|
|
|
window.loadFiles();
|
|
}
|
|
|
|
function switchToFavoritesView() {
|
|
if (!setCurrentSection('favorites')) return;
|
|
|
|
// Set actions bar mode
|
|
window.setActionsBarMode('favorites');
|
|
|
|
// Hide breadcrumb (only shown in Files view)
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = 'none';
|
|
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
|
|
if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
|
|
if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
|
|
if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
|
|
|
|
if (window.favorites) {
|
|
window.favorites.displayFavorites();
|
|
} else {
|
|
console.error('Favorites module not loaded or initialized');
|
|
const filesGridError = document.getElementById('files-grid');
|
|
if (filesGridError) {
|
|
filesGridError.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-circle empty-state-icon error"></i>
|
|
<p>Error loading the favorites module</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchToRecentFilesView() {
|
|
if (!setCurrentSection('recent')) return;
|
|
|
|
// Set actions bar mode
|
|
window.setActionsBarMode('recent');
|
|
|
|
// Hide breadcrumb (only shown in Files view)
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = 'none';
|
|
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) filesGrid.style.display = window.app.currentView === 'grid' ? 'grid' : 'none';
|
|
if (filesGrid) filesGrid.classList.toggle('hidden', window.app.currentView !== 'grid');
|
|
if (filesListView) filesListView.style.display = window.app.currentView === 'list' ? 'flex' : 'none';
|
|
if (filesListView) filesListView.classList.toggle('hidden', window.app.currentView !== 'list');
|
|
|
|
if (window.recent) {
|
|
window.recent.displayRecentFiles();
|
|
} else {
|
|
console.error('Recent files module not loaded or initialized');
|
|
const filesGridError = document.getElementById('files-grid');
|
|
if (filesGridError) {
|
|
filesGridError.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-circle empty-state-icon error"></i>
|
|
<p>Error loading the recent files module</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchToPhotosView() {
|
|
if (!setCurrentSection('photos')) return;
|
|
|
|
// Hide breadcrumb
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = 'none';
|
|
|
|
// Hide actions-bar (photos has its own upload via selection bar)
|
|
window.setActionsBarMode('hidden');
|
|
|
|
// Hide file containers
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) { filesGrid.style.display = 'none'; filesGrid.classList.add('hidden'); }
|
|
if (filesListView) { filesListView.style.display = 'none'; filesListView.classList.add('hidden'); }
|
|
|
|
// Show photos view
|
|
if (window.photosView) {
|
|
window.photosView.show();
|
|
}
|
|
}
|
|
|
|
function switchToTrashView() {
|
|
setCurrentSection('trash');
|
|
|
|
// Hide breadcrumb (only shown in Files view)
|
|
const breadcrumb = document.querySelector('.breadcrumb');
|
|
if (breadcrumb) breadcrumb.style.display = 'none';
|
|
|
|
// Show files containers (to be filled with trash)
|
|
const filesGrid = document.getElementById('files-grid');
|
|
const filesListView = document.getElementById('files-list-view');
|
|
if (filesGrid) { filesGrid.style.display = app.currentView === 'grid' ? 'grid' : 'none'; filesGrid.classList.toggle('hidden', app.currentView !== 'grid'); }
|
|
if (filesListView) { filesListView.style.display = app.currentView === 'list' ? 'flex' : 'none'; filesListView.classList.toggle('hidden', app.currentView !== 'list'); }
|
|
|
|
setActionsBarMode('trash');
|
|
|
|
// Load trash items
|
|
window.loadTrashItems();
|
|
}
|
|
|
|
window.switchToFilesView = switchToFilesView;
|
|
window.switchToSharedView = switchToSharedView;
|
|
window.switchToFavoritesView = switchToFavoritesView;
|
|
window.switchToRecentFilesView = switchToRecentFilesView;
|
|
window.switchToPhotosView = switchToPhotosView;
|
|
window.switchToTrashView = switchToTrashView;
|