Browser back button?

[SpencerGreene]

Nice component - thanks for putting it out! I tried the live demo and it seems that the browser 'back' button does not move backward in the form, which is something I need in my app - so - how hard is it to make it do that?

[francisngo]

I would love to see this as well.

[brennondenny]

Also interested, what is the best way to go about doing this?

[newbreedofgeek]

Sorry for the delay - great idea, this feature should be mandatory and I’ll look into to after I get this library to work with hooks

[zeel]

@newbreedofgeek I can help here if you need.

[newbreedofgeek]

Hi @zeel - thanks! Yes, your help is appreciated.

Let’s do some solution design first between us:

How I would do it:

1. we need to capture “deep link” state of each step:
   E.g:
   Step 1 deep link:
   mysite.com/stepzilla-page.html#s1

Step 2 deep link:
mysite.com/stepzilla-page.html#s2

...

Step 9 deep link:
mysite.com/stepzilla-page.html#s9

Should be easy to do this by adding an hash. This is so the user can share a deep link to a step if needed.

2. use “pushState” in the core StepZilla source file where the final “back” / “front” step jump logic happens. This will push a history entry that the browser can use.

PushState has 3 params :
history.pushState([data], [title], [url]);

We can use data to store the step index based on the URL # we used. Title can be ignored I think and url will be the hash based URL

Eg
stepzilla-page.html#s9

So:
history.pushState(9, ‘’, ‘stepzilla-page.html#s9’ );

This should take care of the user going back and front on the webpage and the history will keep up.

3. we then need to “recover the step” via a event listener which can be attached to the page

window.addEventListener('popstate', function(e) {
// e.state is equal to the data-attribute of the last image we clicked
});

There is a good example here:
https://css-tricks.com/using-the-html5-history-api/

Let me know your thoughts? Or give it a go and let me know if it works?

Thanks!

[zeel]

@newbreedofgeek seems feasible with your approach. maybe whole feature can be added behind one prop so if someone don't want this feature, it won't pollute browser history.

I will try this from master branch and update here. Hope it won't conflict with React hooks development