Add backlink

static/sidebar-resize.js

@@ -0,0 +1,176 @@
+/**
+ * Sidebar Resizable
+ * Allows users to resize the sidebar by dragging the right edge
+ */
+
+(function() {
+    'use strict';
+
+    const STORAGE_KEY = 'sidebar-width';
+    const DEFAULT_WIDTH = 300;
+    const MIN_WIDTH = 200;
+    const MAX_WIDTH = 600;
+
+    let sidebar = null;
+    let resizeHandle = null;
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    /**
+     * Initialize sidebar resize functionality
+     */
+    function init() {
+        sidebar = document.querySelector('#sidebar');
+        if (!sidebar) {
+            console.warn('Sidebar not found');
+            return;
+        }
+
+        console.log('Sidebar resize initialized');
+
+        // Create resize handle
+        createResizeHandle();
+
+        // Restore saved width
+        restoreSidebarWidth();
+
+        // Add event listeners
+        setupEventListeners();
+    }
+
+    /**
+     * Create the resize handle element
+     */
+    function createResizeHandle() {
+        resizeHandle = document.createElement('div');
+        resizeHandle.className = 'sidebar-resize-handle';
+        resizeHandle.title = 'Drag to resize sidebar / Glisser pour redimensionner';
+        
+        sidebar.appendChild(resizeHandle);
+        console.log('Resize handle created and appended');
+    }
+
+    /**
+     * Setup event listeners for resizing
+     */
+    function setupEventListeners() {
+        resizeHandle.addEventListener('mousedown', startResize);
+        document.addEventListener('mousemove', handleResize);
+        document.addEventListener('mouseup', stopResize);
+
+        // Prevent text selection while resizing
+        resizeHandle.addEventListener('selectstart', (e) => e.preventDefault());
+    }
+
+    /**
+     * Start resizing
+     */
+    function startResize(e) {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+
+        resizeHandle.classList.add('resizing');
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+
+        console.log('Started resizing from:', startX, 'width:', startWidth);
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    /**
+     * Handle resize dragging
+     */
+    function handleResize(e) {
+        if (!isResizing) return;
+
+        const delta = e.clientX - startX;
+        const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + delta));
+
+        applySidebarWidth(newWidth);
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    /**
+     * Stop resizing
+     */
+    function stopResize(e) {
+        if (!isResizing) return;
+
+        isResizing = false;
+        resizeHandle.classList.remove('resizing');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+
+        console.log('Stopped resizing at width:', sidebar.offsetWidth);
+
+        // Save the new width
+        saveSidebarWidth();
+    }
+
+    /**
+     * Save sidebar width to localStorage
+     */
+    function saveSidebarWidth() {
+        const width = sidebar.offsetWidth;
+        try {
+            localStorage.setItem(STORAGE_KEY, width.toString());
+        } catch (e) {
+            console.warn('Failed to save sidebar width:', e);
+        }
+    }
+
+    /**
+     * Restore sidebar width from localStorage
+     */
+    function restoreSidebarWidth() {
+        try {
+            const savedWidth = localStorage.getItem(STORAGE_KEY);
+            if (savedWidth) {
+                const width = parseInt(savedWidth, 10);
+                if (width >= MIN_WIDTH && width <= MAX_WIDTH) {
+                    applySidebarWidth(width);
+                }
+            }
+        } catch (e) {
+            console.warn('Failed to restore sidebar width:', e);
+        }
+    }
+
+    /**
+     * Apply sidebar width to both sidebar and main content
+     */
+    function applySidebarWidth(width) {
+        sidebar.style.width = `${width}px`;
+
+        // Update main content margin
+        const main = document.querySelector('main');
+        if (main) {
+            main.style.marginLeft = `${width}px`;
+        }
+    }
+
+    /**
+     * Reset sidebar to default width
+     */
+    function resetSidebarWidth() {
+        applySidebarWidth(DEFAULT_WIDTH);
+        saveSidebarWidth();
+    }
+
+    // Initialize on DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        // DOM already loaded
+        init();
+    }
+
+    // Expose reset function globally for debugging
+    window.resetSidebarWidth = resetSidebarWidth;
+})();