Michaela Ervin Michaela Ervin - 3 months ago 14
Javascript Question

Create a javascript object

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.

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

$('#datatablebody tr')
.off('click')
.off('contextmenu')
.on('click', function()
{
if(!ctrling)
{
$('#datatablebody tr, #datatablebody 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();
$('#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)
{
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));
});

JAG JAG
Answer

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
Comments