Hype HistoryKit

Helps connecting a Hype document to the history object

To test it just navigate to scenes and then use the browser buttons to navigate back and forth. You can also trigger back and forth events using JavaScript (see docs above). This currently pushes new history events on each scene change automatically. You can avoid it by using hypeDocument.showSceneNamedNoPushState. If people want it I could also add an option to push state manually.

Demo:
HypeHistoryKit.html

Source:
HypeHistoryKit.js

Download Example:
HypeHistoryKit.hype.zip

Version-History
1.0 Initial release with example

6 Likes

Hello @MaxZieb,

I changed scenes height, please switch A to B, or B to C, and you will find it is hard to get back to the previous/history position.

HypeHistoryKit.hype.zip (35.9 KB)

If "push state" support that, it would be great.

I don't understand what your question is. HistoryKit uses the browser History-API (like the back and forth buttons) so I am not sure what you want to achieve in placing buttons at diffrent heights of scenes. Using HistoryKit is the same as planing for a regular navigation that makes sense.
Do you mean scroll restoration?

This means pushing specific state History objects with Javascript. How do you plan on using that? Read about the state here:

Hello

Sorry for my poor English :grinning:

Please check the attached document:

baofeature.hype.zip (1020.0 KB)

After clicking the button in this screenshot:

It will just to another video scene, and after click “Close” in this screenshot:

1571027502778

It will redirect the user back to the previous scene, BUT, the viewpoint is at the initial content of the page, not the previous position of the “watch video” button.

It is not much a problem in PC mode, but not friendly in Mobile mode since the users will need to view the page from the top again.

Thanks for the patience, have a nice day.

What does this have todo with Hype HistoryKit? Your not even using the script in your sample file?

Hi Max,

Thank you for providing this great extension for hype. You mentioned the possibility of being able to push state manually. In theory that sounds very useful to me - but I’m not sure what implications there might be in restoring a scene that has been modified/animated etc? Is that easily ‘serialised’ and then deconstructed, or would it be very involved?

If a manual history push state is relatively easy for you to achieve then I would definitely appreciate it :slight_smile:

The extension has that functionality not built in yet but it is based on the History object and that allows to store arbitrary data while pushing state.

You would need to store the data in the pushState call. In the extension that can be found here:

(A) This is the place to store data to a state (as an object), state is ONLY pushed on sceneLoad
(B) In this IF-branch the state gets restored. You would need to restore whatever you stored here to reflect in Hype (timeline setting or something)

This is still a 1.0 … and as I haven't gotten much qualified feedback on this one I never developed it any further but it should do the job. If you need to push states not depending on scene changes the code would have to be changed/further developed or you could just develop your own in that case as this is only a very thin wrapper.

2 Likes

Thanks Max, that is very helpful. I will do some experimenting :slight_smile: