The body of the accordion group grows to fit the contents
-
+
{{item}}
- I can have markup, too!
+ I can have markup, too!
This is just some content to illustrate fancy headings.
diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js
index 143ca73270..4a0447b5be 100644
--- a/src/accordion/test/accordion.spec.js
+++ b/src/accordion/test/accordion.spec.js
@@ -18,7 +18,7 @@ describe('accordion', function () {
}));
describe('addGroup', function() {
- it('adds a the specified group to the collection', function() {
+ it('adds a the specified panel to the collection', function() {
var group1, group2;
ctrl.addGroup(group1 = $scope.$new());
ctrl.addGroup(group2 = $scope.$new());
@@ -35,7 +35,7 @@ describe('accordion', function () {
ctrl.addGroup(group2 = { isOpen: true, $on : angular.noop });
ctrl.addGroup(group3 = { isOpen: true, $on : angular.noop });
});
- it('should close other groups if close-others attribute is not defined', function() {
+ it('should close other panels if close-others attribute is not defined', function() {
delete $attrs.closeOthers;
ctrl.closeOthers(group2);
expect(group1.isOpen).toBe(false);
@@ -43,7 +43,7 @@ describe('accordion', function () {
expect(group3.isOpen).toBe(false);
});
- it('should close other groups if close-others attribute is true', function() {
+ it('should close other panels if close-others attribute is true', function() {
$attrs.closeOthers = 'true';
ctrl.closeOthers(group3);
expect(group1.isOpen).toBe(false);
@@ -51,7 +51,7 @@ describe('accordion', function () {
expect(group3.isOpen).toBe(true);
});
- it('should not close other groups if close-others attribute is false', function() {
+ it('should not close other panels if close-others attribute is false', function() {
$attrs.closeOthers = 'false';
ctrl.closeOthers(group2);
expect(group1.isOpen).toBe(true);
@@ -70,7 +70,7 @@ describe('accordion', function () {
accordionConfig.closeOthers = originalCloseOthers;
}));
- it('should not close other groups if accordionConfig.closeOthers is false', function() {
+ it('should not close other panels if accordionConfig.closeOthers is false', function() {
ctrl.closeOthers(group2);
expect(group1.isOpen).toBe(true);
expect(group2.isOpen).toBe(true);
@@ -80,7 +80,7 @@ describe('accordion', function () {
});
describe('removeGroup', function() {
- it('should remove the specified group', function () {
+ it('should remove the specified panel', function () {
var group1, group2, group3;
ctrl.addGroup(group1 = $scope.$new());
ctrl.addGroup(group2 = $scope.$new());
@@ -90,7 +90,7 @@ describe('accordion', function () {
expect(ctrl.groups[0]).toBe(group1);
expect(ctrl.groups[1]).toBe(group3);
});
- it('should ignore remove of non-existing group', function () {
+ it('should ignore remove of non-existing panel', function () {
var group1, group2;
ctrl.addGroup(group1 = $scope.$new());
ctrl.addGroup(group2 = $scope.$new());
@@ -109,7 +109,7 @@ describe('accordion', function () {
return groups.eq(index).find('a').eq(0);
};
var findGroupBody = function (index) {
- return groups.eq(index).find('.accordion-body').eq(0);
+ return groups.eq(index).find('.panel-collapse').eq(0);
};
@@ -122,7 +122,7 @@ describe('accordion', function () {
element = groups = scope = $compile = undefined;
});
- describe('with static groups', function () {
+ describe('with static panels', function () {
beforeEach(function () {
var tpl =
"" +
@@ -133,13 +133,13 @@ describe('accordion', function () {
angular.element(document.body).append(element);
$compile(element)(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
});
afterEach(function() {
element.remove();
});
- it('should create accordion groups with content', function () {
+ it('should create accordion panels with content', function () {
expect(groups.length).toEqual(2);
expect(findGroupLink(0).text()).toEqual('title 1');
expect(findGroupBody(0).text().trim()).toEqual('Content 1');
@@ -168,7 +168,7 @@ describe('accordion', function () {
});
});
- describe('with dynamic groups', function () {
+ describe('with dynamic panels', function () {
var model;
beforeEach(function () {
var tpl =
@@ -185,15 +185,15 @@ describe('accordion', function () {
scope.$digest();
});
- it('should have no groups initially', function () {
- groups = element.find('.accordion-group');
+ it('should have no panels initially', function () {
+ groups = element.find('.panel');
expect(groups.length).toEqual(0);
});
- it('should have a group for each model item', function() {
+ it('should have a panel for each model item', function() {
scope.groups = model;
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
expect(groups.length).toEqual(2);
expect(findGroupLink(0).text()).toEqual('title 1');
expect(findGroupBody(0).text().trim()).toEqual('Content 1');
@@ -204,12 +204,12 @@ describe('accordion', function () {
it('should react properly on removing items from the model', function () {
scope.groups = model;
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
expect(groups.length).toEqual(2);
scope.groups.splice(0,1);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
expect(groups.length).toEqual(1);
});
});
@@ -226,10 +226,10 @@ describe('accordion', function () {
scope.open2 = true;
$compile(element)(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
});
- it('should open the group with isOpen set to true', function () {
+ it('should open the panel with isOpen set to true', function () {
expect(findGroupBody(0).scope().isOpen).toBe(false);
expect(findGroupBody(1).scope().isOpen).toBe(true);
});
@@ -259,14 +259,14 @@ describe('accordion', function () {
angular.element(document.body).append(element);
$compile(element)(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
});
afterEach(function() {
element.remove();
});
- it('should have visible group body when the group with isOpen set to true', function () {
+ it('should have visible panel body when the group with isOpen set to true', function () {
expect(findGroupBody(0)[0].clientHeight).not.toBe(0);
expect(findGroupBody(1)[0].clientHeight).toBe(0);
});
@@ -283,7 +283,7 @@ describe('accordion', function () {
'';
element = $compile(tpl)(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
});
it('transcludes the content into the heading link', function() {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
@@ -305,7 +305,7 @@ describe('accordion', function () {
'';
element = $compile(tpl)(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
});
it('transcludes the content into the heading link', function() {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
@@ -320,7 +320,7 @@ describe('accordion', function () {
it('should clone the accordion-heading for each group', function() {
element = $compile('{{x}}')(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
@@ -333,7 +333,7 @@ describe('accordion', function () {
it('should clone the accordion-heading for each group', function() {
element = $compile('
{{x}}
')(scope);
scope.$digest();
- groups = element.find('.accordion-group');
+ groups = element.find('.panel');
expect(groups.length).toBe(3);
expect(findGroupLink(0).text()).toBe('1');
expect(findGroupLink(1).text()).toBe('2');
diff --git a/src/alert/docs/demo.html b/src/alert/docs/demo.html
index a750374f37..0e3b6d23d5 100644
--- a/src/alert/docs/demo.html
+++ b/src/alert/docs/demo.html
@@ -1,4 +1,4 @@
{{alert.msg}}
-
+
diff --git a/src/alert/docs/demo.js b/src/alert/docs/demo.js
index 290ee9d001..88b834d488 100644
--- a/src/alert/docs/demo.js
+++ b/src/alert/docs/demo.js
@@ -1,6 +1,6 @@
function AlertDemoCtrl($scope) {
$scope.alerts = [
- { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' },
+ { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
diff --git a/src/carousel/docs/demo.html b/src/carousel/docs/demo.html
index 954ef9dd4f..9c5adbc44a 100644
--- a/src/carousel/docs/demo.html
+++ b/src/carousel/docs/demo.html
@@ -1,25 +1,21 @@
+ Interval, in milliseconds:
Enter a negative number to stop the interval.
diff --git a/src/carousel/docs/demo.js b/src/carousel/docs/demo.js
index 7c1f8fa124..4e35c04a4e 100644
--- a/src/carousel/docs/demo.js
+++ b/src/carousel/docs/demo.js
@@ -2,9 +2,9 @@ function CarouselDemoCtrl($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
- var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
+ var newWidth = 600 + slides.length;
slides.push({
- image: 'http://placekitten.com/' + newWidth + '/200',
+ image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
index 3469d6ad37..8ce9955cf4 100644
--- a/src/collapse/collapse.js
+++ b/src/collapse/collapse.js
@@ -1,82 +1,81 @@
-angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition'])
+angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
-// The collapsible directive indicates a block of html that will expand and collapse
-.directive('collapse', ['$transition', function($transition) {
- // CSS transitions don't work with height: auto, so we have to manually change the height to a
- // specific value and then once the animation completes, we can reset the height to auto.
- // Unfortunately if you do this while the CSS transitions are specified (i.e. in the CSS class
- // "collapse") then you trigger a change to height 0 in between.
- // The fix is to remove the "collapse" CSS class while changing the height back to auto - phew!
- var fixUpHeight = function(scope, element, height) {
- // We remove the collapse CSS class to prevent a transition when we change to height: auto
- element.removeClass('collapse');
- element.css({ height: height });
- // It appears that reading offsetWidth makes the browser realise that we have changed the
- // height already :-/
- var x = element[0].offsetWidth;
- element.addClass('collapse');
- };
+ .directive('collapse', ['$transition', function ($transition, $timeout) {
- return {
- link: function(scope, element, attrs) {
+ return {
+ link: function (scope, element, attrs) {
- var isCollapsed;
- var initialAnimSkip = true;
+ var initialAnimSkip = true;
+ var currentTransition;
- scope.$watch(attrs.collapse, function(value) {
- if (value) {
- collapse();
- } else {
- expand();
+ function doTransition(change) {
+ var newTransition = $transition(element, change);
+ if (currentTransition) {
+ currentTransition.cancel();
+ }
+ currentTransition = newTransition;
+ newTransition.then(newTransitionDone, newTransitionDone);
+ return newTransition;
+
+ function newTransitionDone() {
+ // Make sure it's this transition, otherwise, leave it alone.
+ if (currentTransition === newTransition) {
+ currentTransition = undefined;
+ }
+ }
}
- });
-
- var currentTransition;
- var doTransition = function(change) {
- if ( currentTransition ) {
- currentTransition.cancel();
+ function expand() {
+ if (initialAnimSkip) {
+ initialAnimSkip = false;
+ expandDone();
+ } else {
+ element.removeClass('collapse').addClass('collapsing');
+ doTransition({ height: element[0].scrollHeight + 'px' }).then(expandDone);
+ }
+ }
+
+ function expandDone() {
+ element.removeClass('collapsing');
+ element.addClass('collapse in');
+ element.css({height: 'auto'});
}
- currentTransition = $transition(element,change);
- currentTransition.then(
- function() { currentTransition = undefined; },
- function() { currentTransition = undefined; }
- );
- return currentTransition;
- };
- var expand = function() {
- if (initialAnimSkip) {
- initialAnimSkip = false;
- if ( !isCollapsed ) {
- fixUpHeight(scope, element, 'auto');
- element.addClass('in');
+ function collapse() {
+ if (initialAnimSkip) {
+ initialAnimSkip = false;
+ collapseDone();
+ element.css({height: 0});
+ } else {
+ // CSS transitions don't work with height: auto, so we have to manually change the height to a specific value
+ element.css({ height: element[0].scrollHeight + 'px' });
+ //trigger reflow so a browser relaizes that height was updated from auto to a specific value
+ var x = element[0].offsetWidth;
+
+ element.removeClass('collapse in').addClass('collapsing');
+
+ doTransition({ height: 0 }).then(collapseDone);
}
- } else {
- doTransition({ height : element[0].scrollHeight + 'px' })
- .then(function() {
- // This check ensures that we don't accidentally update the height if the user has closed
- // the group while the animation was still running
- if ( !isCollapsed ) {
- fixUpHeight(scope, element, 'auto');
- element.addClass('in');
- }
- });
}
- isCollapsed = false;
- };
-
- var collapse = function() {
- isCollapsed = true;
- element.removeClass('in');
- if (initialAnimSkip) {
- initialAnimSkip = false;
- fixUpHeight(scope, element, 0);
- } else {
- fixUpHeight(scope, element, element[0].scrollHeight + 'px');
- doTransition({'height':'0'});
+
+ function collapseDone() {
+ element.removeClass('collapsing');
+ element.addClass('collapse');
}
- };
- }
- };
-}]);
+
+ scope.$watch(attrs.collapse, function (shouldCollapse) {
+ if (shouldCollapse) {
+ collapse();
+ } else {
+ expand();
+ }
+ });
+
+ }
+ };
+ }]);
+
+//TODO:
+//- refactor to remove code duplication
+//- corner cases - what happens in animation is in progress?
+//- tests based on the DOM state / classes
diff --git a/src/collapse/docs/demo.html b/src/collapse/docs/demo.html
index 207113ee76..0c99963b2b 100644
--- a/src/collapse/docs/demo.html
+++ b/src/collapse/docs/demo.html
@@ -1,5 +1,5 @@
\ No newline at end of file
diff --git a/src/rating/docs/demo.js b/src/rating/docs/demo.js
index 9dbbb374e4..c31261165f 100644
--- a/src/rating/docs/demo.js
+++ b/src/rating/docs/demo.js
@@ -9,10 +9,10 @@ var RatingDemoCtrl = function ($scope) {
};
$scope.ratingStates = [
- {stateOn: 'icon-ok-sign', stateOff: 'icon-ok-circle'},
- {stateOn: 'icon-star', stateOff: 'icon-star-empty'},
- {stateOn: 'icon-heart', stateOff: 'icon-ban-circle'},
- {stateOn: 'icon-heart'},
- {stateOff: 'icon-off'}
+ {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
+ {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
+ {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
+ {stateOn: 'glyphicon-heart'},
+ {stateOff: 'glyphicon-off'}
];
};
diff --git a/src/rating/test/rating.spec.js b/src/rating/test/rating.spec.js
index ecea8fccc8..bf880ed439 100644
--- a/src/rating/test/rating.spec.js
+++ b/src/rating/test/rating.spec.js
@@ -22,7 +22,7 @@ describe('rating directive', function () {
var stars = getStars();
var state = [];
for (var i = 0, n = stars.length; i < n; i++) {
- state.push( (stars.eq(i).hasClass(classOn || 'icon-star') && ! stars.eq(i).hasClass(classOff || 'icon-star-empty')) );
+ state.push( (stars.eq(i).hasClass(classOn || 'glyphicon-star') && ! stars.eq(i).hasClass(classOff || 'glyphicon-star-empty')) );
}
return state;
}
diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index b56bbbbc54..9723cc293d 100644
--- a/src/tabs/docs/demo.html
+++ b/src/tabs/docs/demo.html
@@ -1,9 +1,9 @@
Select a tab by setting active binding to true:
-
-
-
+
+
+
@@ -13,7 +13,7 @@
- Select me for alert!
+ Select me for alert!
I've got an HTML heading, and a select callback. Pretty cool!
@@ -25,4 +25,12 @@
Vertical content 1Vertical content 2
+
+
+
+
+ Justified content
+ Short Labeled Justified content
+ Long Labeled Justified content
+
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index 75f5c60fdb..daee59f2fd 100644
--- a/src/tabs/docs/readme.md
+++ b/src/tabs/docs/readme.md
@@ -8,6 +8,10 @@ AngularJS version of the tabs directive.
_(Defaults: false)_ :
Whether tabs appear vertically stacked.
+ * `justified`
+ _(Defaults: false)_ :
+ Whether tabs fill the container and have a consistent width.
+
* `type`
_(Defaults: 'tabs')_ :
Navigation type. Possible values are 'tabs' and 'pills'.
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index dbda75ca29..110ea2810a 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -54,6 +54,7 @@ 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 {boolean=} justified Whether or not to use justified styling for the tabs.
* @param {string=} direction What direction the tabs should be rendered. Available:
* 'right', 'left', 'below'.
*
@@ -61,14 +62,18 @@ angular.module('ui.bootstrap.tabs', [])
- First Content!
- Second Content!
+ First Content!
+ Second Content!First Vertical Content!Second Vertical Content!
+
+ First Justified Content!
+ Second Justified Content!
+
*/
@@ -84,6 +89,7 @@ angular.module('ui.bootstrap.tabs', [])
compile: function(elm, attrs, transclude) {
return function(scope, element, attrs, tabsetCtrl) {
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
+ scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : 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');
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index 61215db39b..6432604e9e 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -529,6 +529,19 @@ describe('tabs', function() {
});
});
+ describe('justified', function() {
+ beforeEach(inject(function($compile, $rootScope) {
+ scope = $rootScope.$new();
+ scope.justified = true;
+ elm = $compile('')(scope);
+ scope.$apply();
+ }));
+
+ it('to justify tabs', function() {
+ expect(elm.find('ul.nav-tabs')).toHaveClass('nav-justified');
+ });
+ });
+
describe('type', function() {
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
diff --git a/src/timepicker/docs/demo.html b/src/timepicker/docs/demo.html
index 9fdf7452cb..be54da58a3 100644
--- a/src/timepicker/docs/demo.html
+++ b/src/timepicker/docs/demo.html
@@ -1,14 +1,27 @@
- Pellentesque {{dynamicTooltipText}},
- sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
- aliquam. Tincidunt lobortis feugiat vivamus at
- left eget
- arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
- right
- nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
- bottom
- pharetra convallis posuere morbi leo urna,
- fading
- at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
- delayed turpis massa tincidunt dui ut.
+ Pellentesque {{dynamicTooltipText}},
+ sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
+ aliquam. Tincidunt lobortis feugiat vivamus at
+ left eget
+ arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
+ right
+ nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
+ bottom
+ pharetra convallis posuere morbi leo urna,
+ fading
+ at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
+ delayed turpis massa tincidunt dui
+ ut.
\ No newline at end of file
diff --git a/template/accordion/accordion.html b/template/accordion/accordion.html
index f94e566f12..ba428f3b5e 100644
--- a/template/accordion/accordion.html
+++ b/template/accordion/accordion.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/template/alert/alert.html b/template/alert/alert.html
index 26f65b3c75..957d6ec444 100644
--- a/template/alert/alert.html
+++ b/template/alert/alert.html
@@ -1,4 +1,4 @@
-
\ No newline at end of file
diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
index 7da51a9098..2cde027ea7 100644
--- a/template/datepicker/popup.html
+++ b/template/datepicker/popup.html
@@ -3,10 +3,10 @@
-
-
-
+
+
+
-
+
diff --git a/template/modal/backdrop.html b/template/modal/backdrop.html
index ebf8aa59a7..048497f558 100644
--- a/template/modal/backdrop.html
+++ b/template/modal/backdrop.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/template/modal/window.html b/template/modal/window.html
index 3714dd61e6..71adf31e2a 100644
--- a/template/modal/window.html
+++ b/template/modal/window.html
@@ -1 +1,3 @@
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/template/pagination/pager.html b/template/pagination/pager.html
index 74b77f2d8b..887027aa97 100644
--- a/template/pagination/pager.html
+++ b/template/pagination/pager.html
@@ -1,5 +1,3 @@
-
+
\ No newline at end of file
diff --git a/template/pagination/pagination.html b/template/pagination/pagination.html
index dec9c8f7cf..628fa62d8c 100644
--- a/template/pagination/pagination.html
+++ b/template/pagination/pagination.html
@@ -1,4 +1,3 @@
-
+
diff --git a/template/progressbar/bar.html b/template/progressbar/bar.html
index 09a5a6b010..fabe24ce43 100644
--- a/template/progressbar/bar.html
+++ b/template/progressbar/bar.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/template/rating/rating.html b/template/rating/rating.html
index ff78f8b6d4..1d616ba74f 100644
--- a/template/rating/rating.html
+++ b/template/rating/rating.html
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file
diff --git a/template/tabs/tabset-titles.html b/template/tabs/tabset-titles.html
index 560e0f743f..8ac637448f 100644
--- a/template/tabs/tabset-titles.html
+++ b/template/tabs/tabset-titles.html
@@ -1,2 +1,2 @@
-