File Manager & Text Editor

Home

No file opened

Ready

Line 1, Column 1 0 characters

\n\n', size: 0, type: 'html', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }, { id: generateId(), name: 'style.css', path: '/documents/style.css', content: '/* Sample CSS File */\n\nbody {\n font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f5f5f5;\n color: #333;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.header {\n background-color: #2c3e50;\n color: white;\n padding: 1rem 0;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.btn {\n display: inline-block;\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n}\n\n.btn:hover {\n background-color: #2980b9;\n}', size: 0, type: 'css', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }, { id: generateId(), name: 'script.js', path: '/documents/script.js', content: '// Sample JavaScript File\n\n// DOM Content Loaded\ndocument.addEventListener("DOMContentLoaded", function() {\n console.log("Application initialized");\n \n // Initialize components\n initializeApp();\n});\n\n// Initialize application\nfunction initializeApp() {\n // Setup event listeners\n setupEventListeners();\n \n // Load user data\n loadUserData();\n \n // Render UI\n renderUI();\n}\n\n// Setup event listeners\nfunction setupEventListeners() {\n // Button click events\n document.querySelectorAll(".btn").forEach(button => {\n button.addEventListener("click", handleButtonClick);\n });\n \n // Form submit events\n document.querySelectorAll("form").forEach(form => {\n form.addEventListener("submit", handleFormSubmit);\n });\n}\n\n// Handle button click\nfunction handleButtonClick(event) {\n const button = event.target;\n const action = button.dataset.action;\n \n switch(action) {\n case "save":\n saveData();\n break;\n case "load":\n loadData();\n break;\n case "delete":\n deleteData();\n break;\n default:\n console.log("Unknown action:", action);\n }\n}\n\n// Save data\nfunction saveData() {\n const data = collectFormData();\n localStorage.setItem("appData", JSON.stringify(data));\n showNotification("Data saved successfully!");\n}\n\n// Load data\nfunction loadData() {\n const data = localStorage.getItem("appData");\n if (data) {\n const parsedData = JSON.parse(data);\n populateForm(parsedData);\n showNotification("Data loaded successfully!");\n } else {\n showNotification("No data found", "warning");\n }\n}\n\n// Show notification\nfunction showNotification(message, type = "success") {\n const notification = document.createElement("div");\n notification.className = `notification ${type}`;\n notification.textContent = message;\n \n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n}', size: 0, type: 'js', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }, { id: generateId(), name: 'data.json', path: '/documents/data.json', content: '{\n "name": "Sample Project",\n "version": "1.0.0",\n "description": "A sample JSON configuration file",\n "author": {\n "name": "John Doe",\n "email": "john.doe@example.com"\n },\n "settings": {\n "theme": "light",\n "language": "en",\n "autoSave": true,\n "notifications": true\n },\n "features": [\n "File management",\n "Text editing",\n "Syntax highlighting",\n "Auto-save"\n ],\n "dependencies": {\n "jquery": "^3.6.0",\n "bootstrap": "^5.2.0",\n "fontawesome": "^6.0.0"\n }\n}', size: 0, type: 'json', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() } ]; saveFileSystem(); } } // Save file system to localStorage function saveFileSystem() { const data = { files: app.files, folders: app.folders }; localStorage.setItem('fileSystemData', JSON.stringify(data)); } // Build folder tree function buildFolderTree() { elements.folderTree.innerHTML = ''; // Add root folder const rootFolder = createFolderTreeItem({ id: 'root', name: 'Home', path: '/', parent: null }); elements.folderTree.appendChild(rootFolder); // Build tree recursively buildFolderTreeRecursive('/', rootFolder); } // Build folder tree recursively function buildFolderTreeRecursive(parentPath, parentElement) { const subfolders = app.folders.filter(f => f.parent === parentPath); subfolders.forEach(folder => { const folderElement = createFolderTreeItem(folder); parentElement.appendChild(folderElement); // Add children buildFolderTreeRecursive(folder.path, folderElement); }); } // Create folder tree item function createFolderTreeItem(folder) { const item = document.createElement('div'); item.className = 'folder-item'; item.dataset.path = folder.path; if (folder.path === app.currentPath) { item.classList.add('active'); } // Check if folder has children const hasChildren = app.folders.some(f => f.parent === folder.path); item.innerHTML = ` ${folder.name} `; // Add click event item.addEventListener('click', (e) => { e.stopPropagation(); if (hasChildren) { const chevron = item.querySelector('.fa-chevron-right'); const children = item.querySelector('.folder-children'); if (children) { children.classList.toggle('show'); chevron.style.transform = children.classList.contains('show') ? 'rotate(90deg)' : ''; } } navigateToPath(folder.path); }); // Add children container if (hasChildren) { const childrenContainer = document.createElement('div'); childrenContainer.className = 'folder-children'; item.appendChild(childrenContainer); } return item; } // Navigate to path function navigateToPath(path) { app.currentPath = path; // Update breadcrumb updateBreadcrumb(path); // Update folder tree active state document.querySelectorAll('.folder-item').forEach(item => { item.classList.remove('active'); if (item.dataset.path === path) { item.classList.add('active'); } }); // Update current folder title if (path === '/') { elements.currentFolderTitle.textContent = 'Home'; } else { const folder = app.folders.find(f => f.path === path); elements.currentFolderTitle.textContent = folder ? folder.name : path; } // Load files in this folder loadFilesInPath(path); } // Update breadcrumb function updateBreadcrumb(path) { elements.breadcrumb.innerHTML = ''; const parts = path.split('/').filter(p => p); let currentPath = ''; // Add home const homeItem = createBreadcrumbItem('/', 'Home'); elements.breadcrumb.appendChild(homeItem); // Add path parts parts.forEach((part, index) => { currentPath += '/' + part; const folder = app.folders.find(f => f.path === currentPath); const name = folder ? folder.name : part; const separator = document.createElement('span'); separator.className = 'breadcrumb-separator'; separator.textContent = '/'; elements.breadcrumb.appendChild(separator); const item = createBreadcrumbItem(currentPath, name); elements.breadcrumb.appendChild(item); }); } // Create breadcrumb item function createBreadcrumbItem(path, name) { const item = document.createElement('span'); item.className = 'breadcrumb-item'; item.dataset.path = path; item.textContent = name; item.addEventListener('click', () => { navigateToPath(path); }); return item; } // Load files in path function loadFilesInPath(path) { const filesInPath = app.files.filter(f => { const filePath = f.path.substring(0, f.path.lastIndexOf('/')); return filePath === path; }); const foldersInPath = app.folders.filter(f => f.parent === path); // Clear container elements.filesContainer.innerHTML = ''; // Add folders foldersInPath.forEach(folder => { const folderElement = createFileItem({ id: folder.id, name: folder.name, path: folder.path, isFolder: true, size: 0, type: 'folder', createdAt: folder.createdAt || new Date().toISOString(), updatedAt: folder.updatedAt || new Date().toISOString() }); elements.filesContainer.appendChild(folderElement); }); // Add files filesInPath.forEach(file => { const fileElement = createFileItem(file); elements.filesContainer.appendChild(fileElement); }); // Show empty state if no items if (filesInPath.length === 0 && foldersInPath.length === 0) { elements.filesContainer.innerHTML = `

Empty Folder

This folder is empty. Upload files or create new ones to get started.

`; } } // Create file item function createFileItem(file) { const item = document.createElement('div'); item.className = 'file-item'; item.dataset.id = file.id; item.dataset.path = file.path; item.dataset.type = file.type || 'folder'; item.dataset.isFolder = file.isFolder || false; if (app.selectedItems.has(file.id)) { item.classList.add('selected'); } const fileType = file.isFolder ? 'folder' : getFileType(file.name); const icon = file.isFolder ? 'fas fa-folder' : fileType.icon; const size = file.isFolder ? '' : formatFileSize(file.size); item.innerHTML = `

${file.name}

${size ? `

${size}

` : ''}

`; // Add click event item.addEventListener('dblclick', () => { if (file.isFolder) { navigateToPath(file.path); } else { openFile(file); } }); // Add selection event item.addEventListener('click', (e) => { if (e.ctrlKey || e.metaKey) { toggleSelection(file.id); } else if (e.shiftKey && app.selectedItems.size > 0) { selectRange(file.id); } else { clearSelection(); toggleSelection(file.id); } }); return item; } // Get file type function getFileType(fileName) { const extension = fileName.split('.').pop().toLowerCase(); return fileTypes[extension] || fileTypes.default; } // Format file size function formatFileSize(bytes) { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; } // Toggle selection function toggleSelection(id) { if (app.selectedItems.has(id)) { app.selectedItems.delete(id); } else { app.selectedItems.add(id); } updateSelectionUI(); } // Clear selection function clearSelection() { app.selectedItems.clear(); updateSelectionUI(); } // Select range function selectRange(endId) { const items = Array.from(document.querySelectorAll('.file-item')); const endItem = document.querySelector(`[data-id="${endId}"]`); if (!endItem) return; const lastSelectedId = Array.from(app.selectedItems).pop(); const lastItem = document.querySelector(`[data-id="${lastSelectedId}"]`); if (!lastItem) { toggleSelection(endId); return; } const startIndex = items.indexOf(lastItem); const endIndex = items.indexOf(endItem); const minIndex = Math.min(startIndex, endIndex); const maxIndex = Math.max(startIndex, endIndex); clearSelection(); for (let i = minIndex; i <= maxIndex; i++) { const id = items[i].dataset.id; app.selectedItems.add(id); } updateSelectionUI(); } // Update selection UI function updateSelectionUI() { document.querySelectorAll('.file-item').forEach(item => { const id = item.dataset.id; if (app.selectedItems.has(id)) { item.classList.add('selected'); } else { item.classList.remove('selected'); } }); } // Open file function openFile(file) { const fileType = getFileType(file.name); // Check if file is editable if (!fileType.editable) { // For media files, open in new tab if (fileType.category === 'image' || fileType.category === 'video' || fileType.category === 'audio') { if (file.content) { // Create blob URL and open in new tab const blob = new Blob([file.content], { type: getMimeType(file.name) }); const url = URL.createObjectURL(blob); window.open(url, '_blank'); } else { showToast('Cannot open media file: no content available', 'error'); } } else { showToast(`Cannot edit ${fileType.category} files`, 'warning'); } return; } // Check if file is already open in a tab const existingTab = app.openTabs.find(t => t.id === file.id); if (existingTab) { switchToTab(existingTab.id); return; } // Create new tab const tab = { id: file.id, name: file.name, path: file.path, content: file.content || '', type: file.type, isDirty: false }; app.openTabs.push(tab); app.activeTab = tab.id; // Update UI updateTabsUI(); switchToTab(file.id); // Show editor elements.fileGrid.style.display = 'none'; elements.editorContainer.classList.add('active'); } // Get MIME type function getMimeType(fileName) { const extension = fileName.split('.').pop().toLowerCase(); const mimeTypes = { 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'png': 'image/png', 'gif': 'image/gif', 'bmp': 'image/bmp', 'svg': 'image/svg+xml', 'webp': 'image/webp', 'mp4': 'video/mp4', 'webm': 'video/webm', 'ogg': 'video/ogg', 'mp3': 'audio/mpeg', 'wav': 'audio/wav', 'ogg': 'audio/ogg' }; return mimeTypes[extension] || 'text/plain'; } // Update tabs UI function updateTabsUI() { elements.editorTabs.innerHTML = ''; app.openTabs.forEach(tab => { const tabElement = document.createElement('div'); tabElement.className = 'editor-tab'; if (tab.id === app.activeTab) { tabElement.classList.add('active'); } tabElement.innerHTML = ` ${tab.name}${tab.isDirty ? ' *' : ''} `; // Add click events tabElement.querySelector('.editor-tab-name').addEventListener('click', () => { switchToTab(tab.id); }); tabElement.querySelector('.editor-tab-close').addEventListener('click', (e) => { e.stopPropagation(); closeTab(tab.id); }); elements.editorTabs.appendChild(tabElement); }); } // Switch to tab function switchToTab(tabId) { const tab = app.openTabs.find(t => t.id === tabId); if (!tab) return; // Save current tab if dirty if (app.activeTab && app.isDirty) { saveCurrentTab(); } app.activeTab = tabId; // Update UI updateTabsUI(); // Load file content elements.editorPath.textContent = tab.path; elements.editorContent.innerText = tab.content; // Set editor class based on file type elements.editorContent.className = 'editor-content'; if (tab.type === 'html') { elements.editorContent.classList.add('html'); } // Update file info updateFileInfo(); updateCursorPosition(); // Reset dirty state app.isDirty = false; updateSaveIndicator('ready', 'Ready'); } // Close tab function closeTab(tabId) { const tabIndex = app.openTabs.findIndex(t => t.id === tabId); if (tabIndex === -1) return; const tab = app.openTabs[tabIndex]; // Check if dirty if (tab.isDirty) { if (!confirm(`You have unsaved changes in "${tab.name}". Are you sure you want to close?`)) { return; } } // Remove tab app.openTabs.splice(tabIndex, 1); // If closing active tab, switch to another if (app.activeTab === tabId) { if (app.openTabs.length > 0) { const newActiveIndex = Math.min(tabIndex, app.openTabs.length - 1); switchToTab(app.openTabs[newActiveIndex].id); } else { // No more tabs, hide editor elements.editorContainer.classList.remove('active'); elements.fileGrid.style.display = 'block'; app.activeTab = null; } } updateTabsUI(); } // Close editor function closeEditor() { if (app.activeTab) { closeTab(app.activeTab); } } // Handle editor input function handleEditorInput() { if (!app.activeTab) return; const tab = app.openTabs.find(t => t.id === app.activeTab); if (!tab) return; // Update tab content tab.content = elements.editorContent.innerText; tab.isDirty = true; app.isDirty = true; // Update UI updateTabsUI(); updateFileInfo(); scheduleAutoSave(); } // Schedule auto-save function scheduleAutoSave() { if (app.autoSaveTimer) { clearTimeout(app.autoSaveTimer); } app.autoSaveTimer = setTimeout(() => { if (app.isDirty && app.activeTab) { saveCurrentTab(); } }, 2000); updateSaveIndicator('saving', 'Saving...'); } // Save current tab function saveCurrentTab() { if (!app.activeTab) return; const tab = app.openTabs.find(t => t.id === app.activeTab); if (!tab) return; // Find and update file const fileIndex = app.files.findIndex(f => f.id === tab.id); if (fileIndex !== -1) { app.files[fileIndex].content = tab.content; app.files[fileIndex].updatedAt = new Date().toISOString(); app.files[fileIndex].size = new Blob([tab.content]).size; } // Update tab tab.isDirty = false; app.isDirty = false; // Save to localStorage saveFileSystem(); // Update UI updateTabsUI(); updateSaveIndicator('saved', 'Saved'); showToast(`File "${tab.name}" saved`); } // Save current file function saveCurrentFile() { saveCurrentTab(); } // Download current file function downloadCurrentFile() { if (!app.activeTab) return; const tab = app.openTabs.find(t => t.id === app.activeTab); if (!tab) return; // Create blob const blob = new Blob([tab.content], { type: 'text/plain' }); // Create download link const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = tab.name; document.body.appendChild(a); a.click(); document.body.removeChild(a); // Clean up URL.revokeObjectURL(url); showToast(`File "${tab.name}" downloaded`); } // Update save indicator function updateSaveIndicator(status, text) { elements.saveIndicator.className = 'save-indicator'; if (status === 'saving') { elements.saveIndicator.classList.add('saving'); elements.saveIndicator.querySelector('i').className = 'fas fa-circle-notch fa-spin'; } else if (status === 'saved') { elements.saveIndicator.classList.add('saved'); elements.saveIndicator.querySelector('i').className = 'fas fa-check-circle'; } else { elements.saveIndicator.querySelector('i').className = 'fas fa-circle'; } elements.saveStatus.textContent = text; } // Update file info function updateFileInfo() { if (!app.activeTab) return; const content = elements.editorContent.innerText; const charCount = content.length; const wordCount = content.trim() ? content.trim().split(/\s+/).length : 0; const lineCount = content.split('\n').length; elements.fileInfo.textContent = `${charCount} characters, ${wordCount} words, ${lineCount} lines`; } // Update cursor position function updateCursorPosition() { if (!app.activeTab) return; const content = elements.editorContent.innerText; const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); const preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(elements.editorContent); preCaretRange.setEnd(range.endContainer, range.endOffset); const position = preCaretRange.toString().length; const lines = content.substring(0, position).split('\n'); const line = lines.length; const column = lines[lines.length - 1].length + 1; elements.cursorPosition.textContent = `Line ${line}, Column ${column}`; } } // Switch view function switchView(view) { app.currentView = view; // Update buttons document.querySelectorAll('.view-btn').forEach(btn => { btn.classList.remove('active'); if (btn.dataset.view === view) { btn.classList.add('active'); } }); // Update container if (view === 'list') { elements.filesContainer.classList.add('list-view'); } else { elements.filesContainer.classList.remove('list-view'); } } // Show upload modal function showUploadModal() { elements.uploadList.innerHTML = ''; openModal(elements.uploadModal); } // Handle file select function handleFileSelect(e) { const files = Array.from(e.target.files); processFiles(files); } // Handle drag over function handleDragOver(e) { e.preventDefault(); elements.dropZone.classList.add('dragover'); } // Handle drag leave function handleDragLeave(e) { e.preventDefault(); elements.dropZone.classList.remove('dragover'); } // Handle drop function handleDrop(e) { e.preventDefault(); elements.dropZone.classList.remove('dragover'); const files = Array.from(e.dataTransfer.files); processFiles(files); } // Process files function processFiles(files) { elements.uploadList.innerHTML = ''; files.forEach(file => { const reader = new FileReader(); reader.onload = function(e) { const content = e.target.result; const newFile = { id: generateId(), name: file.name, path: app.currentPath === '/' ? `/${file.name}` : `${app.currentPath}/${file.name}`, content: content, size: file.size, type: file.name.split('.').pop().toLowerCase(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.files.push(newFile); // Update UI const fileItem = document.createElement('div'); fileItem.className = 'file-item'; fileItem.innerHTML = ` ${file.name} `; elements.uploadList.appendChild(fileItem); // Refresh file list loadFilesInPath(app.currentPath); }; reader.readAsText(file); }); // Save to localStorage saveFileSystem(); // Show success message setTimeout(() => { closeModal(elements.uploadModal); showToast(`${files.length} file(s) uploaded successfully`); }, 1000); } // Show new file modal function showNewFileModal() { elements.newFileName.value = 'untitled.txt'; openModal(elements.newFileModal); setTimeout(() => { elements.newFileName.focus(); elements.newFileName.select(); }, 100); } // Create new file function createNewFile() { const name = elements.newFileName.value.trim(); const type = elements.newFileType.value; if (!name) { showToast('Please enter a file name', 'error'); return; } // Check if file already exists const path = app.currentPath === '/' ? `/${name}` : `${app.currentPath}/${name}`; const existingFile = app.files.find(f => f.path === path); if (existingFile) { showToast('A file with this name already exists', 'error'); return; } // Create new file const newFile = { id: generateId(), name: name, path: path, content: getDefaultContent(type), size: 0, type: type, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.files.push(newFile); saveFileSystem(); // Close modal closeModal(elements.newFileModal); // Refresh file list loadFilesInPath(app.currentPath); // Open file for editing openFile(newFile); showToast(`File "${name}" created`); } // Get default content for file type function getDefaultContent(type) { const templates = { 'html': '\n\n\n \n \n Document\n\n\n \n\n', 'css': '/* CSS Styles */\n\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n', 'js': '// JavaScript Code\n\nconsole.log("Hello, World!");\n', 'json': '{\n \n}', 'md': '# Markdown Document\n\n## Section\n\nContent goes here...\n', 'xml': '\n\n \n', 'csv': 'Column1,Column2,Column3\nValue1,Value2,Value3\n', 'txt': '' }; return templates[type] || ''; } // Show new folder modal function showNewFolderModal() { elements.newFolderName.value = ''; openModal(elements.newFolderModal); setTimeout(() => { elements.newFolderName.focus(); }, 100); } // Create new folder function createNewFolder() { const name = elements.newFolderName.value.trim(); if (!name) { showToast('Please enter a folder name', 'error'); return; } // Check if folder already exists const path = app.currentPath === '/' ? `/${name}` : `${app.currentPath}/${name}`; const existingFolder = app.folders.find(f => f.path === path); if (existingFolder) { showToast('A folder with this name already exists', 'error'); return; } // Create new folder const newFolder = { id: generateId(), name: name, path: path, parent: app.currentPath, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.folders.push(newFolder); saveFileSystem(); // Close modal closeModal(elements.newFolderModal); // Refresh folder tree and file list buildFolderTree(); loadFilesInPath(app.currentPath); showToast(`Folder "${name}" created`); } // Handle context menu function handleContextMenu(e) { e.preventDefault(); const fileItem = e.target.closest('.file-item'); if (!fileItem) return; const id = fileItem.dataset.id; const isFolder = fileItem.dataset.isFolder === 'true'; // Select the item if not already selected if (!app.selectedItems.has(id)) { clearSelection(); toggleSelection(id); } // Update context menu const contextOpen = document.getElementById('context-open'); const contextEdit = document.getElementById('context-edit'); if (isFolder) { contextOpen.style.display = 'block'; contextEdit.style.display = 'none'; } else { const file = app.files.find(f => f.id === id); const fileType = file ? getFileType(file.name) : null; contextOpen.style.display = 'none'; contextEdit.style.display = fileType && fileType.editable ? 'block' : 'none'; } // Show context menu elements.contextMenu.style.left = `${e.pageX}px`; elements.contextMenu.style.top = `${e.pageY}px`; elements.contextMenu.classList.add('show'); } // Handle context open function handleContextOpen() { const id = Array.from(app.selectedItems)[0]; const folder = app.folders.find(f => f.id === id); if (folder) { navigateToPath(folder.path); } elements.contextMenu.classList.remove('show'); } // Handle context edit function handleContextEdit() { const id = Array.from(app.selectedItems)[0]; const file = app.files.find(f => f.id === id); if (file) { openFile(file); } elements.contextMenu.classList.remove('show'); } // Handle context rename function handleContextRename() { const id = Array.from(app.selectedItems)[0]; const item = document.querySelector(`[data-id="${id}"]`); if (!item) return; const nameElement = item.querySelector('.file-name'); const currentName = nameElement.textContent; const input = document.createElement('input'); input.type = 'text'; input.value = currentName; input.className = 'form-control'; input.style.padding = '5px'; nameElement.innerHTML = ''; nameElement.appendChild(input); input.focus(); input.select(); const saveRename = () => { const newName = input.value.trim(); if (newName && newName !== currentName) { // Check if it's a file or folder const file = app.files.find(f => f.id === id); const folder = app.folders.find(f => f.id === id); if (file) { const newPath = file.path.substring(0, file.path.lastIndexOf('/')) + '/' + newName; // Check if file already exists if (app.files.some(f => f.path === newPath)) { showToast('A file with this name already exists', 'error'); nameElement.textContent = currentName; return; } file.name = newName; file.path = newPath; } else if (folder) { const newPath = folder.path.substring(0, folder.path.lastIndexOf('/')) + '/' + newName; // Check if folder already exists if (app.folders.some(f => f.path === newPath)) { showToast('A folder with this name already exists', 'error'); nameElement.textContent = currentName; return; } folder.name = newName; folder.path = newPath; // Update children paths updateChildrenPaths(folder.path, newPath); } saveFileSystem(); loadFilesInPath(app.currentPath); buildFolderTree(); showToast('Renamed successfully'); } else { nameElement.textContent = currentName; } }; input.addEventListener('blur', saveRename); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); saveRename(); } else if (e.key === 'Escape') { nameElement.textContent = currentName; } }); elements.contextMenu.classList.remove('show'); } // Update children paths function updateChildrenPaths(oldPath, newPath) { // Update folders app.folders.forEach(folder => { if (folder.parent === oldPath) { folder.parent = newPath; folder.path = newPath + '/' + folder.name; updateChildrenPaths(oldPath, folder.path); } }); // Update files app.files.forEach(file => { if (file.path.startsWith(oldPath + '/')) { file.path = file.path.replace(oldPath, newPath); } }); } // Handle context duplicate function handleContextDuplicate() { const ids = Array.from(app.selectedItems); ids.forEach(id => { const file = app.files.find(f => f.id === id); const folder = app.folders.find(f => f.id === id); if (file) { const newFile = { ...file, id: generateId(), name: `Copy of ${file.name}`, path: file.path.replace(file.name, `Copy of ${file.name}`), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.files.push(newFile); } else if (folder) { const newFolder = { ...folder, id: generateId(), name: `Copy of ${folder.name}`, path: folder.path.replace(folder.name, `Copy of ${folder.name}`), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.folders.push(newFolder); // Duplicate folder contents duplicateFolderContents(folder.path, newFolder.path); } }); saveFileSystem(); loadFilesInPath(app.currentPath); buildFolderTree(); showToast(`${ids.length} item(s) duplicated`); elements.contextMenu.classList.remove('show'); } // Duplicate folder contents function duplicateFolderContents(sourcePath, targetPath) { // Duplicate files const filesInFolder = app.files.filter(f => { const filePath = f.path.substring(0, f.path.lastIndexOf('/')); return filePath === sourcePath; }); filesInFolder.forEach(file => { const newFile = { ...file, id: generateId(), path: file.path.replace(sourcePath, targetPath), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.files.push(newFile); }); // Duplicate subfolders const subfolders = app.folders.filter(f => f.parent === sourcePath); subfolders.forEach(folder => { const newFolder = { ...folder, id: generateId(), path: folder.path.replace(sourcePath, targetPath), parent: targetPath, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; app.folders.push(newFolder); // Recursively duplicate contents duplicateFolderContents(folder.path, newFolder.path); }); } // Handle context download function handleContextDownload() { const ids = Array.from(app.selectedItems); ids.forEach(id => { const file = app.files.find(f => f.id === id); if (file) { // Create blob const blob = new Blob([file.content], { type: 'text/plain' }); // Create download link const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = file.name; document.body.appendChild(a); a.click(); document.body.removeChild(a); // Clean up URL.revokeObjectURL(url); } }); showToast(`${ids.length} file(s) downloaded`); elements.contextMenu.classList.remove('show'); } // Handle context delete function handleContextDelete() { const ids = Array.from(app.selectedItems); if (!confirm(`Are you sure you want to delete ${ids.length} item(s)?`)) { return; } ids.forEach(id => { // Remove file const fileIndex = app.files.findIndex(f => f.id === id); if (fileIndex !== -1) { app.files.splice(fileIndex, 1); } // Remove folder const folderIndex = app.folders.findIndex(f => f.id === id); if (folderIndex !== -1) { const folder = app.folders[folderIndex]; // Remove folder contents deleteFolderContents(folder.path); // Remove folder app.folders.splice(folderIndex, 1); } // Close tab if open const tabIndex = app.openTabs.findIndex(t => t.id === id); if (tabIndex !== -1) { closeTab(id); } }); saveFileSystem(); loadFilesInPath(app.currentPath); buildFolderTree(); clearSelection(); showToast(`${ids.length} item(s) deleted`); elements.contextMenu.classList.remove('show'); } // Delete folder contents function deleteFolderContents(folderPath) { // Delete files in folder app.files = app.files.filter(file => { const filePath = file.path.substring(0, file.path.lastIndexOf('/')); return filePath !== folderPath; }); // Delete subfolders const subfolders = app.folders.filter(f => f.parent === folderPath); subfolders.forEach(folder => { deleteFolderContents(folder.path); // Remove folder const index = app.folders.findIndex(f => f.id === folder.id); if (index !== -1) { app.folders.splice(index, 1); } }); } // Toggle sidebar function toggleSidebar() { elements.sidebar.classList.toggle('open'); } // Open modal function openModal(modal) { modal.style.display = 'block'; setTimeout(() => { modal.classList.add('show'); }, 10); } // Close modal function closeModal(modal) { modal.classList.remove('show'); setTimeout(() => { modal.style.display = 'none'; }, 300); } // Show toast function showToast(message, type = 'success', duration = 3000) { elements.toast.textContent = message; elements.toast.className = 'toast show'; if (type !== 'success') { elements.toast.classList.add(type); } setTimeout(() => { elements.toast.classList.remove('show'); }, duration); } // Handle resize function handleResize() { if (window.innerWidth > 768) { elements.sidebar.classList.remove('open'); } } // Handle before unload function handleBeforeUnload(e) { const dirtyTabs = app.openTabs.filter(t => t.isDirty); if (dirtyTabs.length > 0) { e.preventDefault(); e.returnValue = 'You have unsaved changes. Are you sure you want to leave?'; } } // Handle keyboard shortcuts function handleKeyboardShortcuts(e) { // Ctrl/Cmd + S: Save if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); if (app.activeTab) { saveCurrentTab(); } } // Ctrl/Cmd + N: New file if ((e.ctrlKey || e.metaKey) && e.key === 'n') { e.preventDefault(); showNewFileModal(); } // Ctrl/Cmd + Shift + N: New folder if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'N') { e.preventDefault(); showNewFolderModal(); } // Ctrl/Cmd + O: Open file if ((e.ctrlKey || e.metaKey) && e.key === 'o') { e.preventDefault(); elements.fileInput.click(); } // Ctrl/Cmd + W: Close tab if ((e.ctrlKey || e.metaKey) && e.key === 'w') { e.preventDefault(); if (app.activeTab) { closeTab(app.activeTab); } } // Ctrl/Cmd + Tab: Next tab if ((e.ctrlKey || e.metaKey) && e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); if (app.openTabs.length > 1) { const currentIndex = app.openTabs.findIndex(t => t.id === app.activeTab); const nextIndex = (currentIndex + 1) % app.openTabs.length; switchToTab(app.openTabs[nextIndex].id); } } // Ctrl/Cmd + Shift + Tab: Previous tab if ((e.ctrlKey || e.metaKey) && e.key === 'Tab' && e.shiftKey) { e.preventDefault(); if (app.openTabs.length > 1) { const currentIndex = app.openTabs.findIndex(t => t.id === app.activeTab); const prevIndex = (currentIndex - 1 + app.openTabs.length) % app.openTabs.length; switchToTab(app.openTabs[prevIndex].id); } } // F2: Rename if (e.key === 'F2' && app.selectedItems.size === 1) { e.preventDefault(); handleContextRename(); } // Delete: Delete selected items if (e.key === 'Delete' && app.selectedItems.size > 0) { e.preventDefault(); handleContextDelete(); } // Escape: Close modal or deselect if (e.key === 'Escape') { const openModal = document.querySelector('.modal.show'); if (openModal) { closeModal(openModal); } else { clearSelection(); } } } // Check URL parameters function checkUrlParams() { const urlParams = new URLSearchParams(window.location.search); const path = urlParams.get('path'); if (path) { navigateToPath(path); } } // Generate unique ID function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); } // Initialize the app when DOM is loaded document.addEventListener('DOMContentLoaded', init);

File Manager

Folders

Home

Upload Files

Create New File

Create New Folder

Empty Folder