Ok,
My first idea seems to work and is based on that we know that all Hype Scenes only fully load to the DOM when they become the current scene.
So the simply idea ( cough, cough ) is when the user clicks a next/previos page/scene button we reload hype to that page. Thus the Wistia API will kick in for the page/scene.
But we have to also allow ( if we want ) for the normal Hype browser reload behaviour, which is to reload the hype document from the beginning if the user clicks the browser reload button.
Working from my code on this thread
We can do that by jumping through some hoops.
Hoop 1, kind of, we will work backwards here so things make better sense .
1, Each next and previous nav button has been given a class name which indicates the name of the scene it navigates to.
2, The buttons all point to a single function. ( They do not directly run a load scene. )
The function sceneButtonClicked()
1, Will get the scene to navigate to using the class name.
2, It will set a browser session storage item with the name of scene to navigate to.
3, It will set a browser session storage item with a value to indicate the user clicked to navigate to a scene.
4, It will reload() the browser.
/*sceneButtonClicked*/
var scne = element.classList[1] //-- EACH BUTTON HAS A CLASS NAME OF THE SCENE TO GO TO.
window.currentSceneName = scne;
window.sessionStorage.setItem('currentScene', window.currentSceneName); //-- SET BROWSER SESSION STOARGE WITH SCENE NAME
window.sessionStorage.setItem('buttonClicked', "true"); //-- SET BROWSER SESSION STOARGE- USER CLICKED NEXT SCENE BUTTON
location.reload(); //-- RELOAD HYPE
In the Head file we have a function.
The function will run every time the browser loads/scene loads . i.e on a reload.
This function will check Browser the session storage items for buttonClicked value ( if used a nav button ) & currentSceneNamename ( The scene we want to nav)
Which if we clicked a nav button and reloaded should now be populated to 'true' and the scene name we want to go to.
If this reload was caused by the user clicking one of the buttons. ( buttonClicked = 'true' )
If user clicked a nav button then we can put the scene name from the session item into a global var. window.currentSceneName
We then check we are not already on that scene and nav to it if not. ( just a double check)
We the reset the buttonClicked to false.
If buttonClicked is false at any time the first scene will load. Hopefully insuring a normal reload or any other type of nav 's behaviour is normal.
<script type="text/javascript">
function myCallback(hypeDocument, element, event){
//-- check if we have a session item for buttonClicked
if( window.sessionStorage.getItem('buttonClicked')) {
//--if user last clicked a nav button is true
var buttonClicked = window.sessionStorage.getItem("buttonClicked");
if ( buttonClicked == 'true') {
//-- we should have the scene stored we want to nav to from the last user click of a nav button
window.currentSceneName = window.sessionStorage.getItem("currentScene"); //string
//-- double check we are not on the same scene
if (window.currentSceneName != hypeDocument.currentSceneName()) {
//-- load the scene to nav to
hypeDocument.showSceneNamed(window.currentSceneName)
}
}
/* Reset the buttonClicked session item so we only load a nav scene if the user clicked a nav button.
When buttonClicked is false we will assume the window/ scene was reload by other means
*/
window.sessionStorage.setItem('buttonClicked', "false");
}
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":myCallback});
</script>
Example with 8 scenes.