Question

I ran across this snippet of code and have “used” it as a reference for developing my own specific toggle function.

Raphael.js – if / else statement not toggling on click

http://jsfiddle.net/YLrzk/1/

I would like to apply an animation to the stroke-width per say when it is increased on click. I can’t seem to figure out how to add this animation in alongside the toggle function.

I figured this would be applied around the variables StrON and StrOFF so I have tried things such as:

 var strOff = function() {
            this.animate({ 'stroke-width': '1' }, 100);

        }; 

    var strOn  = function() {
            this.animate({ 'stroke-width': '5' }, 100);

        }; 

and even just:

var strOff = 
        this.animate({ 'stroke-width': '1' }, 100);



var strOn  = 
        this.animate({ 'stroke-width': '5' }, 100);

Sorry about the lazy syntax If I missed anything on the two examples of what I’ve tried. Thanks for any help.

Answer 1

Neither of these will work because strOn and strOff are not the right data type — they must be an object containing attributes for the selected and deselected states of a given rectangle. This represents a fundamental misunderstanding of what animate does: it is essentially an asynchronous version of attr.

You could solve your problem by simply restoring strOn and strOff to their original state and then calling this in the click handler for a given rectangle:

box1.animate( strOn, 100 );
box2.animate( strOff, 100 );
box3.animate( strOff, 100 );

This still leaves you with a complexity issue. If you want to add a fourth or fifth rectangle, you will quickly drown in conditional logic. This sort of state information should, in my opinion, almost never be implemented like this. Instead, I recommend doing this:

Use a single, generic click handler.

var genericClickHandler = function()
{
    //  First step: find and deselect the currently "active" rectangle
    paper.forEach( function( el )
        {
            if ( el.data('box-sel' ) == 1 )
            {
                el.animate( strOff, 100 ).data('box-sel', 0 );
                return false; // stops iteration
            }
        } );
    this.animate( strOn, 100 ).data( 'box-sel', 1 );
}

This will iterate through all elements in the paper — if one of them is marked as “active,” it will be animated back into its inactive state.

Use data to keep track of the selected rectangle:

paper.rect( x1, y1, w1, h1 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );    // note that we're setting data to indicate that this rectangle isn't "active"
paper.rect( x2, y2, w2, h2 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );
// ... as many rectangles as you like
paper.rect( xN, yN, wN, hN ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );

Using this approach, there’s no need to keep track of individual rectangles — only whether or not a given rectangle is selected or not.

Here’s an example supporting many rectangles.