bartaz/impress.js — pull request #280 by tehfoo (2013-04-17 05:39:10+00:00)
Title: simple substep implemenation

Greetings impress.js overlords:

I have made an unobtrusive and clean attempt at providing the basics of a substep feature.

My implementation follows the syntax and behavior modeled by regular steps:
- denote a substep by adding the css class 'substep' to elements in a step
- init will prepare the substeps with the additional css class 'future'
- next/prev will check within the current step for potential substeps
- navigation through substeps will set 'present', 'active', and 'past' - just like steps
- the only variation is substeps remain 'active' when past
- backward navigation removes 'past/active', restores 'future' as needed
- I've included substep events, following a similar model as regular steps

Because the only presentation-side change is CSS classes, there would be no effect on existing presentations. A new presentation would have to implement substep specific css to utilize the feature. This is outlined in the comments of the example html and css.

I thought it was best to create a separate example, rather than tinker with the existing index.html, as it seems like someone who wants substeps will find the html and figure it out from there.

Substeps are not included as a separate API feature. I felt this was the right thing because it didn't seem necessary to directly navigate to a substep. I also didn't think deep linking a substep made sense, and the sytax for that would have gotten weird, anyway. It did make sense to hook into next/prev. If you're adding substeps, you probably wouldn't want prev/next to skip them, even if you're moving via the API.

I felt an expected default behavior was to have substeps remain active, but that's easily changed. This could also be easily toggled with a 'data-' property.

The TL;DR notes on my commit are:
- a couple of helper functions for finding and handling substeps
- a small if/else check in next/prev to decide if a substep is available
- a separate example html page with it's own CSS.

I know substeps are 'powerpointish', and thus subject to controversy. They also may not meet the impress.js philosophy. My coding style might not be exactly in-line with the main repo. If the philosophical issue can be overcome, I'm happy to revise my code as needed to be acceptable. Just let me know.

Thanks for considering my contribution!

-- Aaron (aka tehfoo)