Hey there everyone, I am running into a small issue.
I have a Hype javascript function (in resources) and I run that function on scene load.
Now in this function [mainCode] I write all of my code that makes the site work.
How can I call a function defined in mainCode from the parent HTML document?
For instance from javascript in the parent html document, I want to call the function named [callThis] in hype, which is in the [mainCode] javascript function.
This is the mainCode function from Hype:
// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function mainCode(hypeDocument, element, event) {
var callThis = function() {
console.log("Got It!");
}
}
When you define a function (callThis) in side a function (mainCode) as a function literal it is actually a private var. Meaning there is no way you can call this and that isn’t Hype related.
So first you will want to define your functionality either directly in mainCode without wrapping it in the privatecallThis function literal OR hook callThis into the local API of hypeDocument as hypeDocument.callThis = function(){} (note: without the var!) or the global scope of window.callThis.
If you want to call a function you defined in Hype there are different ways you can achieve this, if you hooked your function up in the local scope of hypeDocument or used the Hype functions itself. Using the local scope approach is good if you expect to run multiple Hype-Widgets/Instances on the same page. Each document is registered as a named object member under HYPE.documents once loaded (names depend on Hype file, in previews it’s always index). So you can access your function with HYPE.document['index'].callThis(); if you defined it as hypeDocument.callThis=function(){};.
The main difference is that Hype-functions defined in the IDE (like your mainCode) have a fixed function signature (hypeDocuent, element, event). Meaning you should actually pass these arguments in as far as they make sense… HYPE.document['index'].functions().mainCode(HYPE.document['index']);
If you defined your function as hypeDocument.callThis=function(){...} you can use any signature you want like hypeDocument.callThis=function(a,b){return a+b;}
The last option I mentioned above was defining it as window.callThis=function(){}. This also has freedom of signature and can be called easily as it is in the global scope of the page but it conflicts if more then one Hype document defines it. Only the last document defining it will work. So I personally prefer keeping things local to each Hype document but sometimes a global call is fine. Specially if there is only one Hype document on a page.
On last hint is the event HypeDocumentLoad (search for it on the forum) if you want to make sure a Hype document is loaded before adressing it from outside.
@MaxZieb First, thanks for this enormously helpful post, which answers how to implement things the way I’m aiming to, controlling the Hype doc from controls on the page that will also control non-Hype elements. More generally, thank you – and many others – for everything you contribute to this forum. It’s a phenomenal community here.
I’m also coming to love Hype!
Back to this thread: I tried to recreate your approach of putting a function in the local scope of hypeDocument and then calling it from the console, mimicking the first screenshot above . . . but unfortunately it doesn’t work. I’m sure the reason is simple and I’m just not seeing it, but since I’m pretty new to parts of this and trying to build up from here, I’m hoping you’ll take a quick look and let me know what I’ve done wrong.
