*

author: elioat <elioat@tilde.institute> 2024-12-22 17:24:42 -0500
committer: elioat <elioat@tilde.institute> 2024-12-22 17:24:42 -0500
commit: a188ec7b6e9cb6558fde757f486cab5cde5e3b90 (patch)
tree: aae080ccca01f74aac8ba684c280734b81e15d89
parent: 9ff68eb3dd3bf57a67e11efeee7bd7d178344b7e (diff)
download: tour-a188ec7b6e9cb6558fde757f486cab5cde5e3b90.tar.gz
1 files changed, 141 insertions, 86 deletions
diff --git a/html/file-system/index.html b/html/file-system/index.html
index 6743b8a..8e05088 100644
--- a/html/file-system/index.html
+++ b/html/file-system/index.html
@@ -293,6 +293,107 @@
         .resize-handle:hover {
             background-color: #e0e0e0;
         }
+
+        /* Update the inchworm styles */
+        .inchworm {
+            position: absolute;
+            top: -16px;
+            left: 0;
+            font-size: 22px;
+            animation: inch 18s infinite linear;
+            transform-origin: center;
+            color: green;
+        }
+
+        @keyframes inch {
+            /* Going forward */
+            0% { 
+                left: 0; 
+                transform: scaleX(1) scaleY(1);
+            }
+            5% { 
+                left: 0; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            10% { 
+                left: 30px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            15% { 
+                left: 30px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            20% { 
+                left: 60px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            25% { 
+                left: 60px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            30% { 
+                left: 90px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            35% { 
+                left: 90px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            40% { 
+                left: 120px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            
+            /* Pause at end */
+            42% { 
+                left: 120px; 
+                transform: scaleX(1) scaleY(1);
+            }
+            
+            /* Going back */
+            45% { 
+                left: 120px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            50% { 
+                left: 90px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            55% { 
+                left: 90px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            60% { 
+                left: 60px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            65% { 
+                left: 60px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            70% { 
+                left: 30px; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            75% { 
+                left: 30px; 
+                transform: scaleX(0.4) scaleY(1.4);
+            }
+            80% { 
+                left: 0; 
+                transform: scaleX(1.3) scaleY(0.7);
+            }
+            
+            /* Pause at start */
+            85% { 
+                left: 0; 
+                transform: scaleX(1) scaleY(1);
+            }
+            100% { 
+                left: 0; 
+                transform: scaleX(1) scaleY(1);
+            }
+        }
     </style>
 </head>
 <body>
@@ -326,11 +427,8 @@
             <span class="editor-button" id="closeEditor" onclick="hideEditor()" title="Close">✕</span>
         </div>
     </div>
+    <div class="inchworm">O</div>
     <textarea id="folderContent" placeholder="Select a folder to edit its contents"></textarea>
-    <div class="resize-handle se"></div>
-    <div class="resize-handle sw"></div>
-    <div class="resize-handle ne"></div>
-    <div class="resize-handle nw"></div>
 </div>
 
 <div class="context-menu" id="contextMenu">
@@ -395,6 +493,16 @@ const addFolder = (path, name, folderData, fileSystem) => {
 };
 
 const deleteFolder = (path, fileSystem) => {
+    if (path === 'root') {
+        return fileSystem;
+    }
+
+    if (!path.includes('/')) {
+        const newFileSystem = clone(fileSystem);
+        delete newFileSystem.root.children[path];
+        return newFileSystem;
+    }
+
     const [parentPath, folderName] = path.split(/\/([^\/]+)$/);
     return updateFolder(fileSystem, parentPath, (folder) => {
         delete folder.children[folderName];
@@ -431,26 +539,39 @@ const createFolder = (path, name) => {
 };
 
 const deleteItem = () => {
-    if (state.currentFolderPath === 'root') return alert("Can't delete the root!");
-
-    const folderToDelete = getFolder(state.currentFolderPath);
-    if (!folderToDelete) return alert("Folder not found!");
+    // Don't do anything if no folder is selected
+    if (!state.currentFolderPath) return;
 
-    const hasNestedFolders = Object.keys(folderToDelete.children).length > 0;
+    // Check if trying to delete root
+    if (state.currentFolderPath === 'root') {
+        alert("Can't delete the root folder!");
+        return;
+    }
 
-    if (hasNestedFolders) {
-        const confirmDelete = confirm(`The folder contains nested folders. Do you really wanna delete them too?`);
-        if (!confirmDelete) {
-            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;
     }
 
-    const updatedFileSystem = deleteFolder(state.currentFolderPath, state.fileSystem);
-    if (updatedFileSystem) {
-        const parts = state.currentFolderPath.split('/');
-        parts.pop();
-        state.currentFolderPath = parts.join('/') || 'root';
-        updateFileSystem(updatedFileSystem);
+    // 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
+
+    const newFileSystem = clone(state.fileSystem);
+    const parentFolder = getFolder(parentPath, newFileSystem);
+    
+    if (parentFolder && parentFolder.children) {
+        delete parentFolder.children[folderToDelete];
+        updateFileSystem(newFileSystem);
+        state.currentFolderPath = parentPath;
+        document.getElementById('editor').style.display = 'none';
         render();
     }
 };
@@ -683,9 +804,6 @@ let initialX;
 let initialY;
 let xOffset = 0;
 let yOffset = 0;
-let isResizing = false;
-let currentHandle = null;
-let startWidth, startHeight, startX, startY;
 
 const dragStart = (e) => {
     if (e.target.closest('#closeEditor') || e.target.classList.contains('resize-handle')) return;
@@ -745,63 +863,6 @@ editorHeader.addEventListener("mousedown", dragStart, false);
 document.addEventListener("mousemove", drag, false);
 document.addEventListener("mouseup", dragEnd, false);
 
-// Add resize functionality
-const initResize = (e) => {
-    if (e.target.classList.contains('resize-handle')) {
-        isResizing = true;
-        currentHandle = e.target;
-        
-        startWidth = editor.offsetWidth;
-        startHeight = editor.offsetHeight;
-        startX = e.clientX;
-        startY = e.clientY;
-
-        e.preventDefault();
-        e.stopPropagation();
-    }
-};
-
-const doResize = (e) => {
-    if (!isResizing) return;
-
-    const deltaX = e.clientX - startX;
-    const deltaY = e.clientY - startY;
-    
-    let newWidth = startWidth;
-    let newHeight = startHeight;
-
-    if (currentHandle.classList.contains('se') || currentHandle.classList.contains('ne')) {
-        newWidth = startWidth + deltaX;
-    } else if (currentHandle.classList.contains('sw') || currentHandle.classList.contains('nw')) {
-        newWidth = startWidth - deltaX;
-        editor.style.left = `${editor.offsetLeft + deltaX}px`;
-    }
-
-    if (currentHandle.classList.contains('se') || currentHandle.classList.contains('sw')) {
-        newHeight = startHeight + deltaY;
-    } else if (currentHandle.classList.contains('ne') || currentHandle.classList.contains('nw')) {
-        newHeight = startHeight - deltaY;
-        editor.style.top = `${editor.offsetTop + deltaY}px`;
-    }
-
-    // Apply minimum dimensions
-    newWidth = Math.max(200, newWidth);
-    newHeight = Math.max(150, newHeight);
-
-    editor.style.width = `${newWidth}px`;
-    editor.style.height = `${newHeight}px`;
-};
-
-const stopResize = () => {
-    isResizing = false;
-    currentHandle = null;
-};
-
-// Add event listeners for resize
-document.addEventListener('mousedown', initResize);
-document.addEventListener('mousemove', doResize);
-document.addEventListener('mouseup', stopResize);
-
 const setEditorSize = (mode, editorElement = editor) => {
     // Reset any existing transforms and positioning
     editorElement.style.transform = 'none';
@@ -864,12 +925,6 @@ const setEditorSize = (mode, editorElement = editor) => {
     xOffset = 0;
     yOffset = 0;
     
-    // Remove resize handles when not in normal mode
-    const resizeHandles = editorElement.querySelectorAll('.resize-handle');
-    resizeHandles.forEach(handle => {
-        handle.style.display = mode === 'normal' ? 'block' : 'none';
-    });
-    
     // Ensure the editor is visible
     editorElement.style.display = 'block';
 };
author	elioat <elioat@tilde.institute>	2024-12-22 17:24:42 -0500
committer	elioat <elioat@tilde.institute>	2024-12-22 17:24:42 -0500
commit	a188ec7b6e9cb6558fde757f486cab5cde5e3b90 (patch)
tree	aae080ccca01f74aac8ba684c280734b81e15d89
parent	9ff68eb3dd3bf57a67e11efeee7bd7d178344b7e (diff)
download	tour-a188ec7b6e9cb6558fde757f486cab5cde5e3b90.tar.gz