Navigating between cards - nth-iteration/savvy GitHub Wiki

Savvy apps are comprised of individual cards, which are [defined in the config.xml](Defining applications (config.xml)) in the project root. Each of these must have and id and one must be the default card. The default card the card that is shown then the application first loads.

To display another card, simply call the application.goto() method. In its simplest form, this method accepts a single argument: the ID of the card to go to (as defined in config.xml).

For example, the following JavaScript will load a card with the ID of MainMenu:

application.goto("MainMenu");

Savvy provides a number of transitions that can be applied when navigating between cards. To apply a transition, pass the transition object to the application.goto() method as a second argument.

The following JavaScript will apply a "cover-left" transition between two cards:

application.goto("Home", Transition.COVER_LEFT);

The full list of transitions available are:

• Transition.CUT - a straight cut form one card to another
• Transition.COVER_LEFT - the new card comes in from the left and cover the old card
• Transition.COVER_RIGHT - the new card comes in from the right and cover the old card
• Transition.COVER_LEFT_FADE - as above, but the new card fades in
• Transition.COVER_RIGHT_FADE - as above, but the new card fades in
• Transition.SLIDE_LEFT - the new card and old card slide in parallel from the left
• Transition.SLIDE_RIGHT - the new card and old card slide in parallel from the right
• Transition.UNCOVER_LEFT - the new card is revealed beneath the old card, which exits left
• Transition.UNCOVER_RIGHT - the new card is revealed beneath the old card, which exits right
• Transition.UNCOVER_LEFT_FADE - as above but with a fade effect
• Transition.UNCOVER_RIGHT_FADE - as above but with a fade effect

Additionally, each transition object has an inverse property (e.g. Transition.COVER_RIGHT.inverse) which performs the reverse of that transition.

As the user builds up a navigation history, the JavaScript history object can also be used navigate between cards. For example, history.back() will navigate back one card in the navigation history. Whereas, history.forward(2) will navigation forward two cards in the history.

Obviously, if a user has not built up a navigation history, attempting to navigate by the history object will fail.