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

Commit

Permalink
feat(collapse): convert to use $animateCss
Browse files Browse the repository at this point in the history
- Change to use `$animateCss` when available

Closes #4257
wesleycho authored and Foxandxss committed Sep 4, 2015
1 parent 0a69580 commit 533a9f0
Showing 3 changed files with 48 additions and 16 deletions.
7 changes: 5 additions & 2 deletions src/accordion/test/accordion.spec.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
describe('accordion', function() {
var $scope;
var $animate, $scope;

beforeEach(module('ui.bootstrap.accordion'));
beforeEach(module('ui.bootstrap.collapse'));
beforeEach(module('ngAnimateMock'));
beforeEach(module('template/accordion/accordion.html'));
beforeEach(module('template/accordion/accordion-group.html'));

beforeEach(inject(function($rootScope) {
beforeEach(inject(function(_$animate_, $rootScope) {
$animate = _$animate_;
$scope = $rootScope;
}));

@@ -358,6 +360,7 @@ describe('accordion', function() {
angular.element(document.body).append(element);
$compile(element)(scope);
scope.$digest();
$animate.flush();
groups = element.find('.panel');
});

39 changes: 28 additions & 11 deletions src/collapse/collapse.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
angular.module('ui.bootstrap.collapse', [])

.directive('collapse', ['$animate', function($animate) {
.directive('collapse', ['$animate', '$injector', function($animate, $injector) {
var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
return {
link: function(scope, element, attrs) {
function expand() {
@@ -9,14 +10,23 @@ angular.module('ui.bootstrap.collapse', [])
.attr('aria-expanded', true)
.attr('aria-hidden', false);

$animate.addClass(element, 'in', {
to: { height: element[0].scrollHeight + 'px' }
}).then(expandDone);
if ($animateCss) {
$animateCss(element, {
addClass: 'in',
easing: 'ease',
to: { height: element[0].scrollHeight + 'px' }
}).start().done(expandDone);
} else {
$animate.addClass(element, 'in', {
to: { height: element[0].scrollHeight + 'px' }
}).then(expandDone);
}
}

function expandDone() {
element.removeClass('collapsing');
element.css({height: 'auto'});
element.removeClass('collapsing')
.addClass('collapse')
.css({height: 'auto'});
}

function collapse() {
@@ -36,15 +46,22 @@ angular.module('ui.bootstrap.collapse', [])
.attr('aria-expanded', false)
.attr('aria-hidden', true);

$animate.removeClass(element, 'in', {
to: {height: '0'}
}).then(collapseDone);
if ($animateCss) {
$animateCss(element, {
removeClass: 'in',
to: {height: '0'}
}).start().done(collapseDone);
} else {
$animate.removeClass(element, 'in', {
to: {height: '0'}
}).then(collapseDone);
}
}

function collapseDone() {
element.css({height: '0'}); // Required so that collapse works when animation is disabled
element.removeClass('collapsing');
element.addClass('collapse');
element.removeClass('collapsing')
.addClass('collapse');
}

scope.$watch(attrs.collapse, function(shouldCollapse) {
18 changes: 15 additions & 3 deletions src/collapse/test/collapse.spec.js
Original file line number Diff line number Diff line change
@@ -28,56 +28,70 @@ describe('collapse directive', function() {
it('should collapse if isCollapsed = true with animation on subsequent use', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
scope.isCollapsed = true;
scope.$digest();
$animate.flush();
expect(element.height()).toBe(0);
});

it('should be shown on initialization if isCollapsed = false without transition', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
expect(element.height()).not.toBe(0);
});

it('should expand if isCollapsed = false with animation on subsequent use', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
scope.isCollapsed = true;
scope.$digest();
$animate.flush();
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
expect(element.height()).not.toBe(0);
});

it('should expand if isCollapsed = true with animation on subsequent uses', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
scope.isCollapsed = true;
scope.$digest();
$animate.flush();
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
scope.isCollapsed = true;
scope.$digest();
$animate.flush();
expect(element.height()).toBe(0);
});

it('should change aria-expanded attribute', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
expect(element.attr('aria-expanded')).toBe('true');

scope.isCollapsed = true;
scope.$digest();
$animate.flush();
expect(element.attr('aria-expanded')).toBe('false');
});

it('should change aria-hidden attribute', function() {
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
expect(element.attr('aria-hidden')).toBe('false');

scope.isCollapsed = true;
scope.$digest();
$animate.flush();
expect(element.attr('aria-hidden')).toBe('true');
});

@@ -98,10 +112,9 @@ describe('collapse directive', function() {
scope.exp = false;
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
scope.$digest();
var collapseHeight = element.height();
scope.exp = true;
$animate.flush();
scope.$digest();
expect(element.height()).toBeGreaterThan(collapseHeight);
});
@@ -110,7 +123,6 @@ describe('collapse directive', function() {
scope.exp = true;
scope.isCollapsed = false;
scope.$digest();
$animate.flush();
var collapseHeight = element.height();
scope.exp = false;
scope.$digest();

0 comments on commit 533a9f0

Please sign in to comment.