Resizable columns on browse form

[Fike]

I wrote a JavaScript code that I want to share with nuBuilder users.

The code adds buttons to the browse form's columns in order to make them resizable. The buttons are big because they are touchable (so that columns can be resized in touch devices).

Just copy and paste the code in the Javascript Custom Code section of any browse form.

With some additional functions, the code could save the modified column sizes in a database table for each user (and for each form), and it could also be added a button to reset the column sizes to its original value.

Please feel free to use and modify any part of the code, and include it in nuBuilder Forte's source coude if you want. It might need some further testing and modifications, but I could be a staring point.

Kind regrads

Code: Select all

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

function nuLoadBrowse()
{
    create_var_holders();
    
    create_header_buttons();
    
    document.addEventListener('mouseup', function(event) {end_resize(); }, true);
    
    document.addEventListener('mousemove', function(event) { 
                                                                event.preventDefault();
                                                                var mouse_down_val = $('#mouse_down').val();
                                                                if (mouse_down_val == 'true'){var moving_element_id = $('#moving_element').val(); resize_div_diam(event,moving_element_id);} 
                                                            }, false);
    
}

function create_var_holders()
{
    create_input('x_pos','0');
    create_input('mouse_down','false');
    create_input('moving_element','');
    create_input('pointer','');
    create_input('current_cell_width','0');
    create_input('next_cell_left','0');
    create_input('arr_current_cell_left','');
    
}

function create_input(input_id, input_value)
{
    var inp = document.createElement("input");
    inp.id = input_id;
    inp.setAttribute("type", "text");
    inp.setAttribute("value",input_value);
    inp.style.visibility = "hidden"; 
    
    document.body.appendChild(inp);
    
    
}

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

        var e_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'; 
        }
        
        var offset = $("#"+e_id).offset();
        var e_top = offset.top;
        var e_left = offset.left;
        
        var width = $("#"+e_id).width();
        
        var d_top = e_top  + 30;
        var d_left = e_left - 12 + width;
        var d_id = e_id.replace('nuBrowseTitle','nuBrowseSizer')+'_d';
        
        insert_diam(d_id, '\u25BC', d_top, d_left, left_side_elem, right_side_elem);
        
    }
    
}


function insert_diam(div_id, text, top_p, left_p, l_side, r_side)
{
    var div_r = document.createElement("div");
    div_r.id = div_id;
    div_r.style.top = top_p+"px";
    div_r.style.left = left_p+"px";
    div_r.style.position = "absolute";
    div_r.style.zIndex = 2;
    div_r.style.backgroundColor = "#00ADEF";
    div_r.style.color = "white";
    div_r.style.fontSize = "25px";
    div_r.innerHTML = text;

    document.body.appendChild(div_r);
        
    var l_text = l_side;
    var r_text = r_side;

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

    div_r.addEventListener('mousedown', function(event) {   
                                                            event.preventDefault();
                                                            $('#mouse_down').val('true');
                                                            $('#pointer').val('mouse_cursor');
                                                            $('#moving_element').val(this.id);
                                                            get_start_pos(event);
                                                        }, true);
    
    
    div_r.addEventListener('touchstart', function(event) {   
                                                            event.preventDefault();
                                                            $('#mouse_down').val('true');
                                                            $('#pointer').val('finger_touch');
                                                            $('#moving_element').val(this.id);
                                                            get_start_pos(event);
                                                        }, true);
                                                        
    div_r.addEventListener('touchmove', function(event) { 
                                                            var mouse_down_val = $('#mouse_down').val();
                                                            if (mouse_down_val == 'true'){ var moving_element_id = $('#moving_element').val(); resize_div_diam(event,moving_element_id);} 
                                                        }, false);
                                                        
    div_r.addEventListener('touchend', function(event) {end_resize();$('#pointer').val("mouse_cursor"); }, true);
    
    div_r.addEventListener('touchcancel', function(event) {end_resize();$('#pointer').val("mouse_cursor"); }, true);
    
    
    
    
}

function get_start_pos(event)
{

    var x_pos_val = event.pageX;
    
    var pointer_val = $('#pointer').val();
    
    if (pointer_val == "finger_touch")
    {
        x_pos_val = event.changedTouches[0].clientX;
        
    }
    
    $('#x_pos').val(x_pos_val);
    
    $('#arr_current_cell_left').val('');
    
    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;
        
        left_pos_array.push(left_pos);
    }
    
    var left_pos_json = JSON.stringify(left_pos_array);
    
    $('#arr_current_cell_left').val(left_pos_json);
    
    var moving_element_id = $('#moving_element').val();
    var mov_ele = document.getElementById(moving_element_id);
    mov_ele.style.color = "red";
    mov_ele.style.fontSize = "40px";

}

function resize_div_diam(event,elem_id)
{
    
    var offset_limit = 100000000;

    var x = event.pageX;
    
    var poniter_val = $('#pointer').val();
    
    if (poniter_val == "finger_touch")
    {

        x = event.changedTouches[0].clientX;
    }
    
    var x_pos_val = $('#x_pos').val();

    var x_offset = x - x_pos_val;
    
    if (x !== 0)
    {
        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 end_resize(event)
{
    $('#mouse_down').val('false');
    $('#current_cell_width').val('0');
    $('#next_cell_left').val('0');
    
    var moving_element_id = $('#moving_element').val();
    var mov_ele = document.getElementById(moving_element_id);
    
    if (mov_ele)
    {
        mov_ele.style.color = "white";
        mov_ele.style.fontSize = "25px";
    }
}


function resize_div(elem_id, direction, offset_value)
{
  
    var div_id = elem_id;

    var div_number = div_id.substring(13, div_id.length - 2);

    div_number = Number(div_number);

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


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

    $("#"+l_side_id).width(new_l_width);
    
    var div_left_offset = $("#"+l_side_id).offset().left;

    var d_offset_left = div_left_offset + new_l_width - 12;

    $("#"+div_id).offset({ left: d_offset_left });

    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_val = $('#arr_current_cell_left').val();
    var arr_current_cell_left_arr = JSON.parse(arr_current_cell_left_val);

    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 });
        
        var hdr_width = $("#"+hdr_id).width();
        
        var d_id = hdr_id.replace("nuBrowseTitle","nuBrowseSizer") + "_d";
        
        var new_d_left = new_hdr_left + hdr_width - 12;
        
        $("#"+d_id).offset({ left: new_d_left });
        
        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 });
    }    
}

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);
    
}

[admin]

Fike,

That is Brilliant!!!

I'll find a way to add this in to Forte.

Steven

[Fike]

Great !

I would be happy to help on anything required to add the code into Forte.

Regards

[admin]

Thanks