Target elements within hype scene from a HTML widget in that scene

Using JavaScript with Hype
1

Hi

I have a very weird scenario in which there is a HTML widget in my scene with a manually added button. I need to be able to hide an element in the scene (a rectangle in this case) by clicking the button inside the widget. However, I need to be able to do it with an event listener attached to that button (see buttons inner html)

I tried this and that posts but still struggling.

Any help would be greatly appreciated.

HTML_widget.hype.zip (27.9 KB)

Thanks

Greg

2

Hi Greg,

try this…

document.querySelector("#hide-btn").addEventListener("click", function () {

var hypeDoc = parent.HYPE.documents[Object.keys(parent.HYPE.documents)[0]];

hypeDoc.getElementById("rectangle").style.display = "none";

});

HTML_widget_kt.hype.zip (24.9 KB)

1 Like
3

WOW! Thanks for that! Works like a charm.

Syntax is a little complicated so I’m trying to understand what is going on. When you declared the hypeDoc variable, what does the “Object.keys” refer to and why is the ‘parent.HYPE.documents’ repeated?

Any pointers would be greatly appreciated.

Thanks!

4

HYPE.documents is a javascript object where the keys are the names of the document and the values are the document object itself.

The inner Object.keys(parent.HYPE.documents)[0] call is basically saying "let's get the first key," then it is using it in the documents object to get the value of this first key. Extracted out with names, it would be more like:

var hypeDocNames = Object.keys(parent.HYPE.documents);
var firstHypeDocName = hypeDocNames[0];
var hypeDoc = parent.HYPE.documents[firstHypeDocName];

Another technique would be to use the Object.values() method just to get the values, and use the first one:

var hypeDoc = Object.values(parent.HYPE.documents)[0];

(In both of these methods, it is really assuming there's only a single hype document on the page. If this isn't the case, you'd need to know the name itself and look it up that way.)

1 Like
5

Thank you Jonathan for taking time to write this explanation. It all starts to make sense now.

I should really start diving deeper into Hype’s API

1 Like