jQuery function for several similar functions

Question

I use the jquery-circle-progress plugin to draw some round progress bars to my website.

Now, in my case 'some' is eight, so I have eight pretty huge definitions of each progress bar.

Now I wondered if it is possible to break this down to a smaller code snippet. I could once write all the configuration code with variables as a function and then add values for the eight different progress bars.

But how does this work if several variables are needed?

Here is the code of one of those progress bars:

var e = $('.element1'),
    inited_e = false;

e.circleProgress({
  value: 0,
  size: size
});

e.appear(
  { force_process: true }
);

e.on('appear', function() {
  if (!inited_e) {
    e.circleProgress({
      value: 0.85,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      }
    });

    inited_e = true;

  }

});

So, what is variable in this configuration? First of all the element on which the script relies, so e will change for each element. Furthermore, every element will have another value and another gradient. So I would need for each function that iterates through an object (?!) that associates a value and a fill to the eight different progress bars.

Answer 1

You can refactor your code like so :

var conf={
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      }
    };

Then :

function circlify(selector,value){
      conf.value=value; //override value for each element
      var e = $(selector),inited_e = false;

      e.circleProgress({value: 0, size: size});

      e.appear({ force_process: true });

      e.on('appear', function() {
             if (!inited_e) {
               e.circleProgress(conf); // here set conf object
                 inited_e = true;

        }

        });

}

Then , use your API :

circlify('#element1',0.75);
circlify('#element2,#element3',0.5);

Answer 2

You're making this hard on yourself.

var e = $('.element1'),
inited_e = false;

e is the element because you declared it to be the element. You can make e any of the circles you need it to be (i would rename it to something like circleElement).

Now we just set your configurations.

var circleProgElement1 = { value: 0,
  size: size};
var circleProgElement2 = {value: 1, size: 283974};
var appearelement1 = {force_process : true}; 
//etc
var configElement1 = {
  value: 0.85,
  size: size,
  lineCap: "round",
  fill: {
    gradient: ["#00C853", "#00E676"]
  }
};

var configElement2 = {
  value: 10.85,
  size: size,
  lineCap: "whatever",
  fill: {
    gradient: ["#000", "#FFF"]
  }
}

circleElement1.circleProgress(circleProgElement1);
circleElement2.circleProgress(circleProgElement2);
//etc
    circleElement1.appear(appearelement1);
circleElement1.on('appear', function() {
if (!inited_e) {
     this.circleProgress(configElement1);
inited_e = true;
}});

You could do something like that and store all your configuraiton into variables. But now you have SOOOOO many vars, what do we do.

We combine them :D

var configElement1 = { 
    circleProg1 : {  value: 0, size: size },
    appear : { force_process: true },
    circleProgend: {
      value: 0.85,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#00C853", "#00E676"]
      },
}

Now you can just call the properties (your config objects), into the methods you need;

e.circleProgress(configElmeent1.circleProg1);
e.appear(configElement1.appear);
e.on("appear",{closure : configElement  } ,function(event){
    if(w/e){ e.circleProgress(closure.circleProend);};
    //we need to add the data property because we are in a different scope so        //just pass the closure into the jq func.  
    });

You can also set your configurations on e, and then just redeclare e and reuse the variables. Unless you need the var for whatever reason.

so e = $(".firstCircle); e.whatever; e=$(".secondCirlce"); e.setmyconfigs; or just have the configuration variable and keep assigning to it.
right? e.appear.force_process = false; so you could have some functions that would return your configuration object.