Javascript API to load/unload hypeDocuments


(Alexandre Geissmann) #1

We’re working on a presentation project in which we want to load multiple hype documents. Our structure rely on a single-page application using Vue.js (a reactive DOM library) to handle user interactions.

Is there any plans on building an API to dynamically load / destroy hype instances ?
So we can call & destroy a hype instance via a directive, right now we load the generated script dynamically, and it works but sometimes the runtime is crashing later when we remove the main container.

Thanks


#2

As far as I can see there is no point. Hype isn’t for that really. Hype is a tool to make HTML5 animation easier. Hype is also not a single object or element it’s a collection of elements that the user creates and then upon export all of the info to control said elements is created via a script. If you wanted to do this dynamically then where would the info for your elements to move and scale and and any actions on them come from. You would then have to have a way to dynamically update the generated script.

If they went down the route as you have mentioned then it would just become another Javascript library and I wouldn’t see the point.


(Alexandre Geissmann) #3

Maybe there is a misunderstanding.
Let me put this in other words:
As far as I know Hype isn’t providing some robust API to embed a hypeDocument into another page, (without using iframes for exemple) despite the fact its a common usage, in my opinion.
-> see How to call hype js function from external HTML

If only we could have access to a method like

HYPE.documents['DocumentName'].destroy()

, then we could handle load and unloading hype documents safely and benefit from a clean integration and external control within a single page app.


(Alexandre Geissmann) #5

Any insight @Daniel ? We’re building an app right now and we seriously consider Hype as a way to embed small animations but we need to know if there is any chance this will be developed in the future.

Thanks a lot.


(Mark Hunte) #6

Just out of curiosity , Are you doing something like this ?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
        <title>blue</title>
        <style>
            html {
                height:100%;
            }
        body {
            background-color:#FFFFFF;
            margin:0;
            height:100%;
        }
        
        #butt {
        position:absolute;
        top:200px;
        left:500px;
        z-index:999;
        
        }
        </style>
        
        
        <meta name="viewport" content="user-scalable=yes, width=600" />
     
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        
        <script>
            $( document ).ready(function() {
                                var mainDiv = document.documentElement.querySelector("#switch" );
                                $(mainDiv).load('blue2.html')
                                });
           
            
            
            function myFunction(e) {
                
             
               $(e.target).css( 'pointer-events', 'none' );
                
                setTimeout(function(){ $(e.target).css( 'pointer-events', 'auto' ); }, 2000);//-- in sure we do not get a hype id error
                var mainDiv = document.documentElement.querySelector("#switch" );
                var switched = mainDiv.getElementsByTagName('div')[0].id;
               
                
                
                ( switched == "red_hype_container"  || switched == "red_hype_container-1" ?   $(mainDiv).load('blue2.html') :   $(mainDiv).load('red.html'));
             
             
             
             
            }
        </script>
      
    </head>
<body>

<!-- copy these lines to your document: -->
<div id="switch">
    
   
    <div >
      
    </div>
    

</div>
<button id="butt" onclick="myFunction(event)">Click me</button>

<!-- end copy -->

</body>
</html>

(chris1) #7

I’ve often wondered the same thing. When I use to develop large Flash sites I’d make a lot of use of the _loadLevel feature to manage the presentation and cross-communication of multiple elements within a single screen. It would be fantastic if a similar thing could be done with Hype.


(Alexandre Geissmann) #8

Up ! Any help on this ?