Extend Tumult Hype with JavaScript: hypeDocument.extensions

Extension Project
19

↑ extension index

hypeDocument.currentSceneElement

Returns the current scene element (HTMLDivElement).

/**
* hypeDocument.currentSceneElement 1.1
* @return {HTMLDivElement} gives you the current scene element
*/
hypeDocument.currentSceneElement = function(){
    return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

As of Hype 4.0.2 (build 656) this new version is the way to go:

/**
* hypeDocument.currentSceneElement 1.2
* @return {HTMLDivElement} gives you the current scene element
*/
hypeDocument.currentSceneElement = function(){
    return document.getElementById(this.currentSceneId());
}

Usage:
Given one would like to share a button function across multiple scenes one could get the current scene element and search for the affected elements using a querySelector contained in the scene. This way you can reuse classes in every scene instead of having different ID’s that would have to be unique across the whole HTML page. This is just one example as I am sure there are more use cases.

var elm = hypeDocument.currentSceneElement();
var someButton = elm.querySelector('.someButton');

Update:
1.0 initial release using getElementById ( :pencil2: see edit history to recall)
1.1 updated version with only one function call

1 Like