Dropdown support for tabbars

[bbottema]

Added dropdown support for tabbars, which means that you can specifiy an optional groupname per pane and all panes with the same groupname will be grouped together in a dropdown-as-a-tab.

Although I was able to test this by editing the compiled bootstrap-ui-0.1.0.js directly (and the templates), I was unable to verify the changes in the bootstrap-ui repo itself. For some reason, using cygwin, a clean cloned fork already yielded 121 failing tests.

usage:

    <tabs>
        <pane heading="tab 1 no group">Static content 1 no group</pane>
        <pane heading="tab 2 no group">Static content 2 no group</pane>
        <pane heading="tab 3 group 1" group="group 1">Static content 3 group 1</pane>
        <pane heading="tab 4 group 1" group="group 1">Static content 4 group 1</pane>
        <pane heading="tab 5 group 2" group="group 2">Static content 5 group 2</pane>
        <pane heading="tab 6 group 3" group="group 3">Static content 6 group 3</pane>
    </tabs>

[bbottema]

I fixed the lint and test errors (Travis is green now), but I can't test the compiled demo page.

[ajoslin]

This is cool, but seems like a really specific case. Couldn't this be done with the new HTML-in-tabs-title feature and perhaps an addition of a way to make a tab be given no visible heading?

<tabs>
  <pane>
    <pane-heading>
      <a class="dropdown-toggle">Group 1</a>
      <ul class="dropdown-menu">
        <li ng-class="{active:option1Active}" ng-click="option1Active = true">Option 1</li>
        <li ng-class="{active:option2Active}" ng-click="option2Active = true">Option 2</li>
      </ul>
    </pane-heading>
    <!--this pane has no content-->
  </pane>

  <!-- no-heading would make this pane not be given a heading,
    and in this case you'd use it to make the dropdowns  open the tab instead of the norm -->
  <pane active="option1Active" no-heading>
    Option 1!
  </pane>
  <pane active="option2Active" no-heading>
    Option 2!
  </pane>
</tabs>

[petebacondarwin]

Hi @bbottema
Thanks for sending in this PR. I think the idea of having hierachical tabs is a great one. We really appreciate people putting forward ideas for the project.

I agree with Andy though, that there is probably a more intuitive semantic way of describing this with HTML elements rather than having to wire up all the group names in the developer's head.

@ajoslin - if a tab-pane does not provide either a heading attribute or a pane-heading element this could be taken to mean that it doesn't have a tab header at all. The only trouble is how you would let the current group know it is selected.

Couldn't we add (yet another) element like pane-group?

<tabs>
  <pane heading="Pane 1">Pane 1</pane>
  <pane-group heading="Group 1">
    <pane>Group 1 - Pane a</pane>
    <pane>Group 1 - Pane b</pane>
    <pane>Group 1 - Pane c</pane>
  </pane-group>
</tabs>

[pkozlowski-opensource]

+1 for pane-group if we are going to extends tabs in this direction.

At the same time we need to draw a line somewhere. What I mean is that if directive's syntax becomes as verbose as manually crafted HTML than it is no longer worth it. But yeh, this grouping thing looks nice.

We should just keep an eye on features we are adding to this directive as for sure we won't be able to cover all the use cases.

[bbottema]

I agree you don't want to tailor to every specific use case. However, considering Bootstrap promotes this feature specifically for tab bars (among others), I don't feel it is out of order per se.

I agree with @petebacondarwin that the pane-group seems like a nice semantic way out. On the other hand, adding a group attribute to pane adds minimal complexity to the markup and can be part of the API along with heading.

I'm eager to see where this is headed.

[pkozlowski-opensource]

@bbottema would you be willing to work on the syntax proposed by @petebacondarwin ? I think that it offers really nice semantic for those tabs grouping.

We've got a lot of PRs lined up for tabs so take your time.

[bbottema]

Sure, I will give it a shot.

[pkozlowski-opensource]

@bbottema Awesome! I've opened the issue #160 to track this.

Going to close this PR for now as the final implementation will be different. Please open a new PR when you are ready.

And hay, thnx so much for the contribution so far!