Mootools options: how to change / overwrite the options property in an event function?
I have a constructor for a class that creates a series of animated radial progress bars, and outside of the constructor, the elementSize property is assigned via the parameter variables shown below. Each set of options assigns a different element size to the radial progress bars as they load in the browser. The four values shown below refer to the first index in the array.
I am completely new to mootools and am struggling to figure out how I can change the individual elementSize properties for each of my radial progress bars. I have two buttons with onclick events that go back and forth through an array of values, so I want to call the elementSize parameter and change the x value depending on whether the user clicks forward (x ++) or back (x--).
Is there a way to do this in my button function? Or should it be included in my code in other ways?
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.
source to share
In Mootools, it's common to place options on an object options
( http://mootools.net/docs/core/Class/Class.Extras#Options:setOptions ).
Let's 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 being instantiated as Array variables, so you can change the parameters like this:
rpbArrayB.rpbB1.options.elementSize = 20
Note that this may not always have the desired effect. If the class accepts parameters during initialization and no longer uses them, changing the parameters will not affect the initialized class. In this case, you will have to reinitialize the class.
source to share