Turbo87 / sidebar-v2

A responsive sidebar with tabs for Leaflet, OpenLayers, Google Maps, ...

Home Page:https://turbo87.github.io/sidebar-v2/examples/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow sidebar icons to be tools or links that don't open a panel

woodbri opened this issue · comments

I have two use case where I would like to have a button on the sidebar that does not open a panel:

  1. I would like to add a measure tool and the button would toggle the tool on/off changing the button background to indicate state
  2. I would like the button to open a modal dialog for situations where the sidebar is not wide enough.

It seems like you might have thought about something like these you have role="tab" and maybe adding role="button" and role="toggle" would allow nice integration of other behaviors.

@woodbri I also would need case 1 e.g. to toggle user position on/off. I thought one good way would be to add the class active, but this would mean 1) there could be more active tabs 2) the panel should not open.

I trying to hack it with jQuery, my thoughts are this:

  • add class="measure" to A tag, when active addClass('measure-active')
  • add a click handler to class measure the toggles the control by removeClass('measure-active') and turns off measure interactions, or turns it on
  • figure out how to disable your sidebar events on the A tag with class="measure"

This should all get done inside the sidebar class, but at the moment I'm just trying to work around it to see if I can get it to work.

commented

I also need this feature and scratching my head. Any further thoughts so far? Thanks

I ended up adding a class .not-tab to the to the links in the side bar that are not tabs, ie; I don't want them to open the sidebar. And on some of them I opened a modal dialog to get access to more space than the sidebar offered, and had the modals close the sidebar with the following code snippets.

// now disable all not-tab links so sidebar ignores them
$('.not-tab').each( function(i) { this.parentNode._sidebar = null; });

// close the sidebar if we are opening a modal dialog
$('.modal').on($.modal.OPEN, function(event, modal) {
    sidebar.close();
});

This is already supported, but not well documented. If one just drops the href='#' from the link, the sidebar code will ignore those buttons, and you can attach any behaviour you want.

For the original discussion, see #68