From 220e7b60124105aca25e57c3f01a22e12fa77cc2 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

Closes #659
---
 src/tabs/tabs.js                 | 34 +++++++++++++++++++--
 src/tabs/test/tabsSpec.js        | 52 +++++++++++++++++++++++++++++++-
 template/tabs/tabset-titles.html |  2 ++
 template/tabs/tabset.html        |  6 ++--
 4 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 template/tabs/tabset-titles.html

diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index b0444ba4d7..c8c4b37322 100644
--- a/src/tabs/tabs.js
+++ b/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);
+        });
+      }
+    }
+  };
+})
+
 ;
 
diff --git a/src/tabs/test/tabsSpec.js b/src/tabs/test/tabsSpec.js
index c5310e05f7..93c0e51cd4 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() {
@@ -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() {
 
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>