Skip to content

Commit 606ae93

Browse files
ajoslinajoslin
committed
refactor(): ggnore, ngAnimate
Addresses #1100
1 parent 2ab9c3a commit 606ae93

File tree

9 files changed

+69
-177
lines changed

9 files changed

+69
-177
lines changed

‎js/ext/angular/src/service/animateClassToggler.js

-55
This file was deleted.

‎js/ext/angular/src/service/ionicBackdrop.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,11 @@ angular.module('ionic')
44
* @private
55
*/
66
.factory('$ionicBackdrop', [
7-
'$animate',
87
'$document',
9-
'$animateClassToggler',
10-
function($animate, $document, $animateClassToggler) {
8+
function($document) {
119

12-
var el = angular.element('<div class="backdrop ng-hide">');
10+
var el = angular.element('<div class="backdrop">');
1311
var backdropHolds = 0;
14-
var toggler = $animateClassToggler(el, 'ng-hide');
1512

1613
$document[0].body.appendChild(el[0]);
1714

@@ -24,12 +21,18 @@ function($animate, $document, $animateClassToggler) {
2421

2522
function retain() {
2623
if ( (++backdropHolds) === 1 ) {
27-
toggler.removeClass();
24+
el.addClass('visible');
25+
ionic.requestAnimationFrame(function() {
26+
backdropHolds && el.addClass('active');
27+
});
2828
}
2929
}
3030
function release() {
3131
if ( (--backdropHolds) === 0 ) {
32-
toggler.addClass();
32+
el.removeClass('active');
33+
setTimeout(function() {
34+
!backdropHolds && el.removeClass('visible');
35+
}, 100);
3336
}
3437
}
3538
}]);

‎js/ext/angular/src/service/ionicLoading.js

+16-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
var TPL_LOADING =
3-
'<div class="loading ng-hide">' +
3+
'<div class="loading">' +
44
'</div>';
55

66
var HIDE_LOADING_DEPRECATED = '$ionicLoading instance.hide() has been deprecated. Use $ionicLoading.hide().';
@@ -33,16 +33,14 @@ angular.module('ionic.service.loading', [])
3333
* ```
3434
*/
3535
.factory('$ionicLoading', [
36-
'$animate',
3736
'$document',
3837
'$ionicTemplateLoader',
3938
'$ionicBackdrop',
4039
'$timeout',
4140
'$q',
4241
'$log',
4342
'$compile',
44-
'$animateClassToggler',
45-
function($animate, $document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $compile, $animateClassToggler) {
43+
function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $compile) {
4644

4745
var loaderInstance;
4846
//default value
@@ -83,10 +81,9 @@ function($animate, $document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q
8381
})
8482
.then(function(loader) {
8583

86-
var toggler = $animateClassToggler(loader.element, 'ng-hide');
84+
var self = loader;
8785

8886
loader.show = function(options) {
89-
var self = this;
9087
var templatePromise = options.templateUrl ?
9188
$ionicTemplateLoader.load(options.templateUrl) :
9289
//options.content: deprecated
@@ -114,18 +111,28 @@ function($animate, $document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q
114111
self.element.html(html);
115112
$compile(self.element.contents())(self.scope);
116113
}
114+
115+
//Don't show until template changes
116+
if (self.isShown) {
117+
self.element.addClass('visible');
118+
ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
119+
ionic.requestAnimationFrame(function() {
120+
self.isShown && self.element.addClass('active');
121+
});
122+
}
117123
});
118124

119-
toggler.removeClass();
120-
ionic.DomUtil.centerElementByMarginTwice(this.element[0]);
121125
this.isShown = true;
122126
};
123127
loader.hide = function() {
124128
if (this.isShown) {
125129
if (this.hasBackdrop) {
126130
$ionicBackdrop.release();
127131
}
128-
toggler.addClass();
132+
self.element.removeClass('active');
133+
setTimeout(function() {
134+
!self.isShown && self.element.removeClass('visible');
135+
}, 200);
129136
}
130137
$timeout.cancel(this.durationTimeout);
131138
this.isShown = false;

‎js/ext/angular/test/directive/ionicBackdrop.unit.js

+15-20
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,36 @@ describe('$ionicBackdrop service', function() {
55
ionic.requestAnimationFrame = function(cb) { cb(); };
66
}));
77

8-
it('should remove ngHide on retain', inject(function($ionicBackdrop, $timeout) {
8+
it('should add active on retain', inject(function($ionicBackdrop) {
99
var el = $ionicBackdrop._element;
10-
expect(el.hasClass('ng-hide')).toBe(true);
10+
expect(el.hasClass('active')).toBe(false);
1111
$ionicBackdrop.retain();
12-
$timeout.flush();
13-
expect(el.hasClass('ng-hide')).toBe(false);
12+
expect(el.hasClass('active')).toBe(true);
1413
}));
1514

16-
it('should add ngHide on retain', inject(function($ionicBackdrop, $timeout) {
15+
it('should add and remove active on retain and release', inject(function($ionicBackdrop) {
1716
var el = $ionicBackdrop._element;
18-
expect(el.hasClass('ng-hide')).toBe(true);
17+
expect(el.hasClass('active')).toBe(false);
1918
$ionicBackdrop.retain();
20-
$timeout.flush();
21-
expect(el.hasClass('ng-hide')).toBe(false);
19+
expect(el.hasClass('active')).toBe(true);
2220
$ionicBackdrop.release();
23-
$timeout.flush();
24-
expect(el.hasClass('ng-hide')).toBe(true);
21+
expect(el.hasClass('active')).toBe(false);
2522
}));
2623

27-
it('should require equal releases and retains', inject(function($ionicBackdrop, $timeout) {
24+
it('should require equal releases and retains', inject(function($ionicBackdrop) {
2825
var el = $ionicBackdrop._element;
29-
expect(el.hasClass('ng-hide')).toBe(true);
26+
expect(el.hasClass('active')).toBe(false);
3027
$ionicBackdrop.retain();
31-
$timeout.flush();
32-
expect(el.hasClass('ng-hide')).toBe(false);
28+
expect(el.hasClass('active')).toBe(true);
3329
$ionicBackdrop.retain();
34-
expect(el.hasClass('ng-hide')).toBe(false);
30+
expect(el.hasClass('active')).toBe(true);
3531
$ionicBackdrop.retain();
36-
expect(el.hasClass('ng-hide')).toBe(false);
32+
expect(el.hasClass('active')).toBe(true);
3733
$ionicBackdrop.release();
38-
expect(el.hasClass('ng-hide')).toBe(false);
34+
expect(el.hasClass('active')).toBe(true);
3935
$ionicBackdrop.release();
40-
expect(el.hasClass('ng-hide')).toBe(false);
36+
expect(el.hasClass('active')).toBe(true);
4137
$ionicBackdrop.release();
42-
$timeout.flush();
43-
expect(el.hasClass('ng-hide')).toBe(true);
38+
expect(el.hasClass('active')).toBe(false);
4439
}));
4540
});

‎js/ext/angular/test/service/animateClassToggler.unit.js

-66
This file was deleted.

‎js/ext/angular/test/service/ionicLoading.unit.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ describe('$ionicLoading service', function() {
4141
expect(loader.durationTimeout).toBeTruthy();
4242
expect(loader.durationTimeout.$$timeoutId).toBeTruthy();
4343
}));
44-
it('should remove ng-hide', inject(function($ionicLoading, $timeout) {
44+
it('should add active', inject(function($ionicLoading, $timeout) {
4545
var loader = TestUtil.unwrapPromise($ionicLoading._getLoader());
4646
ionic.requestAnimationFrame = function(cb) { cb(); };
47-
expect(loader.element.hasClass('ng-hide')).toBe(true);
47+
expect(loader.element.hasClass('active')).toBe(false);
4848
loader.show({});
4949
$timeout.flush();
50-
expect(loader.element.hasClass('ng-hide')).toBe(false);
50+
expect(loader.element.hasClass('active')).toBe(true);
5151
}));
5252
it('should isShown = true', inject(function($ionicLoading) {
5353
var loader = TestUtil.unwrapPromise($ionicLoading._getLoader());
@@ -133,9 +133,9 @@ describe('$ionicLoading service', function() {
133133
expect(loader.show).toHaveBeenCalled();
134134
expect(loader.hide).toHaveBeenCalled();
135135
expect(loader.isShown).toBe(false);
136-
expect(loader.element.hasClass('ng-hide')).toBe(true);
136+
expect(loader.element.hasClass('active')).toBe(false);
137137
}));
138-
it('show should only removeClass after raf is still isShown', inject(function($ionicLoading) {
138+
it('show should only active after raf is still isShown', inject(function($ionicLoading) {
139139
var loader = TestUtil.unwrapPromise($ionicLoading._getLoader());
140140
var rafCallback;
141141
ionic.requestAnimationFrame = function(cb) {
@@ -146,7 +146,7 @@ describe('$ionicLoading service', function() {
146146
loader.hide();
147147
expect(loader.isShown).toBe(false);
148148
rafCallback();
149-
expect(loader.element.hasClass('ng-hide')).toBe(true);
149+
expect(loader.element.hasClass('active')).toBe(false);
150150
ionic.requestAnimationFrame = function(cb) { cb(); };
151151
}));
152152

‎scss/_backdrop.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,15 @@
1010

1111
background-color: rgba(0,0,0,0.4);
1212

13-
@include ng-hide-fade();
13+
visibility: hidden;
14+
opacity: 0;
15+
16+
&.visible {
17+
visibility: visible;
18+
}
19+
&.active {
20+
opacity: 1;
21+
}
22+
23+
@include transition(0.1s opacity linear);
1424
}

‎scss/_loading.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@
55
*/
66

77
.loading {
8-
@include ng-hide-fade(0.2s);
8+
@include transition(0.2s opacity linear);
9+
10+
visibility: hidden;
11+
opacity: 0;
12+
13+
&.visible {
14+
visibility: visible;
15+
}
16+
&.active {
17+
opacity: 1;
18+
}
919

1020
position: fixed;
1121
top: 50%;

‎scss/_mixins.scss

-12
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,6 @@
22
// Button Mixins
33
// --------------------------------------------------
44

5-
@mixin ng-hide-fade($transition-duration:0.15s, $transition-timing-function:ease-out) {
6-
@include transition(opacity $transition-duration $transition-timing-function);
7-
opacity: 1;
8-
&.ng-hide {
9-
opacity: 0;
10-
}
11-
&.ng-hide-remove,
12-
&.ng-hide-add {
13-
display: block !important;
14-
}
15-
}
16-
175
@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
186
border-color: $border-color;
197
background-color: $bg-color;

0 commit comments

Comments
 (0)