Or use one template slide deck and separate the content out of it although, making the templates reusable with multiple content sets. I developed a state machine that does just that (to be released soon).
1 Like
That’s been my first suggestion … but then i realized that it’s been the aim to built those docinstances within hype by hand. why not … it gives some more flexilility.
excited for the state machine 
1 Like
Amazing guys. Thank you so much for your suggestions. As @MarkHunte provided a working example, I thought I would try @MaxZieb 's HypeGlobalBehaviour as well to see what approach is more applicable for my needs. I’m probably missing something obvious, but I could only get it to work with the iFrames, not the embedded hype code. Perhaps…
I just realised that I needed to include the HypeGlobalBehaviour.js in that embedded code in the same way as jquery? It’s working now.
So the embed code looks like this:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/HypeGlobalBehavior.js"></script>
<div id="deckaforumexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:1280px;height:720px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="https://www.plughole.com/DeckAForumExample.hyperesources/deckaforumexample_hype_generated_script.js"></script></div>
Would You provide a Hype document to the Forum for us to examine?
Thanks!
Here you go… PresentationForumTest.zip (646.1 KB) Seems to be working. I only added the behaviour to slide 1 and 2 in DeckAForumExample, so from the Custom presentation you will see it in on slide 2 as an embed and slide 3 as an iFrame. Both now work.
Cheers
1 Like
You can actually also link Hype GlobalBehavior from the CDN (like jQuery) and benefit from browser caching on this (instead of putting it into your resources). See…
1 Like
Thank You! 
1 Like
Updated the file a little bit https://www.plughole.com/CustomDeckForumExample.html
Leaning towards iFrames rather than embeds because I can’t make the embeds always work with custom functions. Maybe something to do with unique IDs, or having to include anything added into the head of the document which I am embedding in to the actual embed code. For example, jquery and @MaxZieb 's HypeGlobalBehavior.js
I don’t know what the difference in performance between the two may be or other caveats, but it’s all work in progress. I wonder if it’s possible to load all content first, maybe having a loader animation at the first slide, or do iFrames not work like that?
Also with iFrames it’s possible to target individual scenes and even times in timelines in individual scenes within any deck by using this code I found on the forum by @h_classen :
var checkHash = function() {
var hash = window.location.hash.substring(1).split("?");
for (var i = 0; i < hypeDocument.sceneNames().length; i++) {
if (hypeDocument.sceneNames()[i] == hash[0] && hypeDocument.currentSceneName() != hash[0]) {
hypeDocument.showSceneNamed(hash[0]);
hypeDocument.goToTimeInTimelineNamed(parseInt(hash[2]), hash[1])
break;
}
}
};
if (window.loadedHashLocation != true) {
window.loadedHashLocation = true;
checkHash();
window.onhashchange = checkHash;
}
window.location.hash = "#" + hypeDocument.currentSceneName();
https://www.plughole.com/DeckBForumExample.html#CentralDeckB_Slide2
Also added a full screen toggle in bottom right corner.
Added keyboard navigation, which is a bit clunky.
But all-in-all seems promising.
1 Like
of course id’s have to be unique when working with regular embeds. the better approach is to use class in combination with querySelector (and a fitting root-element) which will return only the first element matching the query.
the normal embed would solve your reloadingissue with iFrames too.
preloading:
iFrames have an onload-event, but i guess more reliable is Hypes HypeDocumentLoad-Event. You could grab it for each embed an forward to the Wrapperdoc using HypeGlobalBehavior again …
a more common approach would be lazyload, but depends on your needs
1 Like
I did also make an example where the scene hype embeds ( using create … etc ) were swapped out similar to how I did the iframes.
This worked really well but the one issue I ran into, was no matter what I did hype or the DOM would add a “-1” to the end of the embed sites id and would keep incrementing it. Could not find a way to stop it. i.e deckbforumexample_hype_container-1, deckbforumexample_hype_container-2
This meant the animation buttons would only work once and then the hype runtime would throw a fit.
It maybe I was having a logic fart… but gave it up…
2 Likes
I also did some analysis on nesting Hype documents. Mostly to see how it affects memory. The findings were that Hype can’t be easily tossed to the garbage collector without a reworked runtime. @jonathan suggestion was to use iFrames for the time being until Hype has some sort of remove function.
4 Likes
did a dynamic loadingtest … using fetch to load exports index.html, extracting hypes div, applying … works well but disturbs the masterhypefile … so yeah, nesting hypedocs does not seem to be a good advice … my bad
//////
edit: seems to work properly with equal runtimes …
1 Like
OK, so it seems the general consensus is iframes is the way to go? I have updated the file, using only iframes within the Custom Deck to display content from DeckA and DeckB, with some interesting results… at least for me 
To make things easier I am using rectangles to contain the iframe instead of the widget. I gave them a class “embed” and added some additional HTML attributes (for now just called “page” and deck") in order for it to be easy to use, just inputting from which deck and which slide I want to insert.
Then I call this function on scene load on the first Custom Deck scene:
var embeds = document.querySelectorAll(".embed");
for ( i=0; i < embeds.length; i++)
{
var deck = embeds[i].getAttribute('deck');
var page = embeds[i].getAttribute('page');
embeds[i].innerHTML = '<iframe frameborder="0" style="width:100%;height:100%;border:none" allowfullscreen="true" src="https://www.plughole.com/'+ deck +'ForumExample.html#'+ deck +'_'+ page +'"></iframe>';
}
I suppose further down the line I could have “base URL” etc as additional attributes, but I understand that data-* data attributes is the way to go… except I couldn’t get that to work. A Complete Guide to Data Attributes @MaxZieb
Anyway, the behaviour is a bit strange, in that you have to go to the very end of the slidedeck and then back again in order for any of the iframes to load. After that, everything appears as expected. So I’m probably calling the function in the wrong place/order.
The light/dark mode toggle works really well, except that the #DarkMode and #LightMode behaviours have to be added to every scene of DeckA and DeckB in order to work. Which is fine as they are just duplicate scenes. Of course if you go to the first slide of Custom Deck the iframes function gets called again and they get reset.
Anyway, update here, as before: https://www.plughole.com/CustomDeckForumExample.html
And here are the updated files if anyone wants to look: PresentationForumTest.zip (488.6 KB)
Cheers
Hmm…
In my example above I never had the problem of loading… also I ponted to the
Your data attributes need to be defined as such.
so the key names should be:
data-page
data-deck
then you should be able to use,
embeds[i].dataset.page
Also I would just change the src of the iframe in the rect rather than the whole iframe ( see my example above )
UPDATE.
So a very quick look at your example. Part of the problem I found in the project is the sources for the pages are not being found. 404. ??
I also did a little cjange on the split deck scene and added the onload embed to that.
Then change the code to ( and url to one that I knew was existing ):
var embeds = document.querySelectorAll(".embed");
for ( i=0; i < embeds.length; i++)
{
var deck = embeds[i].getAttribute('deck');
var page = embeds[i].getAttribute('page');
embeds[i].querySelector('iframe').src="https://2020-uki.s3.eu-west-2.amazonaws.com/CMS/forumTest/"+ deck +'ForumExample.html#'+ deck +'_'+ page
console.log(page);
}
In the scene I added the iframes with empty src. to both rects.
Which does work ( not sure fully correct yet ) and as you can also see the project is throwing up a lot of errors that you need to look at.
1 Like
just a small non-iframe-hype-loader-experiment.
setup:
a hype-element with data-attribute -> data-hypeimporturl
the values url-target is a standard hype-html-export
////
On HypeScenePrepareForDisplay the script will fetch the file create a documentFragment and append it to the desired hypeelement …
so imports won’t bloat the first load … just loaded when needed
Happy testing
BE SURE NOT TO MIX HYPEDOCUMENTS WITH DIFFERENT RUNTIMEVERSIONS
loadStandardHypeExport.hype.zip (17.9 KB)
2 Likes
@h_classen I had a look at your document, but I must confess, I haven’t the foggiest idea of what’s happening there. I tried inputting my own url but nothing showed up… In all honesty, I don’t even know what this means 
Sorry.
So, what I thought I would try for this iteration is a combination of @MaxZieb’s extension hypeDocument.setInnerHtmlByClass 1.0
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;
}
}
and @MarkHunte’s
function sceneTitleCallback(hypeDocument, element, event) {
hypeDocument.getSymbolInstanceById('sceneNameSymbol').element().children[0].children[0].textContent = hypeDocument.currentSceneName() ;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneTitleCallback});
So I cobbled together this:
function extendHype(hypeDocument, element, event) {
hypeDocument.PopulateIFrames = function() {
var embeds = document.querySelectorAll('.embed');
for(var i=0; i<embeds.length; i++){
embeds[i].querySelector('iframe').src="http://plughole.com/" + embeds[i].dataset.deck + "ForumExample.html#" + embeds[i].dataset.deck + "_" + embeds[i].dataset.page;
}
}
return true;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":extendHype});
But I still need to call a function that calls hypeDocument.PopulateIFrames(); on scene load in order for it to work. I thought that the HypeSceneLoad callback would take care of that.
A standard Hype-Export includes a html-file that includes those lines:
<div id="flitzeflink_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="[flitzeFlink.hyperesources/flitzeflink_hype_generated_script.js?95232](https://www2.aachener-zeitung.de/zva/karlo/flitzeflink/flitzeFlink.hyperesources/flitzeflink_hype_generated_script.js?95232)"></script>
</div>
the script will fetch the url pointing to this html-file, extract the div and script and append those to the hypeelement with the corresponding data-attribute. that’s all …
Hypes Runtimes during the years: https://github.com/tumult/hype-runtime
1 Like
I can’t find a way to export an html file with that content, so I input it manually to see if it works.
<div id="deckaforumexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="[DeckAForumExample.hyperesources/deckaforumexample_hype_generated_script.js?54030](https://www.plughole.com/DeckAForumExample.hyperesources/deckaforumexample_hype_generated_script.js?54030)"></script>
</div>
I replaced the data-hypeimporturl in the document you shared with: “https://www.plughole.com/DeckAForumExample.html” but got errors
Accessing the file directly by visiting the link shows a blank page. 404 error on the script file.
OK, so this is now working pretty well I think. Not perfect, but reasonably smooth.
https://www.plughole.com/CustomDeckForumExample.html
I used @MarkHunte’s example: Two Tips, css vars and HypeScenePrepareForDisplay to load the iFrames and the data on every page.
The preload is only effective if the transition is not instant. Push left/right up/down transitions work really well, but they make me dizzy, so I opted for a fade for now. Maybe I will somehow try to specify a delay before the transition starts to allow for extra time to load content, but that would likely delay the PrepareForDisplay as well and end up with the same result.
<script>
function onLoadCallback(hypeDocument, element, event) {
hypeDocument.functions().GetData();
hypeDocument.functions().ImportIFrames();
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeScenePrepareForDisplay", "callback":onLoadCallback});
</script>
3 Likes
CORS is a restriction: https://en.wikipedia.org/wiki/Same-origin_policy
… loading content from same domains will always be ok …
anyway, i did a small example dynamically loading three different hypeexports into one Masterfile using the above script:
https://www2.aachener-zeitung.de/zva/karlo/test/loadStandardHypeExport/
2 Likes