1. Home
  2. Development
  3. How to retrieve senna.js app object in theme's script?

How to retrieve senna.js app object in theme's script?

Peter Pan, modified 5 Years ago.
How to retrieve senna.js app object in theme's script?
New Member Posts: 22 Join Date: 1/14/15 Recent Posts
Hi all,

I am still getting to grips with how Senna.js works. Since its mostly transparent  when developing a theme its  difficult to find examples when its needs to be specifically invoked. I am not sure if I even need to do this for the issue I want to resolve. Let me set the scene:
I have customised the navigation menu with some css animations.  On link click I have a custom function to change the class for the animation.  The animation is terminated when this function returns. I would like the animation to finish and then display the results of the page fetch.
I am thinking as follows:
Do an "e.preventDefault()" call at the end of my function. Then in a "onanimationend" event listener fire the senna "app.navigate()" method. Three questions:
  • Is this the best way to go? (It would be great if the fetch can start while the animation is playing out.)
  • The page fetches are to different sites with own domains but on the same liferay instance - will this impact how senna works?
  • How do I get a reference to the senna app in a freemarker theme?
thanks
Peter Pan, modified 5 Years ago.
RE: How to retrieve senna.js app object in theme's script?
New Member Posts: 22 Join Date: 1/14/15 Recent Posts
So I found out there exists "Liferay.spa.app" and and  "Liferay.on" which can be used to override some senna functionality. There appears to be very little documentation on the Liferay.spa  javascript object.  Transitions still happen too quickly, at least on localhost testing and I would like to specify a minimum delay to allow the transition to complete before swapping out. Any ideas how to do this?
thanks
        Liferay.spa.app.setLoadingCssClass("xyz-nav-hide");
        Liferay.on('beforeNavigate', function(event) {
                if(visible) {
                        nav.removeClass("xyz-nav-show");
                        visible=false;
                }
        });