From 8ed0d5b6aa2e29ebc8d2026cb04380ed3343baef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 23 Jul 2013 23:02:15 -0400 Subject: [PATCH] chore($animate): replace show/hide with addClass/removeClass --- docs/component-spec/annotationsSpec.js | 4 +- .../components/angular-bootstrap/bootstrap.js | 4 +- src/ng/animate.js | 10 --- src/ng/directive/ngShowHide.js | 4 +- src/ngAnimate/animate.js | 62 +------------- test/ng/animateSpec.js | 14 +--- test/ng/directive/ngShowHideSpec.js | 8 +- test/ngAnimate/animateSpec.js | 84 +++++++++---------- 8 files changed, 52 insertions(+), 138 deletions(-) diff --git a/docs/component-spec/annotationsSpec.js b/docs/component-spec/annotationsSpec.js index a17c906c7693..90c729181b2b 100644 --- a/docs/component-spec/annotationsSpec.js +++ b/docs/component-spec/annotationsSpec.js @@ -74,10 +74,10 @@ describe('Docs Annotations', function() { enter : function(element, done) { $window.setTimeout(done, 1000); }, - show : function(element, done) { + removeClass : function(element, className, done) { $window.setTimeout(done, 500); }, - hide : function(element, done) { + addClass : function(element, className, done) { $window.setTimeout(done, 200); } } diff --git a/docs/components/angular-bootstrap/bootstrap.js b/docs/components/angular-bootstrap/bootstrap.js index 20a5741de745..31ec763ee1e9 100644 --- a/docs/components/angular-bootstrap/bootstrap.js +++ b/docs/components/angular-bootstrap/bootstrap.js @@ -366,12 +366,12 @@ directive.foldout = ['$http', '$animate','$window', function($http, $animate, $w //avoid showing the element if the user has already closed it if(container.css('display') == 'block') { container.css('display','none'); - $animate.show(container); + $animate.addClass(container, 'ng-hide'); } }); } else { - container.hasClass('ng-hide') ? $animate.show(container) : $animate.hide(container); + container.hasClass('ng-hide') ? $animate.removeClass(container, 'ng-hide') : $animate.addClass(container, 'ng-hide'); } }); }); diff --git a/src/ng/animate.js b/src/ng/animate.js index 7e515594f578..206a4b03c04a 100644 --- a/src/ng/animate.js +++ b/src/ng/animate.js @@ -80,16 +80,6 @@ var $AnimateProvider = ['$provide', function($provide) { this.enter(element, parent, after, done); }, - show : function(element, done) { - element.removeClass('ng-hide'); - (done || noop)(); - }, - - hide : function(element, done) { - element.addClass('ng-hide'); - (done || noop)(); - }, - addClass : function(element, className, done) { className = isString(className) ? className : diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index bdbcf4636801..1bba11efd915 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -100,7 +100,7 @@ var ngShowDirective = ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value){ - $animate[toBoolean(value) ? 'show' : 'hide'](element); + $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide'); }); }; }]; @@ -204,7 +204,7 @@ var ngShowDirective = ['$animate', function($animate) { var ngHideDirective = ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngHide, function ngHideWatchAction(value){ - $animate[toBoolean(value) ? 'hide' : 'show'](element); + $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide'); }); }; }]; diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index ab7a19b035d5..93ff9d8c8426 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -30,8 +30,8 @@ * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave | * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave | * | {@link ng.directive:ngIf#animations ngIf} | enter and leave | - * | {@link ng.directive:ngShow#animations ngShow & ngHide} | show and hide | * | {@link ng.directive:ngShow#animations ngClass} | add and remove | + * | {@link ng.directive:ngShow#animations ngShow & ngHide} | add and remove (the ng-hide class value) | * * You can find out more information about animations upon visiting each directive page. * @@ -335,60 +335,6 @@ angular.module('ngAnimate', ['ng']) performAnimation('move', 'ng-move', element, null, null, done); }, - /** - * @ngdoc function - * @name ngAnimate.$animate#show - * @methodOf ngAnimate.$animate - * @function - * - * @description - * Reveals the element by removing the `ng-hide` class thus performing an animation in the process. During - * this animation the CSS classes present on the element will be: - * - * 
-         * .ng-hide //already on the element if hidden
-         * .ng-hide-remove
-         * .ng-hide-remove-active
-         *
- * - * Once the animation is complete then all three CSS classes will be removed from the element. - * The done callback, if provided, will be also fired once the animation is complete. - * - * @param {jQuery/jqLite element} element the element that will be rendered visible or hidden - * @param {function()=} done callback function that will be called once the animation is complete - */ - show : function(element, done) { - performAnimation('show', 'ng-hide-remove', element, null, null, function() { - $delegate.show(element, done); - }); - }, - - /** - * @ngdoc function - * @name ngAnimate.$animate#hide - * @methodOf ngAnimate.$animate - * - * @description - * Sets the element to hidden by adding the `ng-hide` class it. However, before the class is applied - * the following CSS classes will be added temporarily to trigger any animation code: - * - * 
-         * .ng-hide-add
-         * .ng-hide-add-active
-         *
- * - * Once the animation is complete then both CSS classes will be removed and `ng-hide` will be added to the element. - * The done callback, if provided, will be also fired once the animation is complete. - * - * @param {jQuery/jqLite element} element the element that will be rendered visible or hidden - * @param {function()=} done callback function that will be called once the animation is complete - */ - hide : function(element, done) { - performAnimation('hide', 'ng-hide-add', element, null, null, function() { - $delegate.hide(element, done); - }); - }, - /** * @ngdoc function * @name ngAnimate.$animate#addClass @@ -617,12 +563,6 @@ angular.module('ngAnimate', ['ng']) move : function(element, done) { return animate(element, 'ng-move', done); }, - show : function(element, done) { - return animate(element, 'ng-hide-remove', done); - }, - hide : function(element, done) { - return animate(element, 'ng-hide-add', done); - }, addClass : function(element, className, done) { return animate(element, className, done); }, diff --git a/test/ng/animateSpec.js b/test/ng/animateSpec.js index 7f440bb5188f..c5914a74d2ab 100644 --- a/test/ng/animateSpec.js +++ b/test/ng/animateSpec.js @@ -31,22 +31,10 @@ describe("$animate", function() { expect(element.text()).toBe('21'); })); - it("should animate the show animation event", inject(function($animate) { - element.addClass('ng-hide'); - $animate.show(element); - expect(element).toBeShown(); - })); - - it("should animate the hide animation event", inject(function($animate) { - expect(element).toBeShown(); - $animate.hide(element); - expect(element).toBeHidden(); - })); - it("should still perform DOM operations even if animations are disabled", inject(function($animate) { $animate.enabled(false); expect(element).toBeShown(); - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); expect(element).toBeHidden(); })); }); diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js index f8193a121dac..be0a3895aad5 100644 --- a/test/ng/directive/ngShowHideSpec.js +++ b/test/ng/directive/ngShowHideSpec.js @@ -81,14 +81,14 @@ describe('ngShow / ngHide animations', function() { ))($scope); $scope.$digest(); - item = $animate.process('show').element; + item = $animate.process('removeClass').element; expect(item.text()).toBe('data'); expect(item).toBeShown(); $scope.on = false; $scope.$digest(); - item = $animate.process('hide').element; + item = $animate.process('addClass').element; expect(item.text()).toBe('data'); expect(item).toBeHidden(); })); @@ -104,14 +104,14 @@ describe('ngShow / ngHide animations', function() { ))($scope); $scope.$digest(); - item = $animate.process('hide').element; + item = $animate.process('addClass').element; expect(item.text()).toBe('datum'); expect(item).toBeHidden(); $scope.off = false; $scope.$digest(); - item = $animate.process('show').element; + item = $animate.process('removeClass').element; expect(item.text()).toBe('datum'); expect(item).toBeShown(); })); diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 52bf5e0b70b8..e069049fc10c 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -81,8 +81,6 @@ describe("ngAnimate", function() { } } return { - show : animate, - hide : animate, leave : animate, addClass : animate, removeClass : animate @@ -97,8 +95,6 @@ describe("ngAnimate", function() { } } return { - show : animate, - hide : animate, leave : animate, addClass : animate, removeClass : animate @@ -106,7 +102,7 @@ describe("ngAnimate", function() { }); $animateProvider.register('.setup-memo', function() { return { - show: function(element, done) { + removeClass: function(element, className, done) { element.text('memento'); done(); } @@ -160,7 +156,7 @@ describe("ngAnimate", function() { $rootScope.$digest(); element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element.hasClass('ng-hide-remove')).toBe(true); window.setTimeout.expect(1).process(); @@ -173,7 +169,7 @@ describe("ngAnimate", function() { it("should animate the hide animation event", inject(function($animate, $rootScope, $sniffer) { $rootScope.$digest(); expect(element).toBeShown(); - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element.hasClass('ng-hide-add')).toBe(true); window.setTimeout.expect(1).process(); @@ -206,14 +202,14 @@ describe("ngAnimate", function() { window.setTimeout.expect(0).process(); //hide - $animate.hide(child); + $animate.addClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-add'); window.setTimeout.expect(1).process(); expect(child.attr('class')).toContain('ng-hide-add-active'); window.setTimeout.expect(0).process(); //show - $animate.show(child); + $animate.removeClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-remove'); window.setTimeout.expect(1).process(); expect(child.attr('class')).toContain('ng-hide-remove-active'); @@ -236,12 +232,12 @@ describe("ngAnimate", function() { element.text('123'); expect(element.text()).toBe('123'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); expect(element.text()).toBe('123'); $animate.enabled(true); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { window.setTimeout.expect(1).process(); window.setTimeout.expect(0).process(); @@ -256,7 +252,7 @@ describe("ngAnimate", function() { child.addClass('custom-delay'); expect(element).toBeShown(); - $animate.hide(child); + $animate.addClass(child, 'ng-hide'); if($sniffer.transitions) { window.setTimeout.expect(1).process(); } @@ -293,12 +289,12 @@ describe("ngAnimate", function() { element.append(child); child.addClass('custom-delay ng-hide'); - $animate.show(child); + $animate.removeClass(child, 'ng-hide'); if($sniffer.transitions) { window.setTimeout.expect(1).process(); } - $animate.hide(child); + $animate.addClass(child, 'ng-hide'); expect(child.hasClass('animation-cancelled')).toBe(true); })); @@ -310,12 +306,12 @@ describe("ngAnimate", function() { child.css('display','none'); element.data('foo', 'bar'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { window.setTimeout.expect(1).process(); } - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); expect(element.data('foo')).toEqual('bar'); })); @@ -357,7 +353,7 @@ describe("ngAnimate", function() { element.addClass('custom-delay custom-long-delay'); $rootScope.$digest(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { window.setTimeout.expect(1).process(); @@ -401,7 +397,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { window.setTimeout.expect(1).process(); window.setTimeout.expect(4000).process(); @@ -423,7 +419,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { window.setTimeout.expect(1).process(); window.setTimeout.expect(6000).process(); @@ -445,7 +441,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { window.setTimeout.expect(1).process(); window.setTimeout.expect(2000).process(); @@ -469,7 +465,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { window.setTimeout.expect(1).process(); window.setTimeout.expect(20000).process(); @@ -489,7 +485,7 @@ describe("ngAnimate", function() { element = $compile(html('
1
'))($rootScope); element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); expect(element).toBeShown(); })); @@ -501,7 +497,7 @@ describe("ngAnimate", function() { element = $compile(html('
1
'))($rootScope); element.addClass('custom'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.animations) { window.setTimeout.expect(1).process(); expect(element.hasClass('ng-hide-remove')).toBe(true); @@ -511,7 +507,7 @@ describe("ngAnimate", function() { expect(window.setTimeout.queue.length).toBe(0); } - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); expect(element.hasClass('ng-hide-remove')).toBe(false); //added right away if($sniffer.animations) { //cleanup some pending animations @@ -533,7 +529,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); expect(element).toBeShown(); $animate.enabled(true); @@ -541,7 +537,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { window.setTimeout.expect(1).process(); window.setTimeout.expect(1000).process(); @@ -556,7 +552,7 @@ describe("ngAnimate", function() { inject(function($animate, $rootScope, $compile, $sniffer) { element = $compile(html('
foo
'))($rootScope); element.addClass('ng-hide'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { expect(element).toBeHidden(); window.setTimeout.expect(1).process(); @@ -577,7 +573,7 @@ describe("ngAnimate", function() { 'transition-property: height, left, opacity">foo'))($rootScope); element.addClass('ng-hide'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); expect(element).toBeShown(); $animate.enabled(true); @@ -585,7 +581,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { window.setTimeout.expect(1).process(); window.setTimeout.expect(3000).process(); @@ -608,7 +604,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); expect(element).toBeHidden(); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { window.setTimeout.expect(1).process(); window.setTimeout.expect(11000).process(); @@ -627,7 +623,7 @@ describe("ngAnimate", function() { element = $compile(html('
1
'))($rootScope); element.addClass('ng-hide'); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element.hasClass('ng-hide-remove')).toBe(true); window.setTimeout.expect(1).process(); @@ -641,7 +637,7 @@ describe("ngAnimate", function() { expect(element.hasClass('ng-hide-remove-active')).toBe(false); expect(element).toBeShown(); - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element.hasClass('ng-hide-add')).toBe(true); window.setTimeout.expect(1).process(); @@ -723,14 +719,14 @@ describe("ngAnimate", function() { $provide.value('$window', window = angular.mock.createMockWindow()); $animateProvider.register('.custom', function() { return { - show : function(element, done) { + removeClass : function(element, className, done) { window.setTimeout(done, 2000); } } }); $animateProvider.register('.other', function() { return { - start : function(element, done) { + enter : function(element, done) { window.setTimeout(done, 10000); } } @@ -858,7 +854,7 @@ describe("ngAnimate", function() { body.append($rootElement); var flag = false; - $animate.show(element, function() { + $animate.removeClass(element, 'ng-hide', function() { flag = true; }); @@ -883,7 +879,7 @@ describe("ngAnimate", function() { var element = parent.find('span'); var flag = false; - $animate.show(element, function() { + $animate.removeClass(element, 'ng-hide', function() { flag = true; }); @@ -907,7 +903,7 @@ describe("ngAnimate", function() { element.addClass('custom'); var flag = false; - $animate.show(element, function() { + $animate.removeClass(element, 'ng-hide', function() { flag = true; }); @@ -930,17 +926,17 @@ describe("ngAnimate", function() { var element = parent.find('span'); var signature = ''; - $animate.show(element, function() { + $animate.removeClass(element, 'ng-hide', function() { signature += 'A'; }); - $animate.hide(element, function() { + $animate.addClass(element, 'ng-hide', function() { signature += 'B'; }); if($sniffer.transitions) { window.setTimeout.expect(1).process(); } - $animate.hide(element); //earlier animation cancelled + $animate.addClass(element, 'ng-hide'); //earlier animation cancelled if($sniffer.transitions) { window.setTimeout.expect(1).process(); } @@ -1461,12 +1457,12 @@ describe("ngAnimate", function() { module(function($animateProvider) { $animateProvider.register('.displayer', function($window) { return { - show : function(element, done) { + removeClass : function(element, className, done) { element.removeClass('hiding'); element.addClass('showing'); $window.setTimeout(done, 25); }, - hide : function(element, done) { + addClass : function(element, className, done) { element.removeClass('showing'); element.addClass('hiding'); $window.setTimeout(done, 555); @@ -1486,7 +1482,7 @@ describe("ngAnimate", function() { expect(element.hasClass('showing')).toBe(false); expect(element.hasClass('hiding')).toBe(false); - $animate.hide(element); + $animate.addClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element).toBeShown(); //still showing @@ -1502,7 +1498,7 @@ describe("ngAnimate", function() { expect(element.hasClass('showing')).toBe(false); expect(element.hasClass('hiding')).toBe(true); - $animate.show(element); + $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { expect(element).toBeHidden();