Support state management using fragments, for popups, wizards and tabs

[mariusGundersen]

hashNavigation can only represent one state at a time. Using a query param syntax in the fragment of the url DecoJS can support multiple key:value pairs, each one representing a state. This can be used to track the state of components such as popups (open or closed), wizards (page 1,2,3,...) and tabs (tab 1,2,3,...).

• A viewmodel can subscribe to changes in a state by depending on a new module deco/viewState and calling something like viewState(when, 'wizard').changesState(function(newState){ /*...*/ }).
• The viewState is represented in the url fragment after a bang, for example #!wizard=1&popup=show.
• Setting the urlFragment to #!wizard=1 will update the wizard state without changing other states.
• Setting the urlFragment to #!wizard= will clear the wizard state and it will be removed from the url.
• State is stored as a string
• The changeState listener will be called with the new state whenever it changes
• The state will automatically be cleared when the whenContext it is registered to is destroyed
• Calling viewState returns an object with a few methods:
  • changesState(newState => ): listen for changes to the state
  • getState(): returns the current state as a string
  • setState(String): set the state. Will update the url, but not call changesState
  • clearState(): same as calling setState with an empty string or no arguments
  • destroyState(): same as destroying the whenContext.
• When the state is destroyed the url fragment is cleaned up
• Calling any method on a destroyed state will result in an Error
• Multiple viewmodels can listen to and update the same state. Destroying one viewState will not destroy the others.
• If the page has a data-outlet then the viewstate will appear after the path, eg #/path/to/index!wizard=1&tab=0
• If there are no viewstates being subscribed to, then the onhashchange and onpopstate event listeners should be removed

[mariusGundersen]

This needs to work along with #16