From c9acebbea2fdbb01ee3283b1bae0e0543d4c8cb2 Mon Sep 17 00:00:00 2001
From: Chris Chua <chris@thousandeyes.com>
Date: Fri, 13 Dec 2013 14:19:23 -0800
Subject: [PATCH] fix(tabs): make nested tabs work

This reverts commit 220e7b60124105aca25e57c3f01a22e12fa77cc2.

Revert the capability to set the tab direction. This is no longer a
feature in Bootstrap 3 and breaks nested tabs.

Closes #783
Relates to #659
---
 src/tabs/tabs.js                 | 34 +++------------------
 src/tabs/test/tabs.spec.js       | 52 +-------------------------------
 template/tabs/tabset-titles.html |  2 --
 template/tabs/tabset.html        |  6 ++--
 4 files changed, 8 insertions(+), 86 deletions(-)
 delete mode 100644 template/tabs/tabset-titles.html

diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index bef8b4115a..ce5d1b9923 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -48,8 +48,6 @@ angular.module('ui.bootstrap.tabs', [])
  * 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">
@@ -71,19 +69,12 @@ angular.module('ui.bootstrap.tabs', [])
     restrict: 'EA',
     transclude: true,
     replace: true,
-    require: '^tabset',
     scope: {},
     controller: 'TabsetController',
     templateUrl: 'template/tabs/tabset.html',
-    compile: function(elm, attrs, transclude) {
-      return function(scope, element, attrs, tabsetCtrl) {
-        scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$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;
-      };
+    link: function(scope, element, attrs) {
+      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
+      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
     }
   };
 })
@@ -288,21 +279,4 @@ angular.module('ui.bootstrap.tabs', [])
   }
 })
 
-.directive('tabsetTitles', function() {
-  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/tabs.spec.js b/src/tabs/test/tabs.spec.js
index 8e7f41f813..2ead88c5cf 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -1,5 +1,5 @@
 describe('tabs', function() {
-  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html', 'template/tabs/tabset-titles.html'));
+  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html'));
 
   var elm, scope;
   function titles() {
@@ -561,56 +561,6 @@ 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
deleted file mode 100644
index 560e0f743f..0000000000
--- a/template/tabs/tabset-titles.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<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 5e9798b2c8..ffe289f882 100644
--- a/template/tabs/tabset.html
+++ b/template/tabs/tabset.html
@@ -1,6 +1,7 @@
 
-<div class="tabbable" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
-  <div tabset-titles="tabsAbove"></div>
+<div class="tabbable">
+  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
+  </ul>
   <div class="tab-content">
     <div class="tab-pane" 
          ng-repeat="tab in tabs" 
@@ -8,5 +9,4 @@
          tab-content-transclude="tab">
     </div>
   </div>
-  <div tabset-titles="!tabsAbove"></div>
 </div>