Skip to content

Commit

Permalink
refactor(accordion): use ngAnimate for animations
Browse files Browse the repository at this point in the history
- Deprecate collapse module
  Consider removing it after transition module is deprecated as well.

Fixes angular-ui#2871
Closes angular-ui#1675
  • Loading branch information
chrisirhc committed Mar 21, 2015
1 parent 431b9c7 commit 09fe63c
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 5 deletions.
63 changes: 61 additions & 2 deletions src/accordion/accordion.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
angular.module('ui.bootstrap.accordion', [])

.constant('accordionConfig', {
closeOthers: true
Expand Down Expand Up @@ -127,4 +127,63 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
});
}
};
});
})

/**
* Animations based on addition and removal of `in` class
* This requires the bootstrap classes to be present in order to take advantage
* of the animation classes.
*/
.animation('.panel-collapse', function () {
return {
beforeAddClass: function (element, className, done) {
if (className == 'in') {
element
.removeClass('collapse')
.addClass('collapsing')
;
}
done();
},
addClass: function (element, className, done) {
if (className == 'in') {
element
.css({height: element[0].scrollHeight + 'px'})
.one('$animate:close', function closeFn() {
element
.removeClass('collapsing')
.css({height: 'auto'});
});
}
done();
},
beforeRemoveClass: function (element, className, done) {
if (className == 'in') {
element
// IMPORTANT: The height must be set before adding "collapsing" class.
// Otherwise, the browser attempts to animate from height 0 (in
// collapsing class) to the given height here.
.css({height: element[0].scrollHeight + 'px'})
// initially all panel collapse have the collapse class, this removal
// prevents the animation from jumping to collapsed state
.removeClass('collapse')
.addClass('collapsing');
}
done();
},
removeClass: function (element, className, done) {
if (className == 'in') {
element
.css({height: '0'})
.one('$animate:close', function closeFn() {
element
.removeClass('collapsing')
.addClass('collapse');
});
}
done();
}
};
})

;
4 changes: 2 additions & 2 deletions src/accordion/test/accordion.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,8 +265,8 @@ describe('accordion', 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);
expect(findGroupBody(0)).toHaveClass('in');
expect(findGroupBody(1)).not.toHaveClass('in');
});
});

Expand Down
3 changes: 3 additions & 0 deletions src/collapse/collapse.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/**
* @deprecated Switching over to using ngAnimate for animations
*/
angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])

.directive('collapse', ['$transition', function ($transition) {
Expand Down
2 changes: 1 addition & 1 deletion template/accordion/accordion-group.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h4 class="panel-title">
<a href="javascript:void(0)" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-collapse collapse" ng-class="{in: isOpen}">
<div class="panel-body" ng-transclude></div>
</div>
</div>

0 comments on commit 09fe63c

Please sign in to comment.