diff options
| -rw-r--r-- | html/file-system/index.html | 163 |
1 files changed, 121 insertions, 42 deletions
diff --git a/html/file-system/index.html b/html/file-system/index.html index 8e05088..0285c67 100644 --- a/html/file-system/index.html +++ b/html/file-system/index.html @@ -147,6 +147,10 @@ content: "📁"; } + .context-menu-item.rename::before { + content: "✏️"; + } + .context-menu-item.copy::before { content: "📋"; } @@ -394,6 +398,25 @@ transform: scaleX(1) scaleY(1); } } + + .folder.editing { + padding: 0; + margin: 0; + } + + .folder.editing input { + font-size: 1em; + padding: 0.5em; + margin: 0.25em 0; + width: calc(100% - 2em); + border: 1px solid #ccc; + border-radius: 4px; + outline: none; + } + + .folder.editing input:focus { + border-color: #0078fa; + } </style> </head> <body> @@ -433,6 +456,7 @@ <div class="context-menu" id="contextMenu"> <div class="context-menu-item new-folder" onclick="createFolderPrompt()">New Folder</div> + <div class="context-menu-item rename" onclick="renameFolder()">Rename</div> <div class="context-menu-item copy" onclick="copyItem()">Copy</div> <div class="context-menu-item paste" onclick="pasteItem()">Paste</div> <div class="context-menu-item delete" onclick="deleteItem()">Delete</div> @@ -539,36 +563,30 @@ const createFolder = (path, name) => { }; const deleteItem = () => { - // Don't do anything if no folder is selected - if (!state.currentFolderPath) return; - - // Check if trying to delete root + console.log('Attempting to delete:', state.currentFolderPath); // Debug log + + // Basic validation if (state.currentFolderPath === 'root') { - alert("Can't delete the root folder!"); + alert("Can't delete root!"); return; } - // For top-level folders (direct children of root) - if (!state.currentFolderPath.includes('/')) { - const newFileSystem = clone(state.fileSystem); - delete newFileSystem.root.children[state.currentFolderPath]; - updateFileSystem(newFileSystem); - state.currentFolderPath = 'root'; - document.getElementById('editor').style.display = 'none'; - render(); - return; - } + // Get parent path and folder name + const parts = state.currentFolderPath.split('/'); + const folderName = parts[parts.length - 1]; + const parentPath = parts.slice(0, -1).join('/') || 'root'; - // For nested folders - const pathParts = state.currentFolderPath.split('/'); - const folderToDelete = pathParts.pop(); // Get the folder name to delete - const parentPath = pathParts.join('/'); // Get the parent path + console.log('Parent path:', parentPath); // Debug log + console.log('Folder to delete:', folderName); // Debug log + // Create new file system and delete the folder const newFileSystem = clone(state.fileSystem); - const parentFolder = getFolder(parentPath, newFileSystem); - - if (parentFolder && parentFolder.children) { - delete parentFolder.children[folderToDelete]; + const parent = parentPath === 'root' ? + newFileSystem.root : + getFolder(parentPath, newFileSystem); + + if (parent && parent.children) { + delete parent.children[folderName]; updateFileSystem(newFileSystem); state.currentFolderPath = parentPath; document.getElementById('editor').style.display = 'none'; @@ -661,24 +679,30 @@ const handleDrop = (e, targetPath) => { const renderFolderTree = (folder, path = 'root') => { const entries = Object.entries(folder.children); - return entries.length ? entries.map(([name, item]) => ` - <li> - <div class="folder" - onclick="selectFolder('${path}/${name}')" - oncontextmenu="showContextMenu(event, '${path}/${name}')" - draggable="true" - ondragstart="handleDragStart(event, '${path}/${name}')" - ondragend="handleDragEnd(event)" - ondragover="handleDragOver(event)" - ondragleave="handleDragLeave(event)" - ondrop="handleDrop(event, '${path}/${name}')" - >${name}</div> - <ul>${renderFolderTree(item, `${path}/${name}`)}</ul> - </li> - `).join('') : ''; + return entries.length ? entries.map(([name, item]) => { + const fullPath = path === 'root' ? name : `${path}/${name}`; + return ` + <li> + <div class="folder" + onclick="selectFolder('${fullPath}')" + oncontextmenu="showContextMenu(event, '${fullPath}')" + draggable="true" + ondragstart="handleDragStart(event, '${fullPath}')" + ondragend="handleDragEnd(event)" + ondragover="handleDragOver(event)" + ondragleave="handleDragLeave(event)" + ondrop="handleDrop(event, '${fullPath}')" + >${name}</div> + <ul>${renderFolderTree(item, fullPath)}</ul> + </li> + `; + }).join('') : ''; }; const selectFolder = (path) => { + // Don't proceed if no path is provided + if (!path) return; + const folder = path === 'root' ? state.fileSystem.root : getFolder(path); if (folder) { // Remove previous selection @@ -696,7 +720,10 @@ const selectFolder = (path) => { } } + // Set the current path state.currentFolderPath = path; + + // Update editor content document.getElementById('folderContent').value = folder.content || ''; // Show editor in normal size @@ -704,9 +731,6 @@ const selectFolder = (path) => { setEditorSize('normal'); render(); - } else { - console.error('Folder not found', path); - alert('Folder not found'); } }; @@ -760,8 +784,9 @@ document.addEventListener('click', (e) => { const showContextMenu = (e, path) => { e.preventDefault(); + e.stopPropagation(); - // Update current folder path + // Just update the current path without selecting the folder if (path) { state.currentFolderPath = path; } @@ -929,6 +954,60 @@ const setEditorSize = (mode, editorElement = editor) => { editorElement.style.display = 'block'; }; +const renameFolder = () => { + console.log('Attempting to rename:', state.currentFolderPath); // Debug log + + // Basic validation + if (state.currentFolderPath === 'root') { + alert("Can't rename root!"); + return; + } + + // Get parent path and folder name + const parts = state.currentFolderPath.split('/'); + const oldName = parts[parts.length - 1]; + const parentPath = parts.slice(0, -1).join('/') || 'root'; + + console.log('Parent path:', parentPath); // Debug log + console.log('Folder to rename:', oldName); // Debug log + + const newName = prompt(`Rename "${oldName}" to:`, oldName); + if (!newName || newName === oldName) return; + + // Create new file system and rename the folder + const newFileSystem = clone(state.fileSystem); + const parent = parentPath === 'root' ? + newFileSystem.root : + getFolder(parentPath, newFileSystem); + + if (parent && parent.children) { + if (parent.children[newName]) { + alert('A folder with this name already exists'); + return; + } + + parent.children[newName] = parent.children[oldName]; + delete parent.children[oldName]; + updateFileSystem(newFileSystem); + state.currentFolderPath = parentPath === 'root' ? + newName : + `${parentPath}/${newName}`; + render(); + } +}; + +// Add double-click to rename +const handleFolderDoubleClick = (e) => { + const folderElement = e.target.closest('.folder'); + if (folderElement && !folderElement.classList.contains('editing')) { + e.preventDefault(); + e.stopPropagation(); + renameFolder(); + } +}; + +document.addEventListener('dblclick', handleFolderDoubleClick); + render(); </script> |