feat(tabs): add the ability to set the direction of the tabs

Add the ability to set the direction of the tabs, the possible
values are 'right', 'left' and 'below'. If no direction is defined
the tabs are rendered on the top as they do now

Closes #659

Author: lgalfaso

src/tabs/tabs.js

@@ -56,6 +56,8 @@ function TabsetCtrl($scope, $element) {
  * Tabset is the outer container for the tabs directive
  *
  * @param {boolean=} vertical Whether or not to use vertical styling for the tabs.
+ * @param {string=} direction  What direction the tabs should be rendered. Available:
+ * 'right', 'left', 'below'.
  *
  * @example
 <example module="ui.bootstrap">
@@ -77,12 +79,19 @@ function TabsetCtrl($scope, $element) {
     restrict: 'EA',
     transclude: true,
     replace: true,
+    require: '^tabset',
     scope: {},
     controller: 'TabsetController',
     templateUrl: 'template/tabs/tabset.html',
-    link: function(scope, element, attrs) {
-      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
-      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
+    compile: function(elm, attrs, transclude) {
+      return function(scope, element, attrs, tabsetCtrl) {
+        scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
+        scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
+        scope.direction = angular.isDefined(attrs.direction) ? scope.$parent.$eval(attrs.direction) : 'top';
+        scope.tabsAbove = (scope.direction != 'below');
+        tabsetCtrl.$scope = scope;
+        tabsetCtrl.$transcludeFn = transclude;
+      };
     }
   };
 })
@@ -284,5 +293,24 @@ function($parse, $http, $templateCache, $compile) {
   }
 }])
 
+.directive('tabsetTitles', function($http) {
+  return {
+    restrict: 'A',
+    require: '^tabset',
+    templateUrl: 'template/tabs/tabset-titles.html',
+    replace: true,
+    link: function(scope, elm, attrs, tabsetCtrl) {
+      if (!scope.$eval(attrs.tabsetTitles)) {
+        elm.remove();
+      } else {
+        //now that tabs location has been decided, transclude the tab titles in
+        tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function(node) {
+          elm.append(node);
+        });
+      }
+    }
+  };
+})
+
 ;
 

src/tabs/test/tabsSpec.js

@@ -1,5 +1,5 @@
 describe('tabs', function() {
-  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html'));
+  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html', 'template/tabs/tabset-titles.html'));
 
   var elm, scope;
   function titles() {
@@ -493,6 +493,56 @@ describe('tabs', function() {
     });
   });
 
+  describe('direction', function() {
+    it('should not have `tab-left`, `tab-right` nor `tabs-below` classes if the direction is undefined', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = undefined;
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-left` direction class if the direction is "left"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'left';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-right direction class if the direction is "right"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'right';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-below direction class if the direction is "below"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'below';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).toHaveClass('tabs-below');
+      expect(elm.find('.tab-content + .nav').length).toBe(1);
+    }));
+  });
+
   //https://github.com/angular-ui/bootstrap/issues/524
   describe('child compilation', function() {
 

template/tabs/tabset-titles.html

@@ -0,0 +1,2 @@
+<ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}">
+</ul>

template/tabs/tabset.html

@@ -1,12 +1,12 @@
 
-<div class="tabbable">
-  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
-  </ul>
+<div class="tabbable" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
+  <div tabset-titles="tabsAbove"></div>
   <div class="tab-content">
     <div class="tab-pane" 
          ng-repeat="tab in tabs" 
          ng-class="{active: tab.active}"
          tab-content-transclude="tab">
     </div>
   </div>
+  <div tabset-titles="!tabsAbove"></div>
 </div>