JavaScript in the document Head

Using JavaScript with Hype
1

I know Hype extensions need to be enclosed in a parent function and the added via “window.HYPE_eventListeners.push” in order to be recognized by the system at runtime.
I have other JS code that would better serve my needs also living in the document head, rather than in a library function.

That’s fine for general utilities and anything not referencing actual elements on stage - but if I need to target a physical element, that will throw an error since (I guess) I’m targeting something that doesn’t exist yet.

Is there a wrapper or event to listen for in order to keep this code in the document head and have it run once everything else is available in the DOM?

2

Within Hype it’s more kind of custom a ‘SceneObjectModell’. Which means that elements that are not part of the current shown scene may not be in the DOM. So you’ll rely on ‘On prepare for display’ or ‘OnSceneLoad’ to be sure that an element within a scene will exist.

2 Likes
3

@h_classen exactly the information I needed - thank you!!!

4

The HypeDocumentLoad callback (and others) has the intention that you can use them from the Head HTML and will be called when the document is ready.

From the docs:

<script>

  function myCallback(hypeDocument, element, event) {
    // display the name of the Hype container and the event called
    alert("id: " + element.id + " type: " + event.type);

    // show the scene named SecondScene
    hypeDocument.showSceneNamed('SecondScene');

    // return false so it does not load the initial scene
    return false;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

 </script>

Presently Hype does build the DOM at document load, though scenes/css may be set/reset at scene load time.

1 Like
5

HypeDocumentLoad is fine for general setup :), but be careful when changing attributes or innerHTML of hypeelements. They might get overwritten when the scene is going to be displayed …

2 Likes
6

the greater irony here is I’m working on recreating a complex project built over 10 years ago in Flash/ActionScript. So far reproducing all the functionality and effects in Hype has worked out BEAUTIFULLY - whereas today’s Adobe Animate is now almost completely incapable of handling a fraction this sort of production work :rofl:

1 Like
7

You can also push in a HypeSceneLoad listener and callback which will run on every scene load. Which would probably be better suited for looking at elements. Same principals as HypeDocumentLoad but with a different name. i.e

sceneCallbackFunction(hypeDocument, element, event){
    // stuff to do on every scene load
}

window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneCallbackFunction});
3 Likes