Flask-Files/app/static/js/browser.js

/**
 * File browser functionality
 */
document.addEventListener('DOMContentLoaded', function () {
    // View toggle functionality
    const filesContainer = document.getElementById('files-container');
    const gridViewBtn = document.getElementById('grid-view-btn');
    const listViewBtn = document.getElementById('list-view-btn');

    if (filesContainer && gridViewBtn && listViewBtn) {
        // Set initial view based on saved preference
        const savedView = localStorage.getItem('view_preference') || 'grid';
        filesContainer.className = `files-container ${savedView}-view`;

        // Highlight the correct button
        if (savedView === 'grid') {
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
        } else {
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
        }

        // Add event listeners
        gridViewBtn.addEventListener('click', function () {
            filesContainer.className = 'files-container grid-view';
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');

            // Save preference
            localStorage.setItem('view_preference', 'grid');
        });

        listViewBtn.addEventListener('click', function () {
            filesContainer.className = 'files-container list-view';
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');

            // Save preference
            localStorage.setItem('view_preference', 'list');
        });
    }

    // Variables for tracking selected items
    let selectedItemId = null;
    let selectedItemType = null;

    // Setup context menu functionality 
    function setupContextMenu() {
        // Context menu already implemented via context-menu.js
        // We'll just need to ensure our item actions are properly set

        // Add item click handler to set selected item
        document.querySelectorAll('.file-item, .folder-item').forEach(item => {
            item.addEventListener('click', function (e) {
                // If clicking on an action button, don't select the item
                if (e.target.closest('.item-actions') || e.target.closest('a')) {
                    return;
                }

                // Set selected item
                selectedItemId = this.dataset.id;
                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';

                // Highlight selected item
                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
                    i.classList.remove('selected');
                });
                this.classList.add('selected');
            });

            // Right-click to open context menu
            item.addEventListener('contextmenu', function (e) {
                // Set selected item
                selectedItemId = this.dataset.id;
                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';

                // Highlight selected item
                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
                    i.classList.remove('selected');
                });
                this.classList.add('selected');
            });
        });
    }

    // Handle folder creation
    const newFolderForm = document.getElementById('new-folder-form');
    if (newFolderForm) {
        newFolderForm.addEventListener('submit', function (e) {
            e.preventDefault();

            const folderName = document.getElementById('folder-name').value;
            const parentId = document.querySelector('input[name="parent_id"]').value;

            // Create FormData
            const formData = new FormData();
            formData.append('name', folderName);
            if (parentId) formData.append('parent_id', parentId);

            // Send request
            fetch('/files/create_folder', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Close modal
                        closeModal('new-folder-modal');

                        // Show success message
                        showAlert('Folder created successfully', 'success');

                        // Reload page to show new folder
                        setTimeout(() => window.location.reload(), 500);
                    } else {
                        showAlert(data.error || 'Error creating folder', 'error');
                    }
                })
                .catch(error => {
                    showAlert('Error creating folder: ' + error, 'error');
                });
        });
    }

    // Handle rename
    const renameForm = document.getElementById('rename-form');
    if (renameForm) {
        renameForm.addEventListener('submit', function (e) {
            e.preventDefault();

            const newName = document.getElementById('new-name').value;

            if (!selectedItemId) {
                showAlert('No item selected', 'error');
                return;
            }

            fetch('/files/rename', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    item_id: selectedItemId,
                    new_name: newName
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Close modal
                        closeModal('rename-modal');

                        // Show success message
                        showAlert('Item renamed successfully', 'success');

                        // Update item name in the UI or reload
                        setTimeout(() => window.location.reload(), 500);
                    } else {
                        showAlert(data.error || 'Failed to rename item', 'error');
                    }
                })
                .catch(error => {
                    showAlert('Error: ' + error, 'error');
                });
        });
    }

    // Handle delete confirmation
    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
    if (confirmDeleteBtn) {
        confirmDeleteBtn.addEventListener('click', function () {
            if (!selectedItemId) {
                showAlert('No item selected', 'error');
                closeModal('delete-modal');
                return;
            }

            fetch(`/files/delete/${selectedItemId}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Close modal
                        closeModal('delete-modal');

                        // Show success message
                        showAlert(data.message || 'Item deleted successfully', 'success');

                        // Remove the item from the UI or reload
                        setTimeout(() => window.location.reload(), 500);
                    } else {
                        showAlert(data.error || 'Failed to delete item', 'error');
                    }
                })
                .catch(error => {
                    showAlert('Error: ' + error, 'error');
                });
        });
    }

    // Initialize
    setupContextMenu();

    // Buttons to open modals
    const deleteBtn = document.getElementById('delete-btn');
    if (deleteBtn) {
        deleteBtn.addEventListener('click', function () {
            if (!selectedItemId) {
                showAlert('Please select an item first', 'warning');
                return;
            }
            openModal('delete-modal');
        });
    }

    const renameBtn = document.getElementById('rename-btn');
    if (renameBtn) {
        renameBtn.addEventListener('click', function () {
            if (!selectedItemId) {
                showAlert('Please select an item first', 'warning');
                return;
            }

            // Get current name
            const selectedItem = document.querySelector(`.file-item[data-id="${selectedItemId}"], .folder-item[data-id="${selectedItemId}"]`);
            const currentName = selectedItem ? selectedItem.querySelector('.item-name').textContent.trim() : '';

            // Set current name in the input
            document.getElementById('new-name').value = currentName;

            openModal('rename-modal');
            document.getElementById('new-name').focus();
        });
    }
});