Extend Tumult Hype with JavaScript: hypeDocument.extensions

Extension Project
31

↑ extension index

hypeDocument.sceneInfo

This Extension returns the scene element, scene number and scene count, scene name list
.

		
	
	
	
/* hypeDocument.sceneInfo 1.0
* @return {object} gives you the current scene, Name, number and the total count of scenes.  {sceneName: currentSceneName, sceneNumber:Number,sceneElement:Element,sceneCount: Number}

* @Returned object break down
  sceneName = The current scene's name Type: String 
 sceneNumber = The current scene's display order number Type: Number 
 sceneElement = The current Scene's Div Element  Type: Hype Element 
 sceneCount = Total count of all scenes  Type: Number 
*/

 hypeDocument.sceneInfo = function(){
 
var sceneElement;
 //-- get current scene
 var hypeContainer = document.getElementById(hypeDocument.documentId());
    var scenArray = hypeContainer.getElementsByClassName("HYPE_scene");
    for (i = 0; i < scenArray.length; i++) {
        if (scenArray[i].style.display === "block")  sceneElement = scenArray[i];
    }

 


 
  	var sceneNumber = sceneElement.getAttribute('hype_scene_index');// get the index number of the current scene name. Add 1 to make the index start from 1 instead of 0.
	var currentSceneName = hypeDocument.currentSceneName(); // get the curent scene name 
	var sceneNameArray = hypeDocument.sceneNames();  // get an array of all scene names 
	  

	return {sceneName: currentSceneName, sceneNumber: Number(sceneNumber)+1 ,sceneElement: sceneElement ,sceneCount: Number(sceneNameArray.length)}
  
  }

Returned object break down
sceneName = The current scene's name, Type: String
sceneNumber = The current scene's display order number, Type: Number
sceneElement = The current Scene's Div Element, Type: Hype Element
sceneCount = Total count of all scenes, Type: Number

Usage:

var sceneInfo = hypeDocument.sceneInfo()

You may want to set a navigation label to display scene name and numbers,

fooElement.innerHTML = sceneInfo.sceneName + " - " + sceneInfo.sceneNumber + " of " + sceneInfo.sceneCount ;

--> fooSceneName - (1 of 5)

Get the current scene element so you can target a child element that shares a class name with similar elements on other scenes.

var someButton = sceneInfo.sceneElement.querySelector('.someButton’);

Example:

ScenInfo Extension.hype.zip (31.6 KB)

Extension code ( text file )

hypeDocument.sceneInfo 1.0.txt.zip (1.2 KB)

3 Likes