Software Archive
Read-only legacy content

Toggle Sidebar

madson_g_
Beginner
315 Views

How to toggle sidebar properly? I created a button on header to open it with style overlap using "uib_sb.toggle_sidebar($("#sidebar"));", so this button is under the sidebar when it is open. How to properly close the sidebar when I click outside it?

0 Kudos
1 Solution
Chris_P_Intel
Employee
315 Views

It has a drag slide operation that you can elect.

If you want to toggle when clicking outside, then you'll need to do a bit of planning.  If there is an element of the DOM that exactly matches the negative space that you want to be clickable, then you would simply register an event handler on that and fire that same script. (If you look at the sidebar.js file, you'll see that the API supports more than just toggle. There are also commands for opening and closing)

But, it's likely there is no such DOM element.  So you'll need to understand event bubbling.    Any single click event is sent to every DOM element that has a click handler whose rectangle encompasses where the click occurred. And that event starts in the highest z-index order element and then propogates down to the lowest.  

So you could start by putting a handler to close the sidebar on the main document  $(document).click(function() { ... });   The main document is the lowest element and is the last to receive the event.

BUT you will also have to put a matching handler on the sidebar that will stop propagation:

$("#my-sidebar").click(function(evt){ evt.stopPropagation(); })

Does that make sense?  So now, if a click occurs in the rectangle of the sidebar, it will eventually hit the handler that stops propogation and thus the closing handler on the document will not fire.    And if a click occurs outside the rectangle of the sidebar, it will eventually make its way down to the document, where the sidebar will be closed.

If you use stopPropagation() in any of your other click  handlers, then this may get more complicated, depending upon the exact behavior your desire.

 

Hope this helps,

 

Chris

View solution in original post

0 Kudos
4 Replies
Chris_P_Intel
Employee
316 Views

It has a drag slide operation that you can elect.

If you want to toggle when clicking outside, then you'll need to do a bit of planning.  If there is an element of the DOM that exactly matches the negative space that you want to be clickable, then you would simply register an event handler on that and fire that same script. (If you look at the sidebar.js file, you'll see that the API supports more than just toggle. There are also commands for opening and closing)

But, it's likely there is no such DOM element.  So you'll need to understand event bubbling.    Any single click event is sent to every DOM element that has a click handler whose rectangle encompasses where the click occurred. And that event starts in the highest z-index order element and then propogates down to the lowest.  

So you could start by putting a handler to close the sidebar on the main document  $(document).click(function() { ... });   The main document is the lowest element and is the last to receive the event.

BUT you will also have to put a matching handler on the sidebar that will stop propagation:

$("#my-sidebar").click(function(evt){ evt.stopPropagation(); })

Does that make sense?  So now, if a click occurs in the rectangle of the sidebar, it will eventually hit the handler that stops propogation and thus the closing handler on the document will not fire.    And if a click occurs outside the rectangle of the sidebar, it will eventually make its way down to the document, where the sidebar will be closed.

If you use stopPropagation() in any of your other click  handlers, then this may get more complicated, depending upon the exact behavior your desire.

 

Hope this helps,

 

Chris

0 Kudos
madson_g_
Beginner
315 Views

So, I have the page with id="secondpage" and xdk created a sub id "page_74_57" when I created a row and put the elements inside it.

When I tried to use "secondpage" id as a handler to close the sidebar, I noticed that when I clicked inside the sidebar rectangle it closes, what it´s not my intention.

When I used "page_74_57" id as a handler, some parts of the page didn´t work to close the sidebar because the row "page_74_57" was not covering the whole page.

By what I understood, if I use "secondpage" as before and stopPropagation on #sidebar it will work because it is excluding the sidebar from the close click event. Is that what you mean?

0 Kudos
madson_g_
Beginner
315 Views

It is working with this management. Thanks.

0 Kudos
Leandro_S_1
Beginner
315 Views

Hello, there's another (and more simple) solution.

In index_user_scripts.js add the snipt code below

  $( "body" ).click(function( event ) {
  uib_sb.close_all_sidebars();
});

The event catch all clicks em body tag.

 

Bye!

0 Kudos
Reply