Hey guys!

I created a presentation similar to a mind map a few days ago. When I reached the end of my presentation, I wanted to show an overview of the mind map, so I scaled out, and thanks to the impress-on-"ID" class, I was able to set the opacity of every step to 1.

Then I had an other idea. My map had many subtrees, so to make it easier to follow, I wanted to change the background color of the whole page, when I enter a new subtree. But if I apply a unique ID to every step, the CSS will be a mess.

So I implemented a few lines of code, which fetches the custom class names of the active step (excluding: step, active, past, present, future), and appends an impress-in-"className" class to the body for each of them. Here is the code:

// remove classes of the previous step
for ( var i=0; i<body.classList.length; i++ )
{
    if ( body.classList.item(i).match(/^impress-in-/) )
    {
        body.classList.remove( body.classList.item(i) );
    }
}

// append classes of the current step
for ( var i=0; i<el.classList.length; i++ )
{
    if ( el.classList.item(i) !== "step" && el.classList.item(i) !== "active" && el.classList.item(i) !== "past" && el.classList.item(i) !== "present" && el.classList.item(i) !== "future" )
    {
        body.classList.add( "impress-in-" + el.classList.item(i) );
    }
}

With this piece of code (in the "goto" function), I can easily apply different styles to the whole canvas, depending on the range of steps I am currently in.

What do you think? Should I create a pull request, or you want to discuss it further?