RE: How to listen to Product Menu(Left Navigation) open and close change

Jean Wang, modified 6 Years ago. New Member Posts: 3 Join Date: 1/21/14 Recent Posts
I'm using the Xtivia DXP Carousel portlet.  The problem I'm having is that when the Product Menu opens/closes, the images inside the carousel portlet isn't resized till the next image appears.  That leaves a few seconds where the image either protrudes out or is a lot smaller than the portlet containing box, depending on the action of opening or closing the Product Menu.  The solution I would like to implement is to have a liferay javascript lifecycle hook and listen for open/close, then reload the carousel portlet.  Is there an event or something that I can listen to for the opening and closing of Product Menu?

Thank you,
Jean
Patrick Yeo, modified 6 Years ago. Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
You can listen for the jQuery event `open.lexicon.sidenav` and `closed.lexicon.sidenav` with something like:

$(document).on('open.lexicon.sidenav', function(event) {
  if ($(event.toggler).hasClass('product-menu-toggle')) {
    // Do stuff
  }
});

These events are fired whenever a side navigation item is open / closed (e.g., when you open the info panel in documents and media). You might need to scope it to only when it happens with the Product Menu.

There is also a css class that is added on the body element when the product menu is open. You might be able to do a css hack on the carousel using

body.open .your-carousel-image {}
and

body.closed .your-carousel-image {}

The other admin panels (Add Panel and Simulation Panel) add a class `.open-admin-panel` to the `body` element.
Jean Wang, modified 6 Years ago. New Member Posts: 3 Join Date: 1/21/14 Recent Posts
Thank you for your help! It worked.
Belis David, modified 6 Years ago. New Member Posts: 3 Join Date: 5/6/19 Recent Posts
How do I disable the product menu from automatically opening based on its previous state in Liferay 7.1?