Mootools options: how to change/overwrite an options property in an event function?

Question

I have a class constructor that produces a series of animated radial progress bars, and outside of the constructor the elementSize property is assigned via the variables of options shown below. Each set of options assigns a different element size to the radial progress bars when they load in the browser. The four values shown below are from the first index in an array.

I am completely new to mootools and am struggling to figure out how I could change individual elementSize properties to each of my radial progress bars from here. I have 2 buttons with onclick events that go forward and backward through an array of values, so what I want to do is to call the elementSize option(s) and change the value of x depending on whether the user clicks forward (x++) or backward (x--).

Is there a way to do this in my buttons function? Or does it need to be included in my code by some other means?

 var RPBoptionsB1 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][0]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB2 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][1]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB3 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd',
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][2]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB4 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][3]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

//-----------------------------------------

      var rpbArrayB = {
          rpbB1: new RadialProgressBar($('rpbB1'), RPBoptionsB),
          rpbB2: new RadialProgressBar($('rpbB2'), RPBoptionsB),
          rpbB3: new RadialProgressBar($('rpbB3'), RPBoptionsB),
          rpbB4: new RadialProgressBar($('rpbB4'), RPBoptionsB)
      };

Thanks in advance.

Answer 1

In Mootools it is common to put options in the options object (http://mootools.net/docs/core/Class/Class.Extras#Options:setOptions).

Take this example:

var MyClass = new Class({
    Implements: Options,

    options: {
        elementSize: 10
    },

    initialize: function(options){
        this.setOptions(options);
    }
});

var instance1 = new MyClass();
console.log(instance1.options.elementSize); // Returns 10

instance1.options.elementSize = 20;
console.log(instance1.options.elementSize); // Returns 20

var instance2 = new MyClass({
    elementSize: 15
});
console.log(instance2.options.elementSize); // Returns 15

In your example, the classes are initiated as Array variables, so you can change the options like so:

rpbArrayB.rpbB1.options.elementSize = 20

Note that this might not always have the desired effect though. If the class takes the options on initialization and doesn't use them anymore afterwards, changing the options will have no effect on an initialized class. In that case you would have to re-initialize the class.