Currently there is no easy way to get the Scene Container generated by Hype so I wrote this little snippet (beware it uses jQuery):
//set scene number and container
var currentSceneName = hypeDocument.currentSceneName();
var sceneNames = hypeDocument.sceneNames();
for(var idx in sceneNames){
if (sceneNames[idx]== currentSceneName) {
window.sceneNumber = idx;
window.sceneContainer = $("div[hype_scene_index='"+window.sceneNumber+"']");
break;
}
}
I am currently need to determine which scene I am in and need to get the index.
So I came up with this;
var array = document.getElementsByClassName("HYPE_scene") //— WE GET AN ARRAY OF THE SCENE CLASS OBJETCS
var HYPE_scene;
for (i = 0; i < array.length; i++) {
if (array[i].style.display === "block"){
console.log( "current scene index = " +i);
HYPE_scene = array[i];
}
}
Hi Mark. If you run this on scene load it will return the index of the scene. Every Hype scene has an attribute “hype_scene_index”. If you run the code before anything else it will pick up the scene.
I think I had tried that at the time, but for my use at the time I was running stuff after load and needed to get the current scene object so I could get elements with class names only for that scene.
Although above I mention the index I was really after the scene element. I was then able to use something like
var hype_vlist = HYPE_scene.getElementsByClassName('hype_mp4video');
Also I am in love with element.querySelector() when you have an element and want to only get it’s elements and not ones contained else where with the same class.
Fair enough, I however like to store the scene as a variable so I just run that code before anything (placing it at the top of any code I'm running on scene load) so that I can reference it later if I need to.
Came up with these functions. Either one works… only initialize once on any scene load and from that point forward you will be able to call these extensions to that particular hypeDocument.
var nr = hypeDocument.currentSceneIndex();
var sceneContainer = hypeDocument.currentSceneElement();
These are the corresponding functions that need to be initialized in your first scene load:
hypeDocument.currentSceneIndex = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if (sa[i].style.display === "block") return i;
}
}
hypeDocument.currentSceneElement = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if (sa[i].style.display === "block") return sa[i];
}
}
I would avoid using element here as it would interfere with the element that called the function If people were attaching this to say a button that they would want it's innerHTML to change to something onclick
var element = hypeDocument.currentSceneElement();
element.innerHTML = "something";
wouldn't work but
element.innerHTML = "something";
var element = hypeDocument.currentSceneElement();
would
###*EDIT the original has been changed since this post. So in summary be careful how you name the variable you use to store the scene element.
It's great how the update in this thread became immediately handy in a completely new thread straight away.
The linked thread may give people a better idea of why we want to be able to get the scene elements.
Which is because more than one scene may be loaded in the DOM but all are hidden except the current one and we need to select a child classed/tagged elements to a particular scene that may also have a version in another scene.
Okay, to hopefully close this thread with a solution that can easily be reused and copy & pasted I’ll give it a hopefully final solution and mark it as solved. Copy&Paste the following into your Head-HTML
<script>
function extendHype(hypeDocument, element, event) {
/**
* currentSceneIndex
* @return {Number} gives you the current scene index
*/
hypeDocument.currentSceneIndex = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if (sa[i].style.display === "block") return parseInt(sa[i].getAttribute("hype_scene_index"));
}
}
/**
* currentSceneElement
* @return {HTMLDivElement} gives you the current scene element
*/
hypeDocument.currentSceneElement = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if (sa[i].style.display === "block") return sa[i];
}
}
/* add more extentions here */
return true;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":extendHype});
</script>
From there on you can use it in any hype function in your document as follows:
If people were attaching this to say a button that they would want it's innerHTML to change to something onclick