Persistent symbols are actually persistent only for the Hype runtime but the HTML node is actually mode around … so third-party content most likely will be reinitialized as it is detached and reattached in the DOM.
Long story short… four demos built with Hype will be put in one package. The package contains a guide, that step by step present how to run the demos and what to say.
The ‘guide’ Hype document is the main one. The user always start there. Either to prepare or to run the demos in a sequence 1,2,3,4. (The guide elements can be turned on/off.)
Painted me into the corner of trying with iFrames within persistent symbols.
I see a way out by keeping all steps for the guide for a particular demo within one scene. More messy! Will not support keyboard navigation the way I want.
Still, get an iFrame in the generated code if my Hype element types is ‘HTML widget’ with ‘Embedded HTML’… or…
…a Rectangle, with that div/‘js-inject script’ as innerHTML for the Rectangle. In this case; no visible result, no errors in Safari, Firefox, Chrome – on a Mac.
Have seen a post from @MarkHunte…
…concluding you get an iFrame however you turn yourself around. Some time ago.
Symbols are actually small Hype documents. And if you need to dynamically add complete Hype Documents try injecting them. Basic setup… just put the HTML you’d normally copy and paste into an innerHTML … from there you can tweak it to make it dynamic. But that has been solved by @h_classen.
But often it is good to try the simpler approach yourself first to understand what Hans has solved.
This is correct; Persistent Symbols get moved from scene to scene, and thus their DOM parentage changes. Browsers have the behavior that they will reload iframes in this case. It can be demonstrated with code like:
I agree with the suggestions above that Symbols (and thus Persistent Symbols) are in general the use case for this feature. That said, organizationally I definitely understand that a full document can be better since it can have multiple scenes and can be easier to edit.
@h_classen, have looked at the thread on structure approach. I don’t get how this would be helpful in my case.
Think I will solve it like this:
Skip the persistent symbol with an iFrame within it.
Just have an iFrame on those three scenes for that particular demo.
First scene: an animation will play within the iFrame and stop after 2 seconds.
The user should just do a click on a button within that that iFrame (the button doesn’t have a mouseOver or mouseDown visual change).
Will capture that click through an invisible element above the iFrame and when the click happens; move to next scene…
…where there is a screen capture of the state of the content in the iFrame when the first animation was stopped.
At scene two:
messages sent to the Hype document in the iFrame (a handfull of events to be triggered),
wait like 0.05 seconds and fade out the screen capture.
The effect will be: new animations played within the iFrame. Focus for interaction still at the main document. (Not within the iFrame.)
And for the last scene, same approach.
Keyboard navigation, ARROW UP/ARROW DOWN etc for moving between scenes in the main document, will work. I hope
Will be five ‘demos’ to handle in this project.
For good and bad, the approach to solve the navigation, animations will be different for each one of them.
Aimed for a general mechanism, will not work the way I want.
it would prevent you from using iFrames ... and the problem of the iFrames reloading when within the persistent symbol ... a communication between the hypedocuments with Hypes API would also be easy. But any solution that you feel confident with and fits your needs is a good one