Implementing Polymorphism in Javascript - how would this look?

Question

I'm trying to make the jump to a more OOP style javascript approach, but I have just not gotten it right in javascript.

Take the following function as an example.

function positionalCSS(array, cs, lcs){
/* Define css for circle based on number of circles */
//Count array
var arrCount = array.length;
var T = [];
var L = [];
if(arrCount == 3){
    T[0] ='15px';
    L[0] = '240px';
    T[1] = '345px';
    L[1] = '440px';
    T[2] = '345px';
    L[2] = '40px';
}
if(arrCount == 4){
    T[0] ='-135px';
    L[0] = '90px';
    T[1] = '-10px';
    L[1] = '290px';
    T[2] = '220px';
    L[2] = '270px';
    T[3] = '315px';
    L[3] = '90px';
}
if(arrCount == 6){
    T[0] ='-135px';
    L[0] = '90px';
    T[1] = '-10px';
    L[1] = '290px';
    T[2] = '220px';
    L[2] = '270px';
    T[3] = '315px';
    L[3] = '90px';
    T[4] = '210px';
    L[4] = '-100px';
    T[5] = '-10px';
    L[5] = '-110px';
}
$.each(array, function(i) {
    var num = parseInt(i);
    //  console.log('$("' + lcs + ' ' + cs + '.handle-' + num + '").first().children("div");'); 
        $(lcs + ' ' + cs + '.handle-' + num).first().children('div').css({
        'position': 'absolute',
        'top': T[num],
        'left': L[num]
    });
});

}

It's pretty horrendous, I want to pass in an array, and depending on how many there are, organise the positions of the items based on this. SO I guess based on its size I would give it some properties? Where each TL represents a Top and Left position of an object?

Lye Fish · Accepted Answer · 2015-06-04 15:41:57Z

1

I'd create an object where you can lookup premade arrays of objects holding your T/L values.

var counts = {
  3: [
    {t:'15px', l:'240px'},
    {t:'345px', l:'440px'},
    {t:'345px', l:'40px'}
  ],
  4: {
    // as above
  },
  5: {
    // as above
  }
};

And then use it in your function:

function positionalCSS(array, cs, lcs){
    $.each(counts[array.length], function(i, obj) {
        //  console.log('$("' + lcs + ' ' + cs + '.handle-' + i + '").first().children("div");'); 
        $(lcs + ' ' + cs + '.handle-' + i).first().children('div').css({
            'position': 'absolute',
            'top': obj.t,
            'left': obj.l
        });
    });
}

answered Jun 4, 2015 at 15:41

Lye Fish

2,57818 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Implementing Polymorphism in Javascript - how would this look?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related