ZDDC/classifier/js/resize.js

/**
 * Column Resize Module
 * Handles resizable table columns
 */
(function() {
    'use strict';

    let resizingColumn = null;
    let startX = 0;
    let startWidth = 0;
    let activeTable = null;
    let activeOnResize = null;

    /**
     * Initialize column resizing on a table. Defaults to the rename-in-place
     * spreadsheet when no table is passed (back-compatible). onResize(table) is
     * called after each drag ends, so a caller can persist the new widths.
     */
    function init(table, onResize) {
        table = table || (window.app.dom && window.app.dom.spreadsheet);
        if (!table) return;
        const headers = table.querySelectorAll('thead th');

        headers.forEach(th => {
            // Skip if resize handle already exists
            if (th.querySelector('.column-resizer')) return;

            // Add resize handle
            const resizer = document.createElement('div');
            resizer.className = 'column-resizer';
            th.appendChild(resizer);

            // Mouse down on resizer
            resizer.addEventListener('mousedown', (e) => {
                e.preventDefault();
                e.stopPropagation();

                resizingColumn = th;
                startX = e.pageX;
                startWidth = th.offsetWidth;
                activeTable = table;
                activeOnResize = onResize || null;

                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
            });
        });
    }

    /**
     * Handle mouse move during resize
     */
    function handleMouseMove(e) {
        if (!resizingColumn) return;
        
        const diff = e.pageX - startX;
        const newWidth = Math.max(50, startWidth + diff);
        
        resizingColumn.style.width = newWidth + 'px';
        resizingColumn.style.minWidth = newWidth + 'px';
        resizingColumn.style.maxWidth = newWidth + 'px';
    }

    /**
     * Handle mouse up - end resize
     */
    function handleMouseUp() {
        resizingColumn = null;
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
        if (activeOnResize && activeTable) { try { activeOnResize(activeTable); } catch (_) { /* ignore */ } }
        activeTable = null; activeOnResize = null;
    }

    // Export module
    window.app.modules.resize = {
        init
    };
})();