Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Fix the tabs modal to accept nested tabset #1010

Closed
wants to merge 2 commits into from
Closed

Fix the tabs modal to accept nested tabset #1010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6192336
Fix the tabs modal to accept nested tabset
MortadaAK Sep 15, 2013
9c885a4
Fix Progressbar template
MortadaAK Sep 15, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/progressbar/test/progressbar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('progressbar directive with no binding', function () {

it('contains one child element with "bar" css class', function() {
expect(element.children().length).toBe(1);
expect(element.children().eq(0).hasClass('bar')).toBe(true);
expect(element.children().eq(0).hasClass('progress-bar')).toBe(true);
});

it('has a "bar" element with expected width', function() {
Expand All @@ -41,7 +41,7 @@ describe('progressbar directive with data-binding', function () {

it('contains one child element with "bar" css class', function() {
expect(element.children().length).toBe(1);
expect(element.children().eq(0).hasClass('bar')).toBe(true);
expect(element.children().eq(0).hasClass('progress-bar')).toBe(true);
});

it('has a "bar" element with expected width', function() {
Expand All @@ -53,7 +53,7 @@ describe('progressbar directive with data-binding', function () {
$rootScope.$digest();
expect(element.children().length).toBe(1);
expect(element.children().eq(0).css('width')).toBe('55%');
expect(element.children().eq(0).hasClass('bar')).toBe(true);
expect(element.children().eq(0).hasClass('progress-bar')).toBe(true);

$rootScope.percent += 11;
$rootScope.$digest();
Expand All @@ -76,8 +76,8 @@ describe('progressbar directive with data-binding', function () {

var barElement = element.children().eq(0);
expect(barElement.css('width')).toBe('45%');
expect(barElement.hasClass('bar')).toBe(true);
expect(barElement.hasClass('bar-warning')).toBe(true);
expect(barElement.hasClass('progress-bar')).toBe(true);
expect(barElement.hasClass('progress-bar-warning')).toBe(true);
});

});
Expand All @@ -100,9 +100,9 @@ describe('stacked progressbar directive', function () {

it('contains tree child elements with "bar" css class each', function() {
expect(element.children().length).toBe(3);
expect(element.children().eq(0).hasClass('bar')).toBe(true);
expect(element.children().eq(1).hasClass('bar')).toBe(true);
expect(element.children().eq(2).hasClass('bar')).toBe(true);
expect(element.children().eq(0).hasClass('progress-bar')).toBe(true);
expect(element.children().eq(1).hasClass('progress-bar')).toBe(true);
expect(element.children().eq(2).hasClass('progress-bar')).toBe(true);
});

it('has a elements with expected width', function() {
Expand Down Expand Up @@ -144,18 +144,18 @@ describe('stacked progressbar directive', function () {

barElement = element.children().eq(0);
expect(barElement.css('width')).toBe('12%');
expect(barElement.hasClass('bar')).toBe(true);
expect(barElement.hasClass('bar-danger')).toBe(false);
expect(barElement.hasClass('progress-bar')).toBe(true);
expect(barElement.hasClass('progress-bar-danger')).toBe(false);

barElement = element.children().eq(1);
expect(barElement.css('width')).toBe('29%');
expect(barElement.hasClass('bar')).toBe(true);
expect(barElement.hasClass('bar-danger')).toBe(true);
expect(barElement.hasClass('progress-bar')).toBe(true);
expect(barElement.hasClass('progress-bar-danger')).toBe(true);

barElement = element.children().eq(2);
expect(barElement.css('width')).toBe('33%');
expect(barElement.hasClass('bar')).toBe(true);
expect(barElement.hasClass('bar-danger')).toBe(false);
expect(barElement.hasClass('progress-bar')).toBe(true);
expect(barElement.hasClass('progress-bar-danger')).toBe(false);
});

it('can handle mixed objects with custom classes', function() {
Expand All @@ -174,23 +174,23 @@ describe('stacked progressbar directive', function () {

barElement = element.children().eq(0);
expect(barElement.css('width')).toBe('15%');
expect(barElement.hasClass('bar-info')).toBe(true);
expect(barElement.hasClass('progress-bar-info')).toBe(true);

barElement = element.children().eq(1);
expect(barElement.css('width')).toBe('11%');
expect(barElement.hasClass('bar-info')).toBe(false);
expect(barElement.hasClass('progress-bar-info')).toBe(false);

barElement = element.children().eq(2);
expect(barElement.css('width')).toBe('9%');
expect(barElement.hasClass('bar-danger')).toBe(true);
expect(barElement.hasClass('progress-bar-danger')).toBe(true);

barElement = element.children().eq(3);
expect(barElement.css('width')).toBe('22%');
expect(barElement.hasClass('bar-warning')).toBe(true);
expect(barElement.hasClass('progress-bar-warning')).toBe(true);

barElement = element.children().eq(4);
expect(barElement.css('width')).toBe('5%');
expect(barElement.hasClass('bar-warning')).toBe(false);
expect(barElement.hasClass('progress-bar-warning')).toBe(false);
});

});
Expand Down Expand Up @@ -259,7 +259,7 @@ describe('stacked progressbar directive with auto-types', function () {
it('contains tree child elements with "bar" css class each', function() {
expect(element.children().length).toBe(5);
for (var i = 0; i < 5; i++) {
expect(element.children().eq(i).hasClass('bar')).toBe(true);
expect(element.children().eq(i).hasClass('progress-bar')).toBe(true);
}
});

Expand All @@ -275,7 +275,7 @@ describe('stacked progressbar directive with auto-types', function () {
var stackedTypes = config.stackedTypes;

for (var i = 0; i < stackedTypes.length; i++) {
expect(element.children().eq(i).hasClass('bar-' + stackedTypes[i])).toBe(true);
expect(element.children().eq(i).hasClass('progress-bar-' + stackedTypes[i])).toBe(true);
}
});

Expand All @@ -290,8 +290,8 @@ describe('stacked progressbar directive with auto-types', function () {

var bar = element.children().eq(1);
expect(bar.css('width')).toBe('18%');
expect(bar.hasClass('bar-' + stackedTypes[1])).toBe(false);
expect(bar.hasClass('bar-something')).toBe(true);
expect(bar.hasClass('progress-bar-' + stackedTypes[1])).toBe(false);
expect(bar.hasClass('progress-bar-something')).toBe(true);
});


Expand All @@ -306,8 +306,8 @@ describe('stacked progressbar directive with auto-types', function () {

var bar = element.children().eq(1);
expect(bar.css('width')).toBe('18%');
expect(bar.hasClass('bar-' + stackedTypes[1])).toBe(false);
expect(bar.hasClass('bar-something')).toBe(true);
expect(bar.hasClass('progress-bar-' + stackedTypes[1])).toBe(false);
expect(bar.hasClass('progress-bar-something')).toBe(true);
});

it('can bypass default configuration for stacked classes from attribute', function() {
Expand All @@ -316,11 +316,11 @@ describe('stacked progressbar directive with auto-types', function () {

var stackedTypes = config.stackedTypes;

expect(element.children().eq(0).hasClass('bar-danger')).toBe(true);
expect(element.children().eq(0).hasClass('bar-' + stackedTypes[0])).toBe(false);
expect(element.children().eq(0).hasClass('progress-bar-danger')).toBe(true);
expect(element.children().eq(0).hasClass('progress-bar-' + stackedTypes[0])).toBe(false);

expect(element.children().eq(1).hasClass('bar-warning')).toBe(true);
expect(element.children().eq(2).hasClass('bar-success')).toBe(true);
expect(element.children().eq(1).hasClass('progress-bar-warning')).toBe(true);
expect(element.children().eq(2).hasClass('progress-bar-success')).toBe(true);
});

});
10 changes: 10 additions & 0 deletions src/tabs/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
<tabset>
<tab ng-repeat="nestedTab in tab.nestedTabs" heading="{{nestedTab.title}}" active="nestedTab.active" disabled="nestedTab.disabled">
{{nestedTab.content}}
<tabset>
<tab ng-repeat="deepNestedTab in nestedTab.nestedTabs" heading="{{deepNestedTab.title}}" active="deepNestedTab.active" disabled="deepNestedTab.disabled">
{{deepNestedTab.content}}
</tab>
</tabset>
</tab>
</tabset>
</tab>
<tab select="alertMe()">
<tab-heading>
Expand Down
27 changes: 17 additions & 10 deletions src/tabs/docs/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
var TabsDemoCtrl = function ($scope) {
$scope.tabs = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
];
$scope.tabs = [
{ title: "Dynamic Title 1", content: "Dynamic content 1" },
{ title: "Dynamic Title 2", content: "Dynamic content 2", disabled: true },
{ title: "Dynamic Title 3", content: "Dynamic content 3", nestedTabs: [
{ title: "Nested Dynamic Title 1", content: "Nested Dynamic content 1" },
{ title: "Nested Dynamic Title 2", content: "Nested Dynamic content 2", nestedTabs: [
{ title: "Deep Nested Dynamic Title 1", content: "Deep Nested Dynamic content 1" },
{ title: "Deep Nested Dynamic Title 2", content: "Deep Nested Dynamic content 2" }
]}
]}
];

$scope.alertMe = function() {
setTimeout(function() {
alert("You've selected the alert tab!");
});
};
$scope.alertMe = function () {
setTimeout(function () {
alert("You've selected the alert tab!");
});
};

$scope.navType = 'pills';
$scope.navType = 'pills';
};
32 changes: 21 additions & 11 deletions src/tabs/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ angular.module('ui.bootstrap.tabs', [])

.controller('TabsetController', ['$scope', '$element',
function TabsetCtrl($scope, $element) {

var ctrl = this,
$scope.ctrl = this;
var ctrl = $scope.ctrl,
tabs = ctrl.tabs = $scope.tabs = [];

ctrl.select = function(tab) {
Expand Down Expand Up @@ -299,21 +299,31 @@ function($parse, $http, $templateCache, $compile) {
}
}])

.directive('tabsetTitles', ['$http', function($http) {
.directive('tabsetTitles', ['$http','$timeout', function($http,$timeout) {
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);
});
}
function appendNode() {
tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function (node) {
elm.append(node);
});
}

if (!scope.$eval(attrs.tabsetTitles)) {
elm.remove();
} else {
//now that tabs location has been decided, transclude the tab titles in
if(tabsetCtrl.$scope && tabsetCtrl.$scope.$parent){
appendNode();
} else {
$timeout(function () {
appendNode();
});
}
}
}
};
}])
Expand Down
2 changes: 1 addition & 1 deletion template/progressbar/bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="bar" ng-class='type && "bar-" + type'></div>
<div class="progress-bar" ng-class='type && "progress-bar-" + type'></div>
4 changes: 2 additions & 2 deletions template/tabs/tabset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@

<div class="tabbable" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
<div tabset-titles="tabsAbove"></div>
<div tabset-titles="tabsAbove != false"></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 tabset-titles="tabsAbove == false"></div>
</div>