Added TreeView and Panel

src/myfasthtml/assets/myfasthtml.js

@@ -1,40 +1,43 @@
 /**
- * Layout Drawer Resizer
+ * Generic Resizer
  *
- * Handles resizing of left and right drawers with drag functionality.
+ * Handles resizing of elements with drag functionality.
  * Communicates with server via HTMX to persist width changes.
+ * Works for both Layout drawers and Panel sides.
  */
 
 /**
- * Initialize drawer resizer functionality for a specific layout instance
+ * Initialize resizer functionality for a specific container
  *
- * @param {string} layoutId - The ID of the layout instance to initialize
+ * @param {string} containerId - The ID of the container instance to initialize
+ * @param {Object} options - Configuration options
+ * @param {number} options.minWidth - Minimum width in pixels (default: 150)
+ * @param {number} options.maxWidth - Maximum width in pixels (default: 600)
  */
-function initLayoutResizer(layoutId) {
-  'use strict';
+function initResizer(containerId, options = {}) {
 
-  const MIN_WIDTH = 150;
-  const MAX_WIDTH = 600;
+  const MIN_WIDTH = options.minWidth || 150;
+  const MAX_WIDTH = options.maxWidth || 600;
 
   let isResizing = false;
   let currentResizer = null;
-  let currentDrawer = null;
+  let currentItem = null;
   let startX = 0;
   let startWidth = 0;
   let side = null;
 
-  const layoutElement = document.getElementById(layoutId);
+  const containerElement = document.getElementById(containerId);
 
-  if (!layoutElement) {
-    console.error(`Layout element with ID "${layoutId}" not found`);
+  if (!containerElement) {
+    console.error(`Container element with ID "${containerId}" not found`);
     return;
   }
 
   /**
-   * Initialize resizer functionality for this layout instance
+   * Initialize resizer functionality for this container instance
    */
   function initResizers() {
-    const resizers = layoutElement.querySelectorAll('.mf-layout-resizer');
+    const resizers = containerElement.querySelectorAll('.mf-resizer');
 
     resizers.forEach(resizer => {
       // Remove existing listener if any to avoid duplicates
@@ -51,24 +54,24 @@ function initLayoutResizer(layoutId) {
 
     currentResizer = e.target;
     side = currentResizer.dataset.side;
-    currentDrawer = currentResizer.closest('.mf-layout-drawer');
+    currentItem = currentResizer.parentElement;
 
-    if (!currentDrawer) {
-      console.error('Could not find drawer element');
+    if (!currentItem) {
+      console.error('Could not find item element');
       return;
     }
 
     isResizing = true;
     startX = e.clientX;
-    startWidth = currentDrawer.offsetWidth;
+    startWidth = currentItem.offsetWidth;
 
     // Add event listeners for mouse move and up
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
 
     // Add resizing class for visual feedback
-    document.body.classList.add('mf-layout-resizing');
-    currentDrawer.classList.add('mf-layout-drawer-resizing');
+    document.body.classList.add('mf-resizing');
+    currentItem.classList.add('mf-item-resizing');
   }
 
   /**
@@ -92,8 +95,8 @@ function initLayoutResizer(layoutId) {
     // Constrain width between min and max
     newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth));
 
-    // Update drawer width visually
-    currentDrawer.style.width = `${newWidth}px`;
+    // Update item width visually
+    currentItem.style.width = `${newWidth}px`;
   }
 
   /**
@@ -109,11 +112,11 @@ function initLayoutResizer(layoutId) {
     document.removeEventListener('mouseup', handleMouseUp);
 
     // Remove resizing classes
-    document.body.classList.remove('mf-layout-resizing');
-    currentDrawer.classList.remove('mf-layout-drawer-resizing');
+    document.body.classList.remove('mf-resizing');
+    currentItem.classList.remove('mf-item-resizing');
 
     // Get final width
-    const finalWidth = currentDrawer.offsetWidth;
+    const finalWidth = currentItem.offsetWidth;
     const commandId = currentResizer.dataset.commandId;
 
     if (!commandId) {
@@ -122,24 +125,24 @@ function initLayoutResizer(layoutId) {
     }
 
     // Send width update to server
-    saveDrawerWidth(commandId, finalWidth);
+    saveWidth(commandId, finalWidth);
 
     // Reset state
     currentResizer = null;
-    currentDrawer = null;
+    currentItem = null;
     side = null;
   }
 
   /**
-   * Save drawer width to server via HTMX
+   * Save width to server via HTMX
    */
-  function saveDrawerWidth(commandId, width) {
+  function saveWidth(commandId, width) {
     htmx.ajax('POST', '/myfasthtml/commands', {
       headers: {
         "Content-Type": "application/x-www-form-urlencoded"
       },
       swap: "outerHTML",
-      target: `#${currentDrawer.id}`,
+      target: `#${currentItem.id}`,
       values: {
         c_id: commandId,
         width: width
@@ -150,8 +153,8 @@ function initLayoutResizer(layoutId) {
   // Initialize resizers
   initResizers();
 
-  // Re-initialize after HTMX swaps within this layout
-  layoutElement.addEventListener('htmx:afterSwap', function (event) {
+  // Re-initialize after HTMX swaps within this container
+  containerElement.addEventListener('htmx:afterSwap', function (event) {
     initResizers();
   });
 }