Hype Document Loader

Extension Project
6

Code example for creating your own loading indicator callback

Here is an example (requires Hype DocumentLoaderInfo 1.2+) to implement your own loader (don't need to enable it in Hype, even better leave the "Loading indicator" setting off in the IDE saving you some kilobytes):

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDocumentLoader/HypeDocumentLoader.min.js"></script>
<script>
    //set the Hype build your using
    HypeDocumentLoader.setBuild('728');
    
    function documentData(hypeDocument, element, event){
        // create your own loading screen display (remeber
        event.data.loadingScreenFunction = function(shouldShow, mainContentContainer){
            // your logic here using the arguments provided by Hype
            console.log('loadingScreenFunction', shouldShow, mainContentContainer);
        }
        // return to apply
        return event.data;
    }
    
    if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
    window.HYPE_eventListeners.push({"type":"HypeDocumentData", "callback":documentData});
</script>

As a reference here is the function Hype usually defines at that point giving you the know little grey rounded notification with the label "Loading". All the following code is actually hard coded into the export Hype makes so disabling "Loading indicator" and doing your own can even save you some kilobytes.

function (shouldShow, mainContentContainer) {
	var loadingPageID = mainContentContainer.id + "_loading";
	var loadingDiv = document.getElementById(loadingPageID);

	if(shouldShow == true) {
		if(loadingDiv == null) {	
			loadingDiv = document.createElement("div");
			loadingDiv.id = loadingPageID;
			loadingDiv.style.cssText = "overflow:hidden;position:absolute;width:150px;top:40%;left:0;right:0;margin:auto;padding:2px;border:3px solid #BBB;background-color:#EEE;border-radius:10px;text-align:center;font-family:Helvetica,Sans-Serif;font-size:13px;font-weight:700;color:#AAA;z-index:100000;";
			loadingDiv.innerHTML = "Laden";
			mainContentContainer.appendChild(loadingDiv);
		}
 
		loadingDiv.style.display = "block";
		loadingDiv.removeAttribute("aria-hidden");
		mainContentContainer.setAttribute("aria-busy", true);
	} else {
		loadingDiv.style.display = "none";
		loadingDiv.setAttribute("aria-hidden", true);
		mainContentContainer.removeAttribute("aria-busy");
	}
}
1 Like