From e0ddec6a2db8a66199befc6ea0ca159a6092ffff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Galfas=C3=B3?= <lgalfaso@gmail.com>
Date: Fri, 12 Jul 2013 15:10:44 -0300
Subject: [PATCH] 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
---
 src/tabs/tabs.js                 | 32 ++++++++++++++++++--
 src/tabs/test/tabsSpec.js        | 52 +++++++++++++++++++++++++++++++-
 template/tabs/tabset-titles.html |  2 ++
 template/tabs/tabset.html        |  6 ++--
 4 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 template/tabs/tabset-titles.html

diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index d5b9ed12ae..223bb9722f 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -77,12 +77,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;
+      };
     }
   };
 })
@@ -280,5 +287,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);
+        });
+      }
+    }
+  };
+})
+
 ;
 
diff --git a/src/tabs/test/tabsSpec.js b/src/tabs/test/tabsSpec.js
index d0f0d9d842..18651a7276 100644
--- a/src/tabs/test/tabsSpec.js
+++ b/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() {
@@ -483,6 +483,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() {
 
diff --git a/template/tabs/tabset-titles.html b/template/tabs/tabset-titles.html
new file mode 100644
index 0000000000..560e0f743f
--- /dev/null
+++ b/template/tabs/tabset-titles.html
@@ -0,0 +1,2 @@
+<ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}">
+</ul>
diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html
index ffe289f882..5e9798b2c8 100644
--- a/template/tabs/tabset.html
+++ b/template/tabs/tabset.html
@@ -1,7 +1,6 @@
 
-<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" 
@@ -9,4 +8,5 @@
          tab-content-transclude="tab">
     </div>
   </div>
+  <div tabset-titles="!tabsAbove"></div>
 </div>