This is a geeky extension. It uses a tiny runtime proxy to fetch the loader data directly offering instant access to it. This allows to read and maipulate some values you wouldn't usually haveaccess to … starting with a list of all associated resources. Some values are already part of the regular Hype API others are very geeky and useful to only a subset of developers. Be reminded that the internal Hype data structure is not officially supported and could change at any time… neither the less, this extension offers ways for certain projects to inspect files, layers, scenes and timelines for whatever reason that might be necessary. This extension offers two new Hype events.
HypeDocumentData
This callback acts as a filter and receveis the data in event.data
. You can create and act upon the data. If you manipulate the data and want that to be passed on to the build process return it at the end of the callback.
<script>
//EXAMPLE: Adding something to the head of the page
function documentDataAddToHead(hypeDocument, element, event){
console.log ('HypeDocumentData', event.data);
// manipulate data. For example add something to the head
event.data.headAdditions.push('<!-- hello -->');
// return to assign
return event.data;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentData", "callback":documentDataAddToHead});
</script>
HypeDocumentRender
This callback offers a way to prevent Hype from rendering immediately and allows to delay/manage the render process. It receives the render command as part of the event as event.render
and can be triggered at any time with event.render();
. If you take over the time you want Hype to render disable regular rendering by returning false from the callback.
<script>
//EXAMPLE: Render Hype with an one second delay
function documentRender(hypeDocument, element, event){
// create some visual feedback (totally optional)
var containerElm = document.getElementById(event.id)
var newElm = document.createElement('div');
newElm.innerHTML = "<br>Let us delay this for 1 second!";
containerElm.appendChild(newElm);
// let us delay
setTimeout(function(){
event.render();
},1000);
// return false to block instant render
return false;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentRender", "callback":documentRender});
</script>
Child extension in the works: Thinking about adding some helper functions to interpret the data...this will become its own extension using the event callback to not bloat the core functionality of this fine little helper. Have fun.
Code repository on GitHub:
Demo (output in the console):
HypeDocumentLoader.html
Download Demo:
HypeDocumentLoader.hype.zip
Content Delivery Network (CDN)
Latest version can be linked into your project using the following in the head section of your project:
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDocumentLoader/HypeDocumentLoader.min.js"></script>
Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at worldoptimizer/HypeDocumentLoader CDN by jsDelivr - A CDN for npm and GitHub
Learn how to use the latest extension version and how to combine extensions into one file at