Extend Tumult Hype with JavaScript: hypeDocument.extensions

Extension Project
32

↑ extension index

hypeDocument.setInnerHtmlByClass

Sets all the all elements of a given class to the content one provides. Usefull to update content across scenes and layouts all at once. Elements that want to subscribe to content updates only need to be assigned the associated class

Reasons for using class based targeting over ID based targeting:

  1. Hype has a unique approach when it comes to responsive layouts. As with scenes themselves it keeps them in own HTML braches. Meaning when you have to repeat using elements per scene or layout … ID’s demand to be unique. Therefor it would be very annoying to have to choose a different ID per scene or layout for the same content.
  2. Addressing the content nodes per Class allows them to be in plentiful locations and they are all updated at once without the need to target any element specifically.
  3. One can also use persistent symbols and unique ID’s but one often needs to tweak the design beyond proportional symbol scaling and that is where this technic really helps.
/**
* hypeDocument.setInnerHtmlByClass 1.0
* @param {String} class name to overwrite (don't include dot)
* @param {String} content or HTML used to overwrite class
*/
hypeDocument.setInnerHtmlByClass = function(cl, content) {
    var hypeDiv = document.getElementById(this.documentId());
    var hypeElm = hypeDiv.getElementsByClassName(cl);
    for(var i=0; i<hypeElm.length; i++){
            hypeElm[i].innerHTML=content;
    }
}

Usage:
Presume you have a textfield with the class userName and want to update it:

hypeDocument.setInnerHtmlByClass ('userName', 'Max');

setInnerHtmlByClass.hype.zip (127,2 KB)

4 Likes