getHypeDocument
I often read about people that need the hypeDocument context while adding code into an DIV. In Hype this context actually doesn’t know about the hypeDocument so this little helper solves that problem. The traditional approach found in the Tumult Hype docs requires hardcoding the document id. This approach makes retrieving the hypeDocument independent.
Installation
This snippet allows you to get the context anytime. Just add it to your Head-HTML. If you can’t put this in your Head-HTML or need it contained in Hype put it in an init function (without the script tags) that runs on scene load. And third option would be an enabler … meaning stick into a persistent symbol.
<script>
/**
* getHypeDocument 1.1
* @param {HTMLDivElement} optional start node
* @return {hypeDocument} or null
*/
function getHypeDocument(e){
var ds = document.scripts, hd=HYPE.documents
var e = e || ds[ds.length-1];
if (e = e.closest('[id$="_hype_container"]'))
for (var key in hd)
if (hd[key].documentId() == e.id) return hd[key];
return null;
}
</script>
Usage
And then you can execute any of the following in your DIV that live inside of your Hype-file (just examples)…
Example in a script block
<script>
// get the hypeDocument
var hypeDocument = getHypeDocument();
// let's check it and now we can use it
console.log(hypeDocument)
</script>
Examples on a link
(On links it currently needs this as a parameter)
Echo hypeDocument to console:
<a onclick="console.log(getHypeDocument(this))">log hypeDocument</a>
A more useful case: Start a timeline
<a onclick="getHypeDocument(this).startTimelineNamed('test')">start test</a>
Versionhistory
1.0 Initial release under MIT-license
1.1 Removed recursion and simplified code