Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit a6ee572

Browse files
caitpcaitp
committed
WIP --- fixups
1 parent 43dcb36 commit a6ee572

File tree

5 files changed

+191
-75
lines changed

5 files changed

+191
-75
lines changed

‎src/ng/animate.js

+64-43
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,19 @@ var $AnimateProvider = ['$provide', function($provide) {
8686
var currentDefer;
8787
var ELEMENT_NODE = 1;
8888

89+
function extractElementNodes(element) {
90+
var elements = new Array(element.length);
91+
var count = 0;
92+
for(var i = 0; i < element.length; i++) {
93+
var elm = element[i];
94+
if (elm.nodeType == ELEMENT_NODE) {
95+
elements[count++] = elm;
96+
}
97+
}
98+
elements.length = count;
99+
return jqLite(elements);
100+
}
101+
89102
function runAnimationPostDigest(fn) {
90103
var cancelFn, defer = $$q.defer();
91104
defer.promise.$$cancelFn = function ngAnimateMaybeCancel() {
@@ -102,33 +115,31 @@ var $AnimateProvider = ['$provide', function($provide) {
102115
}
103116

104117
function resolveElementClasses(element, cache) {
105-
var map = {};
106-
107-
forEach(cache.add, function(className) {
108-
if (className && className.length) {
109-
map[className] = map[className] || 0;
110-
map[className]++;
111-
}
112-
});
113-
114-
forEach(cache.remove, function(className) {
115-
if (className && className.length) {
116-
map[className] = map[className] || 0;
117-
map[className]--;
118-
}
119-
});
120-
121118
var toAdd = [], toRemove = [];
122-
forEach(map, function(status, className) {
119+
forEach(cache.classes, function(status, className) {
123120
var hasClass = jqLiteHasClass(element[0], className);
124121

125-
if (status < 0 && hasClass) toRemove.push(className);
126-
else if (status > 0 && !hasClass) toAdd.push(className);
122+
// If the most recent class manipulation (via $animate) was to remove the class, and the
123+
// element currently has the class, the class is scheduled for removal. Otherwise, if
124+
// the most recent class manipulation (via $animate) was to add the class, and the
125+
// element does not currently have the class, the class is scheduled to be added.
126+
if (status === false && hasClass) {
127+
toRemove.push(className);
128+
} else if (status === true && !hasClass) {
129+
toAdd.push(className);
130+
}
127131
});
128132

129133
return (toAdd.length + toRemove.length) > 0 && [toAdd.join(' '), toRemove.join(' ')];
130134
}
131135

136+
function cachedClassManipulation(cache, classes, op) {
137+
for (var i=0, ii = classes.length; i < ii; ++i) {
138+
var className = classes[i];
139+
cache[className] = op;
140+
}
141+
}
142+
132143
function asyncPromise() {
133144
// only serve one instance of a promise in order to save CPU cycles
134145
if (!currentDefer) {
@@ -285,40 +296,50 @@ var $AnimateProvider = ['$provide', function($provide) {
285296
* @param {string} remove the CSS class which will be removed from the element
286297
* @return {Promise} the animation callback promise
287298
*/
288-
setClass : function(element, add, remove) {
299+
setClass : function(element, add, remove, runSynchronously) {
289300
var self = this;
290301
var STORAGE_KEY = '$$animateClasses';
291-
element = jqLite(element);
302+
element = extractElementNodes(jqLite(element));
292303

293-
add = isArray(add) ? add : add.split(' ');
294-
remove = isArray(remove) ? remove : remove.split(' ');
304+
if (runSynchronously) {
305+
self.$$addClassImmediately(element, add);
306+
self.$$removeClassImmediately(element, remove);
307+
return asyncPromise();
308+
}
295309

296310
var cache = element.data(STORAGE_KEY);
297-
if (cache) {
298-
cache.add = cache.add.concat(add);
299-
cache.remove = cache.remove.concat(remove);
300-
//the digest cycle will combine all the animations into one function
301-
return cache.promise;
302-
} else {
303-
element.data(STORAGE_KEY, cache = {
304-
add : add,
305-
remove : remove
306-
});
311+
if (!cache) {
312+
cache = {
313+
classes: {}
314+
};
315+
var createdCache = true;
307316
}
308317

309-
return cache.promise = runAnimationPostDigest(function(done) {
310-
var cache = element.data(STORAGE_KEY);
311-
element.removeData(STORAGE_KEY);
318+
var classes = cache.classes;
319+
320+
add = isArray(add) ? add : add.split(' ');
321+
remove = isArray(remove) ? remove : remove.split(' ');
322+
cachedClassManipulation(classes, add, true);
323+
cachedClassManipulation(classes, remove, false);
312324

313-
var classes = cache && resolveElementClasses(element, cache);
325+
if (createdCache) {
326+
cache.promise = runAnimationPostDigest(function(done) {
327+
var cache = element.data(STORAGE_KEY);
328+
element.removeData(STORAGE_KEY);
314329

315-
if (classes) {
316-
if (classes[0]) self.$$addClassImmediately(element, classes[0]);
317-
if (classes[1]) self.$$removeClassImmediately(element, classes[1]);
318-
}
330+
var classes = cache && resolveElementClasses(element, cache);
319331

320-
done();
321-
});
332+
if (classes) {
333+
if (classes[0]) self.$$addClassImmediately(element, classes[0]);
334+
if (classes[1]) self.$$removeClassImmediately(element, classes[1]);
335+
}
336+
337+
done();
338+
});
339+
element.data(STORAGE_KEY, cache);
340+
}
341+
342+
return cache.promise;
322343
},
323344

324345
enabled : noop,

‎src/ngAnimate/animate.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -979,9 +979,7 @@ angular.module('ngAnimate', ['ng'])
979979
element = stripCommentsFromElement(element);
980980

981981
if (classBasedAnimationsBlocked(element)) {
982-
$delegate.$$addClassImmediately(element, add);
983-
$delegate.$$removeClassImmediately(element, remove);
984-
return;
982+
return $delegate.setClass(element, add, remove, true);
985983
}
986984

987985
// we're using a combined array for both the add and remove
@@ -1034,7 +1032,7 @@ angular.module('ngAnimate', ['ng'])
10341032
var classes = resolveElementClasses(element, cache, state.active);
10351033
return !classes
10361034
? done()
1037-
: performAnimation('setClass', classes, element, null, null, function() {
1035+
: performAnimation('setClass', classes, element, parentElement, null, function() {
10381036
if (classes[0]) $delegate.$$addClassImmediately(element, classes[0]);
10391037
if (classes[1]) $delegate.$$removeClassImmediately(element, classes[1]);
10401038
}, done);

‎test/ng/animateSpec.js

+57-7
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ describe("$animate", function() {
5050
expect(element.text()).toBe('21');
5151
}));
5252

53+
5354
it("should still perform DOM operations even if animations are disabled (post-digest)", inject(function($animate, $rootScope) {
5455
$animate.enabled(false);
5556
expect(element).toBeShown();
@@ -141,7 +142,6 @@ describe("$animate", function() {
141142
});
142143
}
143144

144-
145145
it('should defer class manipulation until end of digest', inject(function($rootScope, $animate, log) {
146146
setupClassManipulationLogger(log);
147147
element = jqLite('<p>test</p>');
@@ -171,15 +171,66 @@ describe("$animate", function() {
171171
}));
172172

173173

174-
it('should return a promise which is resolved on a different turn digest', inject(function(log, $animate, $browser, $rootScope) {
174+
it('should defer class manipulation until postDigest when outside of digest', inject(function($rootScope, $animate, log) {
175+
setupClassManipulationLogger(log);
176+
element = jqLite('<p class="test-class4">test</p>');
177+
178+
$animate.addClass(element, 'test-class1');
179+
$animate.removeClass(element, 'test-class1');
180+
$animate.addClass(element, 'test-class2');
181+
$animate.setClass(element, 'test-class3', 'test-class4');
182+
183+
expect(log).toEqual([]);
184+
$rootScope.$digest();
185+
186+
187+
expect(log).toEqual(['addClass(test-class2 test-class3)', 'removeClass(test-class4)']);
188+
expect(element).not.toHaveClass('test-class1');
189+
expect(element).toHaveClass('test-class2');
190+
expect(element).toHaveClass('test-class3');
191+
expect(addClass.callCount).toBe(1);
192+
expect(removeClass.callCount).toBe(1);
193+
}));
194+
195+
196+
it('should perform class manipulation in expected order at end of digest', inject(function($rootScope, $animate, log) {
197+
element = jqLite('<p class="test-class3">test</p>');
198+
199+
setupClassManipulationLogger(log);
200+
201+
$rootScope.$apply(function() {
202+
$animate.addClass(element, 'test-class1');
203+
$animate.addClass(element, 'test-class2');
204+
$animate.removeClass(element, 'test-class1');
205+
$animate.removeClass(element, 'test-class3');
206+
$animate.addClass(element, 'test-class3');
207+
});
208+
expect(log).toEqual(['addClass(test-class2)']);
209+
}));
210+
211+
212+
it('should return a promise which is resolved on a different turn', inject(function(log, $animate, $browser, $rootScope) {
175213
element = jqLite('<p class="test2">test</p>');
176214

177215
$animate.addClass(element, 'test1').then(log.fn('addClass(test1)'));
178216
$animate.removeClass(element, 'test2').then(log.fn('removeClass(test2)'));
179217

180218
$rootScope.$digest();
219+
expect(log).toEqual([]);
181220
$browser.defer.flush();
182221
expect(log).toEqual(['addClass(test1)', 'removeClass(test2)']);
222+
223+
log.reset();
224+
element = jqLite('<p class="test4">test</p>');
225+
226+
$rootScope.$apply(function() {
227+
$animate.addClass(element, 'test3').then(log.fn('addClass(test3)'));
228+
$animate.removeClass(element, 'test4').then(log.fn('removeClass(test4)'));
229+
expect(log).toEqual([]);
230+
});
231+
232+
$browser.defer.flush();
233+
expect(log).toEqual(['addClass(test3)', 'removeClass(test4)']);
183234
}));
184235

185236

@@ -210,10 +261,10 @@ describe("$animate", function() {
210261
}));
211262

212263

213-
it('should defer class manipulation until digest outside of digest for SVG', inject(function($rootScope, $animate, log) {
264+
it('should defer class manipulation until postDigest when outside of digest for SVG', inject(function($rootScope, $animate, log) {
214265
if (!window.SVGElement) return;
215266
setupClassManipulationLogger(log);
216-
element = jqLite('<svg><g></g></svg>');
267+
element = jqLite('<svg><g class="test-class4"></g></svg>');
217268
var target = element.children().eq(0);
218269

219270
$animate.addClass(target, 'test-class1');
@@ -222,15 +273,14 @@ describe("$animate", function() {
222273
$animate.setClass(target, 'test-class3', 'test-class4');
223274

224275
expect(log).toEqual([]);
225-
226276
$rootScope.$digest();
227277

228-
expect(log).toEqual(['addClass(test-class2 test-class3)']);
278+
expect(log).toEqual(['addClass(test-class2 test-class3)', 'removeClass(test-class4)']);
229279
expect(target).not.toHaveClass('test-class1');
230280
expect(target).toHaveClass('test-class2');
231281
expect(target).toHaveClass('test-class3');
232282
expect(addClass.callCount).toBe(1);
233-
expect(removeClass.callCount).toBe(0);
283+
expect(removeClass.callCount).toBe(1);
234284
}));
235285

236286

‎test/ng/directive/formSpec.js

+1
Original file line numberDiff line numberDiff line change
@@ -729,6 +729,7 @@ describe('form', function() {
729729
formCtrl.$setPristine();
730730
scope.$digest();
731731
expect(form).toBePristine();
732+
scope.$digest();
732733
expect(formCtrl.$pristine).toBe(true);
733734
expect(formCtrl.$dirty).toBe(false);
734735
expect(nestedForm).toBePristine();

0 commit comments

Comments
 (0)