personotes/static/sidebar-resize.js

/**
 * 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;
})();