Question

I am fairly new to various design structures and OOP. what i am trying to do is to make a function which will generate a menu icon that animates during mouseover/mouseout. Therefore, I will just call the function and input the (x,y, width, height, etc….) and allow it to generate the menu icon with a few animation features. I am trying to use the “this” keyword to somewhat have a generic model to help generate multiple menus more easily. but I can’t apply the “this” keyword into the function. Please provide me with some advice on what I should do. Thanks in advanced.

function button(x, y, width, height, text1, text2) {
paperWidth = width +10;
paperHeight = height + 10;
this.paper = Raphael(x, y, paperWidth, paperHeight); // sets the paper dimension with x and y coordinates
// menu box variables
this.rectFrontX = x+20; this.rectFrontY = y+20; this.rectFrontWidth = 70; this.rectFrontHeight = 45;
this.rectBackX = x+10; this.rectBackY = y+10; this.rectBackWidth = 95; this.rectBackHeight = 67;
// text variables
this.textLine1X = x+45+10; this.textLine1Y = y+25+10; 
this.textLine2X = x+45+10, this.textLine2Y = y+35+15;

// menu box variables
rectFrontX = x+20; rectFrontY = y+20; rectFrontWidth = 70; rectFrontHeight = 45;
rectBackX = x+10; rectBackY = y+10; rectBackWidth = 95; rectBackHeight = 67;
// text variables
textLine1X = x+45+10; textLine1Y = y+25+10; 
textLine2X = x+45+10, textLine2Y = y+35+15;

//testing variables only, not using
currentX = x;
currentY= y;
this.x = x; this.y = y;

// initialize menu variables
var backBox = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({fill: "white", "cursor": "pointer"});
var midBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "#CCC", opacity: 0.0, "cursor": "pointer"});
var frontBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "gray", opacity: 1.0, "cursor": "pointer"}); //dark grey menu box
var backLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var backLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var frontLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "opacity": 0.0,  "cursor": "pointer"});
var frontLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "opacity": 0.0,  "cursor": "pointer"});
var menuOverlay = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({"fill": "red", "cursor": "pointer", "opacity": 0.3}); // overlays menu box for 




menuOverlay.mouseover(function() {
// set initial property values before animation
    frontBox.attr({"x": rectFrontX, "y": rectFrontY});
    midBox.attr({"x": x, "y": y});
    frontLineTop.attr({"x": textLine1X-20, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
    frontLineBottom.attr({"x": textLine2X-20, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});
    backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
    backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});

    // animation values
    frontBox.animate({"x": currentX+40, "y": currentY+30,  "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 0.0}, 1000, "linear"); // frontbox fading away from screen
    midBox.animate({"x": currentX+20, "y": currentY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 1.0, "fill": "#CCC"}, 1500, "bounce"); // midbox drops in from the top left
    frontLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    frontLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y,  "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
    backLineTop.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+65,  "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    backLineBottom.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+35,  "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
menuOverlay.mouseout(function() {
// set initial property values before animation
    frontBox.attr({"x": rectFrontX, "y": rectFrontY-20, "opacity": 1.0 });
    midBox.attr({"x": rectFrontX+0, "y": rectFrontY+0});
    backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});
    backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});

    // animation values
    midBox.animate({"x": rectFrontX+40, "y": rectFrontY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 0.0 }, 1500, "bounce");
    frontBox.animate({"x": rectFrontX, "y": rectFrontY,  "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 1.0, "fill": "gray"}, 1500, "bounce"); // frontbox fading away from screen
    backLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    backLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y,  "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
    frontLineTop.animate({"font-size": 14, "x": textLine1X+20, "y": textLine1Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    frontLineBottom.animate({"font-size": 14, "x": textLine2X+20, "y": textLine2Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
}

// I will then call the function to create the menu icon
var testMenuIcon = new button(10, 10, 120,  120, "menu text line 1", "menu text line 2");

Now the problem is that when I try to use the “this” keyword within the mouseover function, it is not able to get the “this” variable in there, so if I create multiple menu icon the x,y values among 2 or more menu icon gets all mixed up because the same values seems to be used on different menu icons. Please advise on what is the best method to do this.

Answer 1

You cannot access this of menu instance inside mouseover , because this now means a different scope. so to fix this

function button(x, y, width, height, text1, text2) {
  //Your code

  //based on your logic use
  var self = this; 
  //or 
  var self = menuOverlay; 

  menuOverlay.mouseover(function() {
     //You can use self to access the menu now (self.whatever)
  }  
}