Resizable columns on browse form (2)

[toms]

As the initial thread has been locked, I need to open a new one...

Fike, thanks a lot for sharing your code!

One thing that could be improved is the look of the Resizing grips. The open source plugin colResizable has some nice ones.
It might give you some other ideas as well.

Samples:
http://www.bacubacu.com/colresizable/#samples

Source:
https://github.com/alvaro-prieto/colRes ... ble-1.6.js

[admin]

toms,

Fike has been tweaking that code and we'll have it ready soon.

I think you'll like what he's done (with no resize grips). Just drag the column titles.

It still needs to be added by into nuBuilder by us...

Feel free to test it.

The easiest way to test it is by...

1.Pasting this js into the browser's console after you have logged in to nuBuilder.
2.Selecting a Browse Form.

Code: Select all

function nuOnLoad()
{
    $('#nubody').off('.nuresizecolumn'); //removes (if exist) the cursormove/touchmove event listeners binded to nubody

    window.nuBROWSERESIZE = {x_positon:0, mouse_down: false, moving_element:'', pointer:'', current_cell_width :0, next_cell_left: 0, array_current_cell_left: '', last_moved_element: ''};

    if(nuFormType() == 'browse')
    {
        nuLoadBrowse();
    }
   
}

function nuLoadBrowse()
{
    
    
    set_title_divs(); //this function adds the listeners and additional data to title divs in order to make them draggable
    
    //comment the next line after testing the set_column_widths(array) function
    var test_column_widths = [200, 300, 400, 500, 600]; //this is the test array with the column widths that will be passed to the resizer function
    
    //comment the next line after testing the set_column_widths(array) function
    set_column_widths(test_column_widths); //this is the funtion that resizes the column widths passed thru an array
    
    browse_add_listeners(); //this function binds cursormove/touchmove event listeners to nubody
    
}

function browse_add_listeners()
{

    $('#nubody').on('mouseup.nuresizecolumn', function(event) {end_resize();});
    
    $('#nubody').on('mousemove.nuresizecolumn', function(event) {
                                                                    event.preventDefault();
                                                                    
                                                                    if (window.nuBROWSERESIZE.mouse_down) 
                                                                    {
                                                                        resize_title_div(event,window.nuBROWSERESIZE.moving_element);
                                                                    } 
                                                                });
}

function while_moving(event)
{
    event.preventDefault();
    
    if (window.nuBROWSERESIZE.mouse_down) 
    {
        resize_div_diam(event,window.nuBROWSERESIZE.moving_element);
    } 
}

function set_column_widths(array_col_widths)
{
    if (array_col_widths)
    {
        if (array_matches_columns(array_col_widths))
        {
            set_left_pos_array();
        
            for (var z = 0; z < array_col_widths.length; z++)
            {
                modify_column_width(z, array_col_widths[z]);
            }
        }
        else
        {
            console.log('Unable to resize columns. The number of columns provided for the array do not match with the number of columns in the browse form');
        }
    }
}

function modify_column_width(col_number, column_width)
{
    var titles = $("div[id^='nuBrowseTitle']").toArray();
    
    var title_id = titles[col_number].id;
    
    var title_current_width = $('#'+title_id).width();
    var title_dispaly_prop = $('#'+title_id).css('display');
    
    var title_offset = title_current_width - column_width;
    
    var offset_value = Math.abs(title_offset);
    offset_value = Math.round(offset_value * 100) / 100;
    
    window.nuBROWSERESIZE.current_cell_width = '0';
    window.nuBROWSERESIZE.next_cell_left = '0';
    window.nuBROWSERESIZE.moving_element = title_id;
    
    if (title_offset > 0)
    {
        var direction = 'left';
    }
    else
    {
        direction = 'right';
    }

    if (title_current_width !== 0 && title_dispaly_prop != 'none')
    {
        resize_div(title_id, direction, offset_value);
    }
    else
    {
        var div_number = title_id.replace('nuBrowseTitle','');

        div_number = Number(div_number);
        
        offset_value = 0;

        move_headers(direction,div_number,offset_value);
    }
    
    end_resize();
        
}



function array_matches_columns(col_array)
{
    var cols_received = col_array.length;
    
    var browse_cols_array = $("div[id^='nuBrowseTitle']").toArray();
    
    if (cols_received == browse_cols_array.length)
    {
        return true;
    }
    else
    {
        return false;
    }
}

function set_title_divs()
{
    var hdrs = $("div[id^='nuBrowseTitle']").toArray();
    
    for (var i = 0; i < hdrs.length; i++ )
    {

        var div_id = hdrs[i].id;
        
        var left_side_elem = hdrs[i].id;
        
        if (i+1 < hdrs.length)
        {
            var right_side_elem = hdrs[i+1].id;
        }
        else
        {
            right_side_elem = 'last_element'; 
        }
        
        add_title_props(div_id, left_side_elem, right_side_elem);
        
    }
    
}

function add_title_props(div_id, l_text, r_text)
{

    $("#"+div_id).attr({"data-left_side" : l_text,"data-right_side" : r_text});

    $("#"+div_id).on('mousedown.nuresizecolumn', function(event) {   
                                                            event.preventDefault();
                                                            window.nuBROWSERESIZE.mouse_down = true;
                                                            window.nuBROWSERESIZE.pointer = 'mouse_cursor';
                                                            window.nuBROWSERESIZE.moving_element = this.id;
                                                            get_start_pos(event);
                                                        });
    
    
    $("#"+div_id).on('touchstart.nuresizecolumn', function(event) {   
                                                            event.preventDefault();
                                                            window.nuBROWSERESIZE.mouse_down = true;
                                                            window.nuBROWSERESIZE.pointer = 'finger_touch';
                                                            window.nuBROWSERESIZE.moving_element = this.id;
                                                            get_start_pos(event);
                                                        });
                                                        
    $("#"+div_id).on('touchmove.nuresizecolumn', function(event) { 
                                                            if (window.nuBROWSERESIZE.mouse_down){ resize_title_div(event,window.nuBROWSERESIZE.moving_element);} 
                                                        });
                                                        
    $("#"+div_id).on('touchend.nuresizecolumn', function(event) { end_resize(); window.nuBROWSERESIZE.pointer = 'mouse_cursor'; });
    
    $("#"+div_id).on('touchcancel.nuresizecolumn', function(event) { end_resize(); window.nuBROWSERESIZE.pointer ='mouse_cursor'; });
    
}

function get_start_pos(event)
{

    window.nuBROWSERESIZE.x_positon = event.pageX;
    
    if (window.nuBROWSERESIZE.pointer == "finger_touch")
    {
        window.nuBROWSERESIZE.x_positon = event.changedTouches[0].clientX;
        
    }
    
    window.nuBROWSERESIZE.array_current_cell_left = '';
    
    set_left_pos_array();
    
}


function set_left_pos_array()
{
    var hdrs = $("div[id^='nuBrowseTitle']").toArray();
    
    var left_pos_array = [];
    
    for (var i = 0; i < hdrs.length; i++)
    {
        var hdr_id = hdrs[i].id;
        
        //var left_pos = $('#'+hdr_id).offset().left; when CSS display property is none, offset().left throws CERO
        var left_pos = parseInt($("#"+hdr_id).css('left'));
        
        left_pos_array.push(left_pos);
    }
    
    var left_pos_json = JSON.stringify(left_pos_array);
    
    window.nuBROWSERESIZE.array_current_cell_left = left_pos_json;
}

function resize_title_div(event,elem_id)
{

    var offset_limit = 100000000;
    
    var min_offset = 20;

    var x = event.pageX;
    
    if (window.nuBROWSERESIZE.pointer == "finger_touch")
    {

        x = event.changedTouches[0].clientX;
    }
    
    var x_offset = x - window.nuBROWSERESIZE.x_positon;
    
    if (x !== 0 && Math.abs(x_offset) > min_offset)
    {
        if (x_offset > 0)
        {
            var direction = 'right';
        }
        else
        {
            var direction= 'left';
        }
        
        x_offset = Math.abs(x_offset);
        
        if (x_offset < offset_limit)
        {
            resize_div(elem_id, direction, x_offset);
        }
        else
        {
            console.log('Offset size exceeds limit');
        }
        
        
    }
}


function resize_div(elem_id, direction, offset_value)
{

    var min_col_val = 20;
    window.nuBROWSERESIZE.last_moved_element = elem_id;
    
    var div_id = elem_id;

    var div_number = div_id.replace('nuBrowseTitle','');

    div_number = Number(div_number);

    var l_side_id = $("#"+div_id).attr("data-left_side");
    var r_side_id = $("#"+div_id).attr("data-right_side");
    
    if (window.nuBROWSERESIZE.current_cell_width == '0')
    {
        window.nuBROWSERESIZE.current_cell_width = $("#"+l_side_id).width()+'';
    }
    
    current_l_width = Number(window.nuBROWSERESIZE.current_cell_width);


    if ( window.nuBROWSERESIZE.next_cell_left == '0' && r_side_id != 'last_element' )
    {
        window.nuBROWSERESIZE.next_cell_left = parseInt($("#"+r_side_id).css('left'));
    }
    
    if (r_side_id == 'last_element')
    {
        var current_r_left_pos = 0;
    }
    else
    {
        current_r_left_pos = Number(window.nuBROWSERESIZE.next_cell_left);
    }
    
    
    if (direction == "right") 
    {
        var new_l_width = current_l_width + offset_value;
    }
    
    if (direction == "left") 
    {
        new_l_width = current_l_width - offset_value;
    }

    if (new_l_width >= min_col_val)
    {
        var new_width_auth = new_l_width;

        set_title_width(l_side_id, new_width_auth, div_number, div_id, current_r_left_pos, direction, offset_value);
    }
    else
    {
        console.log('Column must be at least '+min_col_val+'px width. Ending resize function');

        end_resize();
        
        adjust_col_min_width(min_col_val);
    }
}

function adjust_col_min_width(min_col_val)
{

    var div_id = window.nuBROWSERESIZE.last_moved_element;
    var div_width = $('#'+div_id).width();
    
    if (div_width < min_col_val)
    {
        var direction = 'right';
    }
    else if (div_width > min_col_val)
    {
        direction = 'left';
    }
    else
    {
        end_resize();
        return false;
    }
    
    var offset_value = div_width - min_col_val;
    offset_value = Math.abs(offset_value);
    
    resize_div(div_id, direction, offset_value);

    end_resize();
}

function set_title_width(l_side_id, new_l_width, div_number, div_id, current_r_left_pos, direction, offset_value)
{

    $("#"+l_side_id).css("background-color", "#b1dbad");
    
    $("#"+l_side_id).width(new_l_width);
    
    //var div_left_offset = $("#"+l_side_id).offset().left; when CSS display property is none, offset().left throws CERO
    var div_left_offset = parseInt($("#"+l_side_id).css('left'));
    
    var d_offset_left = div_left_offset + new_l_width - 12;

    var col_number = div_number;

    resize_column(col_number, new_l_width);

    if (current_r_left_pos != 0)
    {
        move_headers(direction,div_number,offset_value);
    }
    else
    {
        resize_footer();
    }
}

function resize_column(col_number, col_width)
{
    var txt_col_number = '_'+col_number ;
    
    var cell_width = col_width - 8;
    
    var cells = $("div[id$='"+txt_col_number+"']").toArray();
    
    for (i = 0; i < cells.length; i++)
    {
        var cell_id = cells[i].id;
        
        $("#"+cell_id).width(cell_width);
    }
}

function move_headers(direction,div_number,offset_value)
{

    var hdrs = $("div[id^='nuBrowseTitle']").toArray();
    
    var arr_current_cell_left_arr = JSON.parse(window.nuBROWSERESIZE.array_current_cell_left);

    for (i = div_number + 1 ; i < hdrs.length; i++)
    {
        var hdr_id = hdrs[i].id;

        var cur_hdr_left = arr_current_cell_left_arr[i];

        if (direction == "right")
        {
            var new_hdr_left = cur_hdr_left + offset_value;
        }
        else if (direction == "left")
        {
            new_hdr_left = cur_hdr_left - offset_value;
        }
        else
        {
            new_hdr_left = cur_hdr_left;
        }

        //$("#"+hdr_id).offset({ left: new_hdr_left });
        $("#"+hdr_id).css({ left: new_hdr_left });

        var hdr_width = $("#"+hdr_id).width();

        var new_d_left = new_hdr_left + hdr_width - 12;

        move_cells(i, new_hdr_left);
    }
    
    resize_footer();

}

function move_cells(col_number, left_value)
{
    var txt_col_number = '_'+col_number ;
    
    var cells = $("div[id$='"+txt_col_number+"']").toArray();
    
    for (j = 0; j < cells.length; j++)
    {
        var cell_id = cells[j].id;
        
        //$("#"+cell_id).offset({ left: left_value });
        $("#"+cell_id).css({ left: left_value });
    }    
}

function resize_footer()
{
    
    var hdrs = $("div[id^='nuBrowseTitle']").toArray();
    
    var k = hdrs.length - 1;
    
    var hdr_id = hdrs[k].id;
    
    var hdr_left = $("#"+hdr_id).offset().left;
        
    var hdr_width = $("#"+hdr_id).width();
    
    var footer_width = hdr_left + hdr_width - 11;
    
    $('#nuBrowseFooter').width(footer_width);
    
}

function end_resize()
{

    window.nuBROWSERESIZE.x_positon = 0,
    window.nuBROWSERESIZE.mouse_down = false;
    window.nuBROWSERESIZE.pointer = '';
    window.nuBROWSERESIZE.current_cell_width = '0';
    window.nuBROWSERESIZE.next_cell_left = '0';

    if (window.nuBROWSERESIZE.moving_element != '')
    {
        $("#"+window.nuBROWSERESIZE.moving_element).css("background-color", "#CCCCCC");
        window.nuBROWSERESIZE.moving_element = '';
    }
    
    if (window.nuBROWSERESIZE.last_moved_element != '')
    {
        $("#"+window.nuBROWSERESIZE.last_moved_element).css("background-color", "#CCCCCC");
    }
    
    set_left_pos_array();
}

Steven

[toms]

Nice implementation! It works great on both a mobile device and a desktop browser.

[admin]

toms,

This is now in Github as a part of nuBuilder Forte.

And as you know, it works by dragging column titles...

Fike.png

Steven

[toms]

Awesome, thanks to both of you!

[admin]

.