Specifying which Hype file has loaded using java?

I have an html page that loads this script and calls on a custom trigger on Hype file "Number1". But because the html page itself has multiple Hype files embedded, then that script sometimes doesn't work, and I'm assuming it's because I need to be more specific as to which Hype file I'm referring to.

var itsLoaded=0
function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
itsLoaded=1
myDoc=hypeDocument
}


When you click on the Armadillo, after you've finished coloring it, the custom trigger continues the main timeline. Sometimes it works, but often it doesn't. If I remove all the other Hype files on that page, however, it always works.

Is there a way to specify that, which Hype file I'm referring to in the java script?

JD

so you want to have access to a specific hypedocument from outerHTML via Javascript?!

if that's the case ...

window.HYPE.documents
this object will hold every hypeinstance within the document

if you console.log(window.HYPE.documents) you'll see:

{"InstanceOneName" : {allPropertiesMethodsEtcOfThisInstance}, "InstanceTwoName" : {allPropertiesMethodsEtcOfThisInstance}, etc ...}

so one possibility to target a specific instance:
var yourHypeInstance = window.HYPE.documents["nameOfYourTarget"]

////////////
the javascriptsection in the documentation will offer some more exploration and @jonathan also often posted to this topic in the forum. @MaxyZieb even wrote an extension that simplyfies this kind of targeting on the basis of custombehaviors ..

var itsLoaded = 0

function myCallback(hypeDocument, element, event) {
    window.myhypedocument = hypeDocument;
    itsLoaded = 1
    myDoc = hypeDocument
}

There is probably no extension necessary. It's a global/local hick up. You are using the global (window) scope to store your hypeDocument by using a callback that is probably called on the event HypeDocumentLoad. So, each document loaded actually sets myDoc and window.myhypedocument to itself. Hence, the last one firing the callback wins. This introduces the inconsistency of the loading order being asynchronous. You can fix it by dismissing any Hype documents that don't have the right name. Just tweak your callback (untested as I am on the road):

var itsLoaded = 0

function myCallback(hypeDocument, element, event) {
    if (!['index', 'YOUR-HYPE-DOCNAME'].includes(hypeDocument.documentName())) return;
    window.myhypedocument = hypeDocument;
    itsLoaded = 1
    myDoc = hypeDocument
}

PS: @h_classen has a point that if you know the Hype Document Name you can address
it directly. Seams like you need that reference only in the multi file setup? Then you don’t have to worry about Previews as they introduce a default name called index (as long as you don’t export). If you need it to work in preview as well use the the solution returning (like a doorman) every hypeDocument except the one with your document name or index (for previews).

This worked! Thanks once again guys!

Ok, so I spoke to soon. I have this now:

var itsLoaded=0
function myCallback(hypeDocument, element, event) {
var yourHypeInstance = window.HYPE.documents["alphapodweb_hype_generated_script"];
itsLoaded=1
myDoc=hypeDocument
}

So it's definitely calling on the right hype file. But now it works most of the times, not always. How could that be?

Could it be that when I try it the file is still loading, so it doesn't work immediately UNTIL it completes loading?

It is a bit incomplete without seeing the full code, but I think what is happening is that you are still overwriting your "myDoc" with hypeDocument. In fact the yourHypeInstance appears entirely unused.

The basic idea is that you don't need this function anymore; to address a specific document you would just call window.HYPE.documents["alphapodweb_hype_generated_script"] directly. This is a "hypeDocument" and will only be filled in when loaded.

That being said, I suspect that this itself is incorrect, since the document name doesn't usually include the _hype_generated_script part. It is probably just "alphapodweb". I would recommend opening the web developer console and looking at the HYPE.documents variable to see the actual names.

That did it.

window.HYPE.documents["alphapodweb_hype_generated_script"]

Thank you Jonathan!

hm ... those are the hypeinstances calling your index-page on www.alphapodapp.com
image

@julian The current code you are using shouldn't change much and the assignment isn't done. This is the code I found …

		var SwitchScenes=1;	
		//-------ignore------\\
		var itsLoaded=0
		function myCallback(hypeDocument, element, event) {
			window.HYPE.documents["alphapodweb_hype_generated_script"]
			itsLoaded=1
			myDoc=hypeDocument  
		}

		function callback(d) {
			if(itsLoaded!=0){ 
				if(SwitchScenes==1){
					myDoc.triggerCustomBehaviorNamed('animalTimeline', myDoc.kDirectionForward, false)
				}
			}
		}
		
		if("HYPE_eventListeners" in window === false) {
			window.HYPE_eventListeners = Array();	
		}
			window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
	

It can be simplified to the following. This replacement should fix it:

		var SwitchScenes=1;	

		function callback(d) {
			if(SwitchScenes==1){
				 window.HYPE.documents["alphapod_web"].triggerCustomBehaviorNamed('animalTimeline');
			}
		}	

No, HypeDocumentLoad callback needed anymore. Not sure for what SwitchScenes is used for. My guess is: some sort of global disabling switch against scene switching in specific scenarios.

1 Like

Thank you Max, I replaced my entire code with yours:

But it doesn't work. You can see it in action at http://www.alphapodapp.com/test.html

But you're right, If I just have giberish in my code, as in

window.HYPE.documents["sdfsdfsdfsdf"]

still works, so my code is clearly not doing anything.

And yet... the code I have seems to work consistently. Every time I color an animal the right timeline moves forward.

Yes, as I didn't test it and wrote it on the go I made the mistake on setting the myDoc outside the callback. I changed the code in the post. Please try again.

Thanks Max,

So now I have this:

But it still doesn't work.

You don't need to add screenshots of the code. I am looking at your page.

Remove the itsLoaded!=0 && … I updated the code again.
Also remove the myDoc.kDirectionForward, false.

1 Like

Got it.

Copied your latest code, still no go.

I updated with latest code, that one works! So when you removed

myDoc.kDirectionForward, false);

that did the trick

Much simplified from the mess I originally had, I really appreciate your help!

1 Like