Hype Functions

Hype offers a built-in JavaScript code editor based on Tumult HyperEdit (currently being revamped as Whisk) offering limited access to the source of your Hype Project. The code editor can be used to edit Head HTML and custom Hype Functions.

Triggering Hype Functions from within Hype

Hype Functions can be triggered from four different locations from within the IDE:

Context

• Document Panel
  • Symbol Panel
• Action Panel
• Timeline Action

Triggering Hype Functions from JavaScript

There are two places to trigger Hype Functions through JavaScript.

From withing another Hype Function

As long as we are inside another Hype Function of the same document we can call other Hype Functions using the current hypeDocument (API) we receive through the signature. Presuming we have created a Hype Function called myFunction in our Hype Document, this would be the code to call it and forward the element and event of our current Hype Function.

hypeDocument.functions().myFunction( hypeDocument, element, event );

From the window scope.

Each Hype Function and Hype Document API is also available from the window scope under HYPE.documents[DOCUMENTNAME].functions()[FUNCTIONNAME]. DOCUMENTNAME would be your Hype Document Name and FUNCTIONNAME would be the name of the function you are trying to call. As an example we presume you created a Hype Function called myFunction in your Hype document called index, this is how you could call that function from the window scope.

HYPE.documents.index.functions().myFunction( HYPE.documents.index, null, null );

We should at least apply the hypeDocument (API) as first parameter but could omit the element and event. Although that depends on the functionality that function is supposed to perform.

Hype Function Signature

Each function has a fixed function signature consisting of the following parameters hypeDocument, element and event. The parameters element and event are context dependent, meaning the content changes according to the location the function was trigger from.

hypeDocument

The content of hypeDocument is always the current Hype Document API.

element

The content of element is context depended and contains …

• … the Hype Scene element if triggered on the Document Panel or as a Timeline Action
• … the Hype Symbol element if triggered on the Symbol Panel
• … the element the action targeted, if triggered on the Action Panel

event

Contains in many cases context relevant information but at least always a name containing the Hype Event the Hype Function was called in.

Related topics

• Read more about hypeDocument and how to fetch it.
  • Use the helper function getHypeDocument to fetch hypeDocument from within a Hype rectangle or on events declared as an HTML attribute.