How do I pass arguments to functions?
For example:
onmouseover="hoverColor(*arg*)"
function hoverColor(hypeDocument, element, event) {
*arg*.target.style.fill = 'red';
}
It seems the arguments are locked.
You are correct in the functions argument patten is are locked to a max of three.
But you can send in anything as a substitute. like an array.
But I see potential lack of understanding JS in what you have provided. So for a fuller answer from someone, it may help to give more context in what and why you want to do this and where you expect to place the onmouse listener so on so forth.
Here is a map of the US I’m working on. I would like to have each state have a rollover behavior in which the state simply changes color indicating that it’s interactive.
Instead of having 51 different classes, I was hoping to have javascript code that changes the fill color of the SVG of the state the mouse is rolling over.
Event is defined as an JS object so you can use it to pass in additional parameters
hypeDocument.functions().myFunc(hypeDocument, null, {
a:1,
b:2
});
or define your functions in hypeDocument with your set of arguments.
hypeDocument.myFunc = function(a,b){
return a+b;
}
// and then use it later across your Hype document
var c = hypeDocument.myFunc(1,2);
Tumult would want you to create them in hypeDocument.customData since 4.x, though. Either way it is easily done to add regular functions.
hypeDocument.customData.myFunc = function(a,b){
return a+b;
}
// and then use it later across your Hype document
var c = hypeDocument.customData.myFunc(1,2);
2 Likes
If you want to change a fill on the element you are currently interacting with the element is actually set to it so you could do something like:
element.style.fill = 'red'
Inside your Hype function and that should solve your need and allow reusing the same Hype function on hover.
In case you want to pass in a selector to influence another element while hovering a trigger you can set the selector as a data attribute in the identity panel on Additional HTML Attributes of the element in question.
Then use it in your hover function:
document.querySelector(element.dataset.selector).style.fill = 'red';
In most cases, I limit the selector to the current scene to avoid unwanted results when deploying to production.
var sceneElm = document.getElementById(hypeDocument.currentSceneId());
sceneElm.querySelector(element.dataset.selector).style.fill = 'red';
2 Likes
Another note … if you are defining the onmouse by yourself outside of Hype IDE, you would need to fetch the Hype API first. Beware that the export name (your choice) differs from the preview name (always index). This becomes relevant when fetching the Hype API as follows:
var hypeDocument = HYPE.documents['index'];
There is a workaround that is name agnostic but it always uses the first found Hype document. That might also not be ideal on a page with more than one Hype document and you not being in control of loading order … but in cases of a single Hype document it works.
var hypeDocument = Object.values(HYPE.documents)[0];
These examples assume you need the hypeDocument outside of the Hype IDE, Head HTML or inside a rectangle on stage (DIV).
Please also consider reading up on Hype Events and getHypeDocument(…) for further ways to get the current hypeDocument when needed outside bespoken scopes.
2 Likes
Moly holy! Thank you for the great explanation. I’ll dig further into this later today.
I do have to say that these forums are an invaluable asset to Hype. Thank you.
To provide more guidance:
The functions that are created in Hype are for responding specifically to Hype events defined in the Actions inspector/Scene Inspector/Symbol Inspector. Therefore the Hype runtime decides what arguments will be sent in during those events and you cannot change it in the editor. Of course, you can call these functions yourself via the hypeDocument API’s functions() call (see docs). If you do a manual call, there is no specific obligation to send in those arguments if your function does not use it.
In your particular case, you’re setting an onmouseover and want to use the Hype function call. I’d first ask if this element is a Hype element, then why not just use the On Mouse Over handler in the Actions inspector? For the code you are running, you could also just have it execute an alternate timeline that sets the element to red. (edit: I see from another post you need 50 of these for the US states so code is probably the right approach!)
If you really did want to do this, then you could use a syntax like:
onmouseover="Object.values(HYPE.documents)[0].functions().hoverColor(HYPE.documents)[0], this, window.event)"
(assuming you only have one HYPE.document on the page with the [0] reference)
Of course this code would be cleaner if you just set it to a normal/globally scoped JavaScript function which you could define in the Head HTML.
As a final note, should you desperately need to send additional arguments to a Hype-based function, you can look into using JavaScript’s arguments keyword. I do not recommend using it, as there’s a small possibility that Hype may add a 4th function in the future which would break your code.