Create a javascript object

Question

I would say I am fairly decent with javascript and jQuery, well, enough to get the job done and done pretty well. I do however lack a deep understanding of js.

I have created some functions for highlighting table elements. ctrl+click toggles selections shift+click+drag highlights selection

My question does not pertain to whether or not my implementation is the best way or not but ...

How do I abstract this functionality so I can add this functionality to any table. Like if I add more highlighting features and such and put this in its own .js file. How would I attach it to any html table?

Sorry if this has already been answered, but I could not think of what to search for.

Thank you.

****Newest Code**** This code is in its own .js file and is attached to my table. All the current functionality is there. The only thing I am weary of is the .off() functions. In my case, I am reloading new tables.... as I type this, I realize I should just empty the tr's from the table instead of recreating a new table all the time, then I could get rid of the .off() calls.

$.fn.addEvents = function(obj) 
{
console.log("Adding events to table");
var properties = $.extend(true,
    {
    shifting: false,
    ctrling: false,
    mousing: false,
    mouseenter: 0,
    mouseleave: 0,
    mousestartindex: 0,
    mouseenterindex: 0,
    mouseleaveindex: 0,
    trajectory: null,
    tmptrajectory: null
    }, obj || {});

$(document)
.off('mouseup')
.on('mouseup', function(e)
    {
    properties.mousing = false;
    properties.trajectory = null;
    })
.off("keyup")
.on("keyup", function(e)
    {
    if(e.which == 16)
        {
        properties.shifting = false;
        }
    if(e.which == 17)
        {
        properties.ctrling = false;
        }
    })
.off("keydown")
.on("keydown", function(e)
    {
    if(e.which == 16)
        {
        properties.shifting = true;
        }
    if(e.which == 17)
        {
        properties.ctrling = true;
        }
    if($(this).find('tr.selected').length > 0)
        {
        switch(e.which)
            {
            //case 37: // left
                //break;

            case 38: // up
                var index = $(this).find('tr.selected').index();
                if(index > 0)
                    {
                    $(this).find('tr').removeClass('selected');
                    $(this).find('tr td').removeClass('selected');
                    $(this).find('tr:eq(' + index + ')').addClass('selected');
                    $(this).find('tr:eq(' + index + ') td').addClass('selected');
                    }
                break;

            //case 39: // right
                //break;

            case 40: // down
                var index = $(this).find('tr.selected').index();
                if(index < $(this).find('tr').length - 2)
                    {
                    $(this).find('tr').removeClass('selected');
                    $(this).find('tr td').removeClass('selected');
                    $(this).find('tr:eq(' + (index+2) + ')').addClass('selected');
                    $(this).find('tr:eq(' + (index+2) + ') td').addClass('selected');
                    }
                break;

            case 117: // f6
                var index = $(this).find('tr.selected').index();
                if(index > 0)
                    {
                    ....
                    }
                break;

            case 118: // f7
                var index = $(this).find('tr.selected').index();
                if(index  < $(this).find('tr').length - 1)
                    {
                    ....
                    }
                break;

            default: return; // exit this handler for other keys
            }
        e.preventDefault(); // prevent the default action (scroll / move caret)
        }
    return;
    });

return $(this)
.off('click')
.off('contextmenu')
.on('click', function()
    {
    if(!properties.ctrling && !properties.shifting)
        {
        $('#datatablebody tr, #datatablebody tr td').removeClass('selected');
        $(this).addClass('selected');
        $(this).find('td').addClass('selected');
        }
    else if(properties.ctrling && $(this).hasClass('selected'))
        {
        $(this).removeClass('selected');
        $(this).find('td').removeClass('selected');
        }
    else if(properties.ctrling && !$(this).hasClass('selected'))
        {
        $(this).addClass('selected');
        $(this).find('td').addClass('selected');
        }
    })
.on('contextmenu', function(ev)
    {
    ev.preventDefault();
    $('#datatablebody tr, #datatablebody tr td').removeClass('selected');
    $(this).addClass('selected');
    $(this).find('td').addClass('selected');
    showContextMenuTR($(this).closest('tr').attr('id'), ev.clientX, ev.clientY);
    return false;
    })
.off('mousedown')
.on('mousedown', function(e)
    {
    properties.mousing = true;
    properties.mousestartindex = $(this).index();
    if(properties.shifting && properties.mousing)
        {
        multiselectrow($(this));
        }
    })
.off('mouseenter')
.on('mouseenter', function(e)
    {
    properties.mouseenter = e.clientY;
    properties.mouseenterindex = $(this).index();

    if(properties.tmptrajectory === properties.trajectory)
        {
        if(properties.shifting && properties.mousing)
            {
            multiselectrow($(this));
            }
        }
    })
.off('mouseleave')
.on('mouseleave', function(e)
    {
    properties.mouseleave = e.clientY;

    if(properties.shifting && properties.mousing)
        {
        properties.tmptrajectory = properties.mouseenter - properties.mouseleave < 0?1:-1;
        }

    if(properties.trajectory != null && properties.tmptrajectory !== properties.trajectory && $(this).index() !== properties.mousestartindex)
        {
        if(properties.shifting && properties.mousing)
            {
            multiselectrow($(this));
            }
        }

    if(properties.shifting && properties.mousing)
        {
        if(properties.trajectory == null)
            {
            properties.trajectory = properties.tmptrajectory;
            }
        else if(properties.tmptrajectory !== properties.trajectory && $(this).index() === properties.mousestartindex)
            {
            properties.trajectory = properties.tmptrajectory;
            }
        }
    })
.off('mouseup')
.on('mouseup', function(e)
    {
    properties.mousing = false;
    properties.trajectory = null;
    if(properties.shifting && properties.mousing)
        {
        multiselectrow($(this));
        }
    }); 
}

function multiselectrow(obj)
{
if($(obj).hasClass('selected'))
    {
    $(obj).removeClass('selected');
    $(obj).find('td').removeClass('selected');
    }
else
    {
    $(obj).addClass('selected');
    $(obj).find('td').addClass('selected');
    }
}

Switch out #datatablebody for some element(s) that the user provides. Then just change your selectors to $(userSelectedTable).find('tr') etc. — Mike Cluck
– Mike Cluck, Commented Aug 18, 2016 at 15:30
Pretty much what @MikeC said. I'd take the approach of passing in a parameter of $table and then using that throughout your code, instead of the table ID. Alternatively look at creating a jQuery plugin and then call it like (for example) $("#datatablebody").addTableFunctionality(). You can read about that approach here. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Aug 18, 2016 at 15:31

Ja9ad335h · Accepted Answer · 2016-08-18 15:53:35Z

2

you can wrap all this in a function since you have some local variables related to individual selection

$.fn.addEvents = function(obj) {
    var properties = $.extend(true, {
        shifting: false,
        ctrling: false,
        mousing: false,
        mouseenter: 0,
        mouseleave: 0,
        trajectory: null
    }, obj || {});

    return $(this)
        .off('click')
        .off('contextmenu')
        .on('click', function() {
            .....
        })
        .on('mouseleave', function(e) {

            //rename your local variables with `properties.` prefix
            properties.mouseleave = e.clientY;

            if (properties.shifting && properties.mousing) {
                tmptrajectory = properties.mouseenter - properties.mouseleave < 0 ? 1 : -1;
            }

            if ($(this).hasClass('selected') && properties.shifting && properties.mousing && properties.trajectory != null && properties.trajectory != tmptrajectory) {
                $(this).removeClass('selected');
                $(this).find('td').removeClass('selected');
            }
            ....
        });
}

usage

$('#datatablebody tr').addEvents({ shifting: false, ctrling: true }); //custom settings

$('#someother tr').addEvents(); //default settings

answered Aug 18, 2016 at 15:53

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michaela Ervin Over a year ago

This looks like exactly what I was talking about. I will have to read up on the "extend" method. Thank you!

Michaela Ervin Over a year ago

The shifting and ctrling are booleans that get toggled in a "keyup" and "keydown" handler. I assume those could also be wrapped into this.

Ja9ad335h Over a year ago

yes, you can wrap all events related to that selection.

DIEGO CARRASCAL · Accepted Answer · 2016-08-18 15:45:12Z

you could add that functionality to a class and add that class to the tables you want to affect... Here I create the class .myTableBeh and all tables with that class will have the behaviour you programmed.

    var shifting = false;
    var ctrling = false;
    var mousing = false;
    var mouseenter = 0;
    var mouseleave = 0;
    var trajectory = null;

    $('.myTableBeh tr')
    .off('click')
    .off('contextmenu')
    .on('click', function()
        {
        if(!ctrling)
            {
            $('.myTableBeh tr, .myTableBeh tr td').removeClass('selected');
            $(this).addClass('selected');
            $(this).find('td').addClass('selected');
            }
        else if(ctrling && $(this).hasClass('selected'))
            {
            $(this).removeClass('selected');
            $(this).find('td').removeClass('selected');
            }
        else if(ctrling && !$(this).hasClass('selected'))
            {
            $(this).addClass('selected');
            $(this).find('td').addClass('selected');
            }
        })
    .on('contextmenu', function(ev)
        {
        ev.preventDefault();
        $('.myTableBeh tr, .myTableBeh tr td').removeClass('selected');
        $(this).addClass('selected');
        $(this).find('td').addClass('selected');
        showContextMenuTR($(this).closest('tr').attr('id'), ev.clientX, ev.clientY);
        return false;
        })
    .off('mousedown')
    .on('mousedown', function(e)
        {
        mousing = true;
        multiselectrow($(this));
        })
    .off('mouseenter')
    .on('mouseenter', function(e)
        {
        mouseenter = e.clientY;
        multiselectrow($(this));
        })
    .off('mouseleave')
    .on('mouseleave', function(e)
        {
        mouseleave = e.clientY;

        if(shifting && mousing)
            {
            tmptrajectory = mouseenter - mouseleave < 0?1:-1;
            }

        if($(this).hasClass('selected') && shifting && mousing && trajectory != null && trajectory != tmptrajectory)
            {
            $(this).removeClass('selected');
            $(this).find('td').removeClass('selected');
            }

        if(shifting && mousing && trajectory == null)
            {
            trajectory = tmptrajectory;
            }
        })
    .off('mouseup')
    .on('mouseup', function(e)
        {
        mousing = false;
        trajectory = null;
        multiselectrow($(this));
        });

Michaela Ervin · Accepted Answer · 2016-08-25 15:07:07Z

Thanks to the answer from @JAG I was able to create a nice add on to any HTML table that handles highlighting.

Check out the fiddle for the working version and please use it if you find it helpful or useful for your site.

You can even implement keys to move the tr position up or down in the table. I removed my implementation because it was specific to the project I am working on.

I made it so you have to mouse over the table in order to interact with it and mouse leave to un-focus it.

https://jsfiddle.net/kwj74kg0/2/

//Add the events simply by running this
$('#dtable tr').addEvents(0);


/**
* This add on can be applied and customized to any html tr set i.e. $('#tableid tr').addEvents()
* It will add highlighting capability to the table.
* 
* Single click highlight tr
* Click -> Shift + click highlight/toggle range
* Shift+MouseDown+Drag highlight/toggle range
* Ctrl+Click toggle item
*
* 
* @author Michaela Ervin
*
* @param tabindex
* 
* Help from JAG on http://stackoverflow.com/questions/39022116/create-a-javascript-object
*/
$.fn.addEvents = function(tabindex) 
{
console.log("Adding events to table");
var properties = $.extend(true,
    {
    shifting: false,
    ctrling: false,
    mousing: false,
    mouseenter: 0,
    mouseleave: 0,
    mousestartindex: 0,
    mouseenterindex: null,
    mouseleaveindex: null,
    trajectory: null,
    tmptrajectory: null
    }, {});

/**
 * Add events to closest table.  
 */
$(this)
.closest('table')
.attr('tabindex', tabindex)
.off('mouseenter')
.on('mouseenter', function()
    {
    $(this).focus();
    })
.off('mouseleave')
.on('mouseleave', function()
    {
    $(this).blur();
    properties.mousing = false;
    properties.trajectory = null;
    properties.mouseenterindex = null;
    properties.mouseleaveindex = null;
    properties.mouseintermediateindex = null;
    })
.off("keyup")
.on("keyup", function(e)
    {
    if(e.which == 16)
        {
        properties.shifting = false;
        }
    if(e.which == 17)
        {
        properties.ctrling = false;
        }
    })
.off("keydown")
.on("keydown", function(e)
    {
    if(e.which == 16)
        {
        properties.shifting = true;
        }
    if(e.which == 17)
        {
        properties.ctrling = true;
        }
    if($(this).find('tr.selected').length > 0)
        {
        switch(e.which)
            {
            //case 37: // left
                //break;

            case 38: // up
                var index = $(this).find('tr.selected').index();
                if(index > 0)
                    {
                    $(this).find('tr').removeClass('selected');
                    $(this).find('tr td').removeClass('selected');
                    $(this).find('tr:eq(' + index + ')').addClass('selected');
                    $(this).find('tr:eq(' + index + ') td').addClass('selected');
                    }
                break;

            //case 39: // right
                //break;

            case 40: // down
                var index = $(this).find('tr.selected').index();
                if(index < $(this).find('tr').length - 2)
                    {
                    $(this).find('tr').removeClass('selected');
                    $(this).find('tr td').removeClass('selected');
                    $(this).find('tr:eq(' + (index+2) + ')').addClass('selected');
                    $(this).find('tr:eq(' + (index+2) + ') td').addClass('selected');
                    }
                break;  

            case 117: // f6
                var index = $(this).find('tr.selected').index();
                if(index > 0)
                    {
                    //Function to move tr 'up'.
                    }
                break;

            case 118: // f7
                var index = $(this).find('tr.selected').index();
                if(index  < $(this).find('tr').length - 1)
                    {
                    //Function to move tr 'down'.
                    }
                break;

            default: return; // exit this handler for other keys
            }
        e.preventDefault(); // prevent the default action (scroll / move caret)
        }
    return;
    });


/**
 * Add tr specific events
 */
return $(this)
.off('click')
.on('click', function()
    {
    if(!properties.shifting && properties.mouseenterindex != null)
        {
        properties.mouseenterindex = null;
        properties.mousing = false;
        }

    if(!properties.ctrling && !properties.shifting && properties.mouseenterindex == null)
        {
        $(this).parent().find('tr').removeClass('selected');
    $(this).parent().find('tr td').removeClass('selected');
        $(this).addClass('selected');
        $(this).find('td').addClass('selected');
        }
    else if(properties.ctrling && $(this).hasClass('selected'))
        {
        $(this).removeClass('selected');
        $(this).find('td').removeClass('selected');
        }
    else if(properties.ctrling && !$(this).hasClass('selected'))
        {
        $(this).addClass('selected');
        $(this).find('td').addClass('selected');
        }

    if(properties.mouseenterindex == null)
        {
        properties.mouseenterindex = $(this).index();
        }
    else if(properties.shifting && properties.mouseenterindex != null)
        {
        properties.mouseleaveindex = $(this).index();
        highlightRange($(this).parent(), properties.mouseenterindex, properties.mouseleaveindex, properties.mouseenterindex);
        properties.mouseenterindex = null;
        properties.mouseleaveindex = null;
        }
    })
.off('contextmenu')
.on('contextmenu', function(ev)
    {
    ev.preventDefault();
    $(this).parent().find('tr').removeClass('selected');
    $(this).parent().find('tr td').removeClass('selected');
    $(this).addClass('selected');
    $(this).find('td').addClass('selected');
    //Put your context menu here
    return false;
    })
.off('mousedown')
.on('mousedown', function(e)
    {
    properties.mousing = true;
    properties.mousestartindex = $(this).index();
    if(properties.shifting && properties.mousing && properties.mouseenterindex == null)
        {
        multiselectrow($(this));
        }
    })
.off('mouseenter')
.on('mouseenter', function(e)
    {
    properties.mouseenter = e.clientY;

    if(properties.tmptrajectory === properties.trajectory)
        {
        if(properties.shifting && properties.mousing)
            {
            multiselectrow($(this));
            }
        }
    })
.off('mouseleave')
.on('mouseleave', function(e)
    {
    properties.mouseleave = e.clientY;

    if(properties.shifting && properties.mousing)
        {
        properties.tmptrajectory = properties.mouseenter - properties.mouseleave < 0?1:-1;
        }

    if(properties.trajectory != null && properties.tmptrajectory !== properties.trajectory && $(this).index() !== properties.mousestartindex)
        {
        if(properties.shifting && properties.mousing)
            {
            multiselectrow($(this));
            }
        }

    if(properties.shifting && properties.mousing)
        {
        if(properties.trajectory == null)
            {
            properties.trajectory = properties.tmptrajectory;
            }
        else if(properties.tmptrajectory !== properties.trajectory && $(this).index() === properties.mousestartindex)
            {
            properties.trajectory = properties.tmptrajectory;
            }
        }
    })
.off('mouseup')
.on('mouseup', function(e)
    {
    properties.mousing = false;
    properties.trajectory = null;
    if(!properties.shifting)
        {
        properties.mouseenterindex = null;
        properties.mouseleaveindex = null;
        }
    });
}

function multiselectrow(obj)
{
if($(obj).hasClass('selected'))
    {
    $(obj).removeClass('selected');
    $(obj).find('td').removeClass('selected');
    }
else
    {
    $(obj).addClass('selected');
    $(obj).find('td').addClass('selected');
    }
}

function highlightRange(obj, start, end, mouseenterindex)
{
if(start < end)
    {
    for(var i=start; i<=end; i+=1)
        {
        if(i !== mouseenterindex)
            {
            multiselectrow($(obj).find('tr').eq(i));
            }
        }
    }
else
    {
    for(var i=start; i>=end; i-=1)
        {
        if(i !== mouseenterindex)
            {
            multiselectrow($(obj).find('tr').eq(i));
            }
        }
    }
}

Collectives™ on Stack Overflow

Create a javascript object

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related