Hype Events

Hype events are events fired by the Hype Runtime at various events. In the IDE they can be used in the document panel, on the action panel and as timeline events. This document looks at the usage of these events in the context of JavaScript. The events can be leveraged in the IDE using a Hype Function. Each such function has a fixed function signature consisting of the following parameters hypeDocument, element and event. The Hype Event callbacks use the same function signature as Hype Functions.

Register Hype Eventlistener

You can register Hype Event listener using the following code in a script tag in Head HTML. You can also use the Hype Eventlistener in an external library you link to your page. This example registers the event HypeDocumentLoad. To register another event, replace the type-string with the name of the event (see possible events above) and rename the callback to something reasonable. I usually recommend the event name followed by "Callback" (for example HypeDocumentLoadCallback) or add "on" before "Hype" (for example onHypeDocumentLoad).

function HypeDocumentLoad(hypeDocument, element, event) {
	//your code goes here
}

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

HypeDocumentLoad

Fires when the document has been loaded

• element is the Hype Document element
• event.type is a string containing HypeDocumentLoad

function HypeDocumentLoad(hypeDocument, element, event) {
	//your code goes here
}

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

HypeScenePrepareForDisplay

Fires before the scene is displayed. This callback has limited access to the Hype API as the Hype Scene isn't fully loaded yet. This event is great to prepare and change content.

• element is the Hype Scene element
• event.type is a string containing HypeScenePrepareForDisplay

function HypeScenePrepareForDisplay(hypeDocument, element, event) {
	//your code goes here
}

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

HypeSceneLoad

Fires when a scene is loaded.

• element is the Hype Scene element
• event.type is a string containing HypeSceneLoad

Return options

• return the value false switch scenes without firing scene load actions and Timeline Actions at time index 00:00,00
• Don't return anything to leave as is (in case your only observing)

function HypeSceneLoad(hypeDocument, element, event) {
	//your code goes here
}

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

HypeResourceLoad

Fires each time Hype resolves a URL name when preparing resources for display or while preloading resources.

• element is null
• event.type is a string containing HypeResourceLoad
• event.url is a string containing the URL to the file

Return options

• return a string containing a different or modified resource URL
• return a string containing the resource as Base64-encoding (works only on images/SVG)
• Don't return anything to leave as is (in case your only observing)

function HypeResourceLoad(hypeDocument, element, event) {
	//your code goes here
}

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

HypeTimelineComplete

Fires when a timeline reaches its end

• element is the Hype Scene element
• event.type is a string containing HypeTimelineComplete
• event.timelineName is a string containing the name of the timeline

Return options

• return the value false to avoid firing any Hype Actions defined at the end of the timeline
• Don't return anything to leave as is (in case your only observing)

function HypeTimelineComplete(hypeDocument, element, event) {
	//your code goes here
}

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

HypeSceneUnload

Fires when a Hype Scene is unloaded (when transitioning to another scene)

• element is the Hype Scene element
• event.type is a string containing HypeSceneUnload

Return options

• return the value false to switch scenes without firing scene unload actions
• Don't return anything to leave as is (in case your only observing)

function HypeSceneUnload(hypeDocument, element, event) {
	//your code goes here
}

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

HypeSymbolLoad

Fires when a Hype Symbol is loaded when transitioning to a scene. In case of a regular symbol this event is fired on each scene transition if the symbol is present in the scene transitioned to. On the other hand in case of a persistent symbol this event fires only once when the persistent symbol is first used. Subsequent reveals of the persistent symbol don't trigger the event anymore, even if the persistent symbol wasn't present/visible in a previous scene.

• element is the Hype Symbol element
• event.type is a string containing HypeSymbolLoad

Return options

• No options available

function HypeSymbolLoad(hypeDocument, element, event) {
	//your code goes here
}

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

HypeSymbolUnload

Fires when a Hype Symbol is unloaded when transitioning to another scene. In case of a persistent symbol this event is never fired as this type of symbol is never unloaded and hence persistent.

• element is the Hype Symbol element
• event.type is a string containing HypeSymbolUnload

Return options

• No options available

function HypeSymbolUnload(hypeDocument, element, event) {
	//your code goes here
}

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

HypeTriggerCustomBehavior

Fires when a custom behavior is triggered and contains the behavior name triggered

• element is null
• event.type is a string containing HypeTriggerCustomBehavior
• event.customBehaviorName is a string containing the name of the custom behavior

Return options

• No options available

function HypeTriggerCustomBehavior(hypeDocument, element, event) {
	//your code goes here
}

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

HypeLayoutRequest

Fires when a Hype requests a layout refresh (also used on responsive behavior)

• element is the Hype Scene element
• event.type is a string containing HypeLayoutRequest
• event.sceneName is a string containing the current scene name
• event.layoutName is a string containing the current layout name

Return options

• return a string containing a qualified layout name to switch to it

function HypeLayoutRequest(hypeDocument, element, event) {
	//your code goes here
}

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

Creating custom event and triggering Hype Events manually

The regular Hype API doesn't offer a way to trigger events. But the following functionality found in the Hype Runtime and tweaked to work as an extension allows triggering Hype Events manually. If you register this as a Hype Extension you can trigger, forward and create Hype Events.

/**
* hypeDocument.notifyEvent
* @param {object} event This object must at least contain a type property
* @param {HTMLDivElement} element
*/
hypeDocument.notifyEvent = function(event, element) {
    var eventListeners = window['HYPE_eventListeners'];
    if (eventListeners == null) {
        return;
    }
    var result;
    for (var i = 0; i < eventListeners.length; i++) {
        if (eventListeners[i]['type'] == event['type'] && eventListeners[i]['callback'] != null) {
            result = eventListeners[i]['callback'](this, element, event);
            if (result === false) {
                return false;
            }
        }
    }
    return result;
};