I'm starting with the Mootools framework. Since I want the code to be reusable, I'm trying to do it with classes.
In the code shown below, the intention is to draw a Map using Raphael framework for SVG. The code is working fine, but I'm having problems with the properties that are inside the Options
object.
var Map = new Class({
Implements : [ Options ],
pathsArr: {},
Options: {
canvas: {
container: 'map',
cheight: 500,
cwidth: 900,
},
attributes: {
fill: '#006699',
stroke: '#3899E6',
'stroke-width': 1,
'stroke-linejoin': 'round'
}
},
initialize: function (pathsArr, options){
this.setOptions(Options);
this.pathsArr = paths;
console.log(this.pathsArr);
},
setCanvas: function(){
console.log(this.Options.canvas);
R = Raphael(this.Options.canvas.container, this.Options.canvas.cwidth, this.Options.canvas.cheight);
return R;
},
drawPaths: function(){
console.log(this.Options.attributes);
for (var country in this.pathsArr){
var shape = R.path(this.pathsArr[country].path);
var attri = this.Options.attributes;
console.log(attri);
}
}
});
Ok, like you can see I'm using console.log
to understand how things are happening here. And when I check the attributes in the line
console.log(this.Options.attributes);
I get this in the Google Chrome console
When I think I need something like what happend when I check the pathsArr
wich is outside the Options
object.
And where I need the attributes property nothing happens. Like in these two lines.
var attri = this.Options.attributes;
shape.attr(attri);
And I don't understand why if I do this, it gets the correct result.
console.log(this.Options.attributes.fill);
Javascript is case-sensitive. Use setOptions(options)
and this.options
instead of Options
. The capital O
is there only when a reference is made to the Options
mutator, as in the Implements: [Options]
instruction.
Currently, your Options
member can not be set by the setOptions
call, since it is looking for this.options
.
You're only using this.Options
, that is your default options, that are never updated. And this.options
is set to the Options
mutator, as you instruct when writing this.setOptions(Options)
.
EDIT:
Also, in the following code:
initialize: function (pathsArr, options){
this.setOptions(Options);
this.pathsArr = paths; // <----- `paths` is undefined