angular-rails-engine 1.1.5.0 → 1.2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 26672e71f0500d424e50d99f4064f26d1ef11db9
4
- data.tar.gz: 82e9f502e9224e38c81c1b6bb3009410f3974aa9
3
+ metadata.gz: f9b1ace66adfea9dfcf0ca3bf936727a37a358b3
4
+ data.tar.gz: 3523beb1312f717022c26ea8ad21ae3a35d6278c
5
5
  SHA512:
6
- metadata.gz: a71aaecf256d7e5e463f93b8809d8361a557eef011d0d9b412ad46c7584a2e101ca40da57bdbfade750506efe75bee23a8b179f7aae991a3d4d3ef2ccc8c815f
7
- data.tar.gz: 9013d9a11734b93f100ac67f495ecd9fe7a5c42b2dbceda660b2480e93daf2228bb0a9d2bbf63a644f88c927bce1b439a2743eb9398250b7a59849731c6bc39d
6
+ metadata.gz: 33eee2b0d813c92201b4cc45db1764a9603d1b46175d3f8f72ff9610e26ff0a843190c1dd946b7758aa9c347f34d027750fcc35d4553dfbc78e76851c882a5e2
7
+ data.tar.gz: 8691cd56f2e386a0f046215a7b95590d19246c8ccb3e55c368b9c44a22a9fcdb5ffea9e4f19cd23f02ba448bc20aed979f1652da9165143c59effb3fbc5062ff
Binary file
data.tar.gz.sig CHANGED
Binary file
data/README.md CHANGED
@@ -2,11 +2,11 @@
2
2
  Make [Angular.js](http://angularjs.org) into Rails Engine.
3
3
 
4
4
  ## Version
5
- Angular.js 1.1.5
5
+ Angular.js 1.2.0rc1
6
6
 
7
7
  ### Older Versions
8
8
 
9
- For Angular.js 1.0.x, try [1.0 branch](https://github.com/yjchen/angular-rails-engine/tree/1.0) or gem version around 1.0.x.x.
9
+ For Angular.js 1.0.x, try [1.0 branch](https://github.com/yjchen/angular-rails-engine/tree/1.0) or gem version around 1.0.x.x. So does 1.1.x from its branch.
10
10
 
11
11
  ## Rails 3.2 or later
12
12
  Include Gemfile,
@@ -0,0 +1,677 @@
1
+ /**
2
+ * @license AngularJS v1.2.0rc1
3
+ * (c) 2010-2012 Google, Inc. http://angularjs.org
4
+ * License: MIT
5
+ */
6
+ (function(window, angular, undefined) {'use strict';
7
+
8
+ /**
9
+ * @ngdoc overview
10
+ * @name ngAnimate
11
+ * @description
12
+ *
13
+ * ngAnimate
14
+ * =========
15
+ *
16
+ * The ngAnimate module is an optional module that comes packed with AngularJS that can be included within an AngularJS
17
+ * application to provide support for CSS and JavaScript animation hooks.
18
+ *
19
+ * To make use of animations with AngularJS, the `angular-animate.js` JavaScript file must be included into your application
20
+ * and the `ngAnimate` module must be included as a dependency.
21
+ *
22
+ * <pre>
23
+ * angular.module('App', ['ngAnimate']);
24
+ * </pre>
25
+ *
26
+ * Then, to see animations in action, all that is required is to define the appropriate CSS classes
27
+ * or to register a JavaScript animation via the $animation service. The directives that support animation automatically are:
28
+ * `ngRepeat`, `ngInclude`, `ngSwitch`, `ngShow`, `ngHide` and `ngView`. Custom directives can take advantage of animation
29
+ * by using the `$animate` service.
30
+ *
31
+ * Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives:
32
+ *
33
+ * | Directive | Supported Animations |
34
+ * |---------------------------------------------------------- |----------------------------------------------------|
35
+ * | {@link ng.directive:ngRepeat#animations ngRepeat} | enter, leave and move |
36
+ * | {@link ngRoute.directive:ngView#animations ngView} | enter and leave |
37
+ * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
38
+ * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
39
+ * | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
40
+ * | {@link ng.directive:ngShow#animations ngClass} | add and remove |
41
+ * | {@link ng.directive:ngShow#animations ngShow & ngHide} | add and remove (the ng-hide class value) |
42
+ *
43
+ * You can find out more information about animations upon visiting each directive page.
44
+ *
45
+ * Below is an example of how to apply animations to a directive that supports animation hooks:
46
+ *
47
+ * <pre>
48
+ * <style type="text/css">
49
+ * .slide.ng-enter > div,
50
+ * .slide.ng-leave > div {
51
+ * -webkit-transition:0.5s linear all;
52
+ * -moz-transition:0.5s linear all;
53
+ * -o-transition:0.5s linear all;
54
+ * transition:0.5s linear all;
55
+ * }
56
+ *
57
+ * .slide.ng-enter { } /&#42; starting animations for enter &#42;/
58
+ * .slide.ng-enter-active { } /&#42; terminal animations for enter &#42;/
59
+ * .slide.ng-leave { } /&#42; starting animations for leave &#42;/
60
+ * .slide.ng-leave-active { } /&#42; terminal animations for leave &#42;/
61
+ * </style>
62
+ *
63
+ * <!--
64
+ * the animate service will automatically add .ng-enter and .ng-leave to the element
65
+ * to trigger the CSS transition/animations
66
+ * -->
67
+ * <ANY class="slide" ng-include="..."></ANY>
68
+ * </pre>
69
+ *
70
+ * Keep in mind that if an animation is running, any child elements cannot be animated until the parent element's
71
+ * animation has completed.
72
+ *
73
+ * <h2>CSS-defined Animations</h2>
74
+ * The animate service will automatically apply two CSS classes to the animated element and these two CSS classes
75
+ * are designed to contain the start and end CSS styling. Both CSS transitions and keyframe animations are supported
76
+ * and can be used to play along with this naming structure.
77
+ *
78
+ * The following code below demonstrates how to perform animations using **CSS transitions** with Angular:
79
+ *
80
+ * <pre>
81
+ * <style type="text/css">
82
+ * /&#42;
83
+ * The animate class is apart of the element and the ng-enter class
84
+ * is attached to the element once the enter animation event is triggered
85
+ * &#42;/
86
+ * .reveal-animation.ng-enter {
87
+ * -webkit-transition: 1s linear all; /&#42; Safari/Chrome &#42;/
88
+ * -moz-transition: 1s linear all; /&#42; Firefox &#42;/
89
+ * -o-transition: 1s linear all; /&#42; Opera &#42;/
90
+ * transition: 1s linear all; /&#42; IE10+ and Future Browsers &#42;/
91
+ *
92
+ * /&#42; The animation preparation code &#42;/
93
+ * opacity: 0;
94
+ * }
95
+ *
96
+ * /&#42;
97
+ * Keep in mind that you want to combine both CSS
98
+ * classes together to avoid any CSS-specificity
99
+ * conflicts
100
+ * &#42;/
101
+ * .reveal-animation.ng-enter.ng-enter-active {
102
+ * /&#42; The animation code itself &#42;/
103
+ * opacity: 1;
104
+ * }
105
+ * </style>
106
+ *
107
+ * <div class="view-container">
108
+ * <div ng-view class="reveal-animation"></div>
109
+ * </div>
110
+ * </pre>
111
+ *
112
+ * The following code below demonstrates how to perform animations using **CSS animations** with Angular:
113
+ *
114
+ * <pre>
115
+ * <style type="text/css">
116
+ * .reveal-animation.ng-enter {
117
+ * -webkit-animation: enter_sequence 1s linear; /&#42; Safari/Chrome &#42;/
118
+ * -moz-animation: enter_sequence 1s linear; /&#42; Firefox &#42;/
119
+ * -o-animation: enter_sequence 1s linear; /&#42; Opera &#42;/
120
+ * animation: enter_sequence 1s linear; /&#42; IE10+ and Future Browsers &#42;/
121
+ * }
122
+ * &#64-webkit-keyframes enter_sequence {
123
+ * from { opacity:0; }
124
+ * to { opacity:1; }
125
+ * }
126
+ * &#64-moz-keyframes enter_sequence {
127
+ * from { opacity:0; }
128
+ * to { opacity:1; }
129
+ * }
130
+ * &#64-o-keyframes enter_sequence {
131
+ * from { opacity:0; }
132
+ * to { opacity:1; }
133
+ * }
134
+ * &#64keyframes enter_sequence {
135
+ * from { opacity:0; }
136
+ * to { opacity:1; }
137
+ * }
138
+ * </style>
139
+ *
140
+ * <div class="view-container">
141
+ * <div ng-view class="reveal-animation"></div>
142
+ * </div>
143
+ * </pre>
144
+ *
145
+ * Both CSS3 animations and transitions can be used together and the animate service will figure out the correct duration and delay timing.
146
+ *
147
+ * Upon DOM mutation, the event class is added first (something like `ng-enter`), then the browser prepares itself to add
148
+ * the active class (in this case `ng-enter-active`) which then triggers the animation. The animation module will automatically
149
+ * detect the CSS code to determine when the animation ends. Once the animation is over then both CSS classes will be
150
+ * removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end
151
+ * immediately resulting in a DOM element that is at its final state. This final state is when the DOM element
152
+ * has no CSS transition/animation classes applied to it.
153
+ *
154
+ * <h2>JavaScript-defined Animations</h2>
155
+ * In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not
156
+ * yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module.
157
+ *
158
+ * <pre>
159
+ * //!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.
160
+ * var ngModule = angular.module('YourApp', []);
161
+ * ngModule.animation('.my-crazy-animation', function() {
162
+ * return {
163
+ * enter: function(element, done) {
164
+ * //run the animation
165
+ * //!annotate Cancel Animation|This function (if provided) will perform the cancellation of the animation when another is triggered
166
+ * return function(element, done) {
167
+ * //cancel the animation
168
+ * }
169
+ * }
170
+ * leave: function(element, done) { },
171
+ * move: function(element, done) { },
172
+ * show: function(element, done) { },
173
+ * hide: function(element, done) { },
174
+ * addClass: function(element, className, done) { },
175
+ * removeClass: function(element, className, done) { },
176
+ * }
177
+ * });
178
+ * </pre>
179
+ *
180
+ * JavaScript-defined animations are created with a CSS-like class selector and a collection of events which are set to run
181
+ * a javascript callback function. When an animation is triggered, $animate will look for a matching animation which fits
182
+ * the element's CSS class attribute value and then run the matching animation event function (if found).
183
+ * In other words, if the CSS classes present on the animated element match any of the JavaScript animations then the callback function
184
+ * be executed. It should be also noted that only simple class selectors are allowed.
185
+ *
186
+ * Within a JavaScript animation, an object containing various event callback animation functions is expected to be returned.
187
+ * As explained above, these callbacks are triggered based on the animation event. Therefore if an enter animation is run,
188
+ * and the JavaScript animation is found, then the enter callback will handle that animation (in addition to the CSS keyframe animation
189
+ * or transition code that is defined via a stylesheet).
190
+ *
191
+ */
192
+
193
+ angular.module('ngAnimate', ['ng'])
194
+
195
+ /**
196
+ * @ngdoc object
197
+ * @name ngAnimate.$animateProvider
198
+ * @description
199
+ *
200
+ * The $AnimationProvider provider allows developers to register and access custom JavaScript animations directly inside
201
+ * of a module. When an animation is triggered, the $animate service will query the $animation function to find any
202
+ * animations that match the provided name value.
203
+ *
204
+ * Please visit the {@link ngAnimate ngAnimate} module overview page learn more about how to use animations in your application.
205
+ *
206
+ */
207
+ .config(['$provide', '$animateProvider', function($provide, $animateProvider) {
208
+ var noop = angular.noop;
209
+ var forEach = angular.forEach;
210
+ var selectors = $animateProvider.$$selectors;
211
+
212
+ var NG_ANIMATE_STATE = '$$ngAnimateState';
213
+ var rootAnimateState = {running:true};
214
+ $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout',
215
+ function($delegate, $injector, $sniffer, $rootElement, $timeout) {
216
+
217
+ $rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
218
+
219
+ function lookup(name) {
220
+ if (name) {
221
+ var matches = [],
222
+ flagMap = {},
223
+ classes = name.substr(1).split('.');
224
+
225
+ //the empty string value is the default animation
226
+ //operation which performs CSS transition and keyframe
227
+ //animations sniffing. This is always included for each
228
+ //element animation procedure
229
+ classes.push('');
230
+
231
+ for(var i=0; i < classes.length; i++) {
232
+ var klass = classes[i],
233
+ selectorFactoryName = selectors[klass];
234
+ if(selectorFactoryName && !flagMap[klass]) {
235
+ matches.push($injector.get(selectorFactoryName));
236
+ flagMap[klass] = true;
237
+ }
238
+ }
239
+ return matches;
240
+ }
241
+ }
242
+
243
+ /**
244
+ * @ngdoc object
245
+ * @name ngAnimate.$animate
246
+ * @requires $timeout, $sniffer, $rootElement
247
+ * @function
248
+ *
249
+ * @description
250
+ * The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move)
251
+ * as well as during addClass and removeClass operations. When any of these operations are run, the $animate service
252
+ * will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object)
253
+ * as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.
254
+ *
255
+ * The `$animate` service is used behind the scenes with pre-existing directives and animation with these directives
256
+ * will work out of the box without any extra configuration.
257
+ *
258
+ * Please visit the {@link ngAnimate ngAnimate} module overview page learn more about how to use animations in your application.
259
+ *
260
+ */
261
+ return {
262
+ /**
263
+ * @ngdoc function
264
+ * @name ngAnimate.$animate#enter
265
+ * @methodOf ngAnimate.$animate
266
+ * @function
267
+ *
268
+ * @description
269
+ * Appends the element to the parent element that resides in the document and then runs the enter animation. Once
270
+ * the animation is started, the following CSS classes will be present on the element for the duration of the animation:
271
+ *
272
+ * Below is a breakdown of each step that occurs during enter animation:
273
+ *
274
+ * | Animation Step | What the element class attribute looks like |
275
+ * |----------------------------------------------------------------------------------------------|-----------------------------------------------|
276
+ * | 1. $animate.enter(...) is called | class="my-animation" |
277
+ * | 2. element is inserted into the parent element or beside the after element | class="my-animation" |
278
+ * | 3. the .ng-enter class is added to the element | class="my-animation ng-enter" |
279
+ * | 4. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-enter" |
280
+ * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-enter" |
281
+ * | 6. the .ng-enter-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-enter ng-enter-active" |
282
+ * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-enter ng-enter-active" |
283
+ * | 8. The animation ends and both CSS classes are removed from the element | class="my-animation" |
284
+ * | 9. The done() callback is fired (if provided) | class="my-animation" |
285
+ *
286
+ * @param {jQuery/jqLite element} element the element that will be the focus of the enter animation
287
+ * @param {jQuery/jqLite element} parent the parent element of the element that will be the focus of the enter animation
288
+ * @param {jQuery/jqLite element} after the sibling element (which is the previous element) of the element that will be the focus of the enter animation
289
+ * @param {function()=} done callback function that will be called once the animation is complete
290
+ */
291
+ enter : function(element, parent, after, done) {
292
+ $delegate.enter(element, parent, after);
293
+ performAnimation('enter', 'ng-enter', element, parent, after, done);
294
+ },
295
+
296
+ /**
297
+ * @ngdoc function
298
+ * @name ngAnimate.$animate#leave
299
+ * @methodOf ngAnimate.$animate
300
+ * @function
301
+ *
302
+ * @description
303
+ * Runs the leave animation operation and, upon completion, removes the element from the DOM. Once
304
+ * the animation is started, the following CSS classes will be added for the duration of the animation:
305
+ *
306
+ * Below is a breakdown of each step that occurs during enter animation:
307
+ *
308
+ * | Animation Step | What the element class attribute looks like |
309
+ * |----------------------------------------------------------------------------------------------|----------------------------------------------|
310
+ * | 1. $animate.leave(...) is called | class="my-animation" |
311
+ * | 2. the .ng-leave class is added to the element | class="my-animation ng-leave" |
312
+ * | 3. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-leave" |
313
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-leave" |
314
+ * | 5. the .ng-leave-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-leave ng-leave-active |
315
+ * | 6. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-leave ng-leave-active |
316
+ * | 7. The animation ends and both CSS classes are removed from the element | class="my-animation" |
317
+ * | 8. The element is removed from the DOM | ... |
318
+ * | 9. The done() callback is fired (if provided) | ... |
319
+ *
320
+ * @param {jQuery/jqLite element} element the element that will be the focus of the leave animation
321
+ * @param {function()=} done callback function that will be called once the animation is complete
322
+ */
323
+ leave : function(element, done) {
324
+ performAnimation('leave', 'ng-leave', element, null, null, function() {
325
+ $delegate.leave(element, done);
326
+ });
327
+ },
328
+
329
+ /**
330
+ * @ngdoc function
331
+ * @name ngAnimate.$animate#move
332
+ * @methodOf ngAnimate.$animate
333
+ * @function
334
+ *
335
+ * @description
336
+ * Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parent container or
337
+ * add the element directly after the after element if present. Then the move animation will be run. Once
338
+ * the animation is started, the following CSS classes will be added for the duration of the animation:
339
+ *
340
+ * Below is a breakdown of each step that occurs during move animation:
341
+ *
342
+ * | Animation Step | What the element class attribute looks like |
343
+ * |----------------------------------------------------------------------------------------------|---------------------------------------------|
344
+ * | 1. $animate.move(...) is called | class="my-animation" |
345
+ * | 2. element is moved into the parent element or beside the after element | class="my-animation" |
346
+ * | 3. the .ng-move class is added to the element | class="my-animation ng-move" |
347
+ * | 4. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-move" |
348
+ * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-move" |
349
+ * | 6. the .ng-move-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-move ng-move-active" |
350
+ * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-move ng-move-active" |
351
+ * | 8. The animation ends and both CSS classes are removed from the element | class="my-animation" |
352
+ * | 9. The done() callback is fired (if provided) | class="my-animation" |
353
+ *
354
+ * @param {jQuery/jqLite element} element the element that will be the focus of the move animation
355
+ * @param {jQuery/jqLite element} parent the parent element of the element that will be the focus of the move animation
356
+ * @param {jQuery/jqLite element} after the sibling element (which is the previous element) of the element that will be the focus of the move animation
357
+ * @param {function()=} done callback function that will be called once the animation is complete
358
+ */
359
+ move : function(element, parent, after, done) {
360
+ $delegate.move(element, parent, after);
361
+ performAnimation('move', 'ng-move', element, null, null, done);
362
+ },
363
+
364
+ /**
365
+ * @ngdoc function
366
+ * @name ngAnimate.$animate#addClass
367
+ * @methodOf ngAnimate.$animate
368
+ *
369
+ * @description
370
+ * Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class.
371
+ * Unlike the other animation methods, the animate service will suffix the className value with {@type -add} in order to provide
372
+ * the animate service the setup and active CSS classes in order to trigger the animation.
373
+ *
374
+ * Below is a breakdown of each step that occurs during addClass animation:
375
+ *
376
+ * | Animation Step | What the element class attribute looks like |
377
+ * |------------------------------------------------------------------------------------------------|---------------------------------------------|
378
+ * | 1. $animate.addClass(element, 'super') is called | class="" |
379
+ * | 2. the .super-add class is added to the element | class="super-add" |
380
+ * | 3. $animate runs any JavaScript-defined animations on the element | class="super-add" |
381
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="super-add" |
382
+ * | 5. the .super-add-active class is added (this triggers the CSS transition/animation) | class="super-add super-add-active" |
383
+ * | 6. $animate waits for X milliseconds for the animation to complete | class="super-add super-add-active" |
384
+ * | 7. The animation ends and both CSS classes are removed from the element | class="" |
385
+ * | 8. The super class is added to the element | class="super" |
386
+ * | 9. The done() callback is fired (if provided) | class="super" |
387
+ *
388
+ * @param {jQuery/jqLite element} element the element that will be animated
389
+ * @param {string} className the CSS class that will be animated and then attached to the element
390
+ * @param {function()=} done callback function that will be called once the animation is complete
391
+ */
392
+ addClass : function(element, className, done) {
393
+ performAnimation('addClass', className, element, null, null, function() {
394
+ $delegate.addClass(element, className, done);
395
+ });
396
+ },
397
+
398
+ /**
399
+ * @ngdoc function
400
+ * @name ngAnimate.$animate#removeClass
401
+ * @methodOf ngAnimate.$animate
402
+ *
403
+ * @description
404
+ * Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value
405
+ * from the element. Unlike the other animation methods, the animate service will suffix the className value with {@type -remove} in
406
+ * order to provide the animate service the setup and active CSS classes in order to trigger the animation.
407
+ *
408
+ * Below is a breakdown of each step that occurs during removeClass animation:
409
+ *
410
+ * | Animation Step | What the element class attribute looks like |
411
+ * |-----------------------------------------------------------------------------------------------|-------------------------------------------------|
412
+ * | 1. $animate.removeClass(element, 'super') is called | class="super" |
413
+ * | 2. the .super-remove class is added to the element | class="super super-remove" |
414
+ * | 3. $animate runs any JavaScript-defined animations on the element | class="super super-remove" |
415
+ * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="super super-remove" |
416
+ * | 5. the .super-remove-active class is added (this triggers the CSS transition/animation) | class="super super-remove super-remove-active" |
417
+ * | 6. $animate waits for X milliseconds for the animation to complete | class="super super-remove super-remove-active" |
418
+ * | 7. The animation ends and both CSS all three classes are removed from the element | class="" |
419
+ * | 8. The done() callback is fired (if provided) | class="" |
420
+ *
421
+ * @param {jQuery/jqLite element} element the element that will be animated
422
+ * @param {string} className the CSS class that will be animated and then removed from the element
423
+ * @param {function()=} done callback function that will be called once the animation is complete
424
+ */
425
+ removeClass : function(element, className, done) {
426
+ performAnimation('removeClass', className, element, null, null, function() {
427
+ $delegate.removeClass(element, className, done);
428
+ });
429
+ },
430
+
431
+ /**
432
+ * @ngdoc function
433
+ * @name ngAnimate.$animate#enabled
434
+ * @methodOf ngAnimate.$animate
435
+ * @function
436
+ *
437
+ * @param {boolean=} value If provided then set the animation on or off.
438
+ * @return {boolean} Current animation state.
439
+ *
440
+ * @description
441
+ * Globally enables/disables animations.
442
+ *
443
+ */
444
+ enabled : function(value) {
445
+ if (arguments.length) {
446
+ rootAnimateState.running = !value;
447
+ }
448
+ return !rootAnimateState.running;
449
+ }
450
+ };
451
+
452
+ /*
453
+ all animations call this shared animation triggering function internally.
454
+ The event variable refers to the JavaScript animation event that will be triggered
455
+ and the className value is the name of the animation that will be applied within the
456
+ CSS code. Element, parent and after are provided DOM elements for the animation
457
+ and the onComplete callback will be fired once the animation is fully complete.
458
+ */
459
+ function performAnimation(event, className, element, parent, after, onComplete) {
460
+ var classes = (element.attr('class') || '') + ' ' + className;
461
+ var animationLookup = (' ' + classes).replace(/\s+/g,'.'),
462
+ animations = [];
463
+ forEach(lookup(animationLookup), function(animation, index) {
464
+ animations.push({
465
+ start : animation[event]
466
+ });
467
+ });
468
+
469
+ if (!parent) {
470
+ parent = after ? after.parent() : element.parent();
471
+ }
472
+ var disabledAnimation = { running : true };
473
+
474
+ //skip the animation if animations are disabled, a parent is already being animated
475
+ //or the element is not currently attached to the document body.
476
+ if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running) {
477
+ //avoid calling done() since there is no need to remove any
478
+ //data or className values since this happens earlier than that
479
+ //and also use a timeout so that it won't be asynchronous
480
+ $timeout(onComplete || noop, 0, false);
481
+ return;
482
+ }
483
+
484
+ var ngAnimateState = element.data(NG_ANIMATE_STATE) || {};
485
+
486
+ //if an animation is currently running on the element then lets take the steps
487
+ //to cancel that animation and fire any required callbacks
488
+ if(ngAnimateState.running) {
489
+ cancelAnimations(ngAnimateState.animations);
490
+ ngAnimateState.done();
491
+ }
492
+
493
+ element.data(NG_ANIMATE_STATE, {
494
+ running:true,
495
+ animations:animations,
496
+ done:done
497
+ });
498
+
499
+ var baseClassName = className;
500
+ if(event == 'addClass') {
501
+ className = suffixClasses(className, '-add');
502
+ } else if(event == 'removeClass') {
503
+ className = suffixClasses(className, '-remove');
504
+ }
505
+
506
+ element.addClass(className);
507
+
508
+ forEach(animations, function(animation, index) {
509
+ var fn = function() {
510
+ progress(index);
511
+ };
512
+
513
+ if(animation.start) {
514
+ if(event == 'addClass' || event == 'removeClass') {
515
+ animation.endFn = animation.start(element, baseClassName, fn);
516
+ } else {
517
+ animation.endFn = animation.start(element, fn);
518
+ }
519
+ } else {
520
+ fn();
521
+ }
522
+ });
523
+
524
+ function cancelAnimations(animations) {
525
+ var isCancelledFlag = true;
526
+ forEach(animations, function(animation) {
527
+ (animation.endFn || noop)(isCancelledFlag);
528
+ });
529
+ }
530
+
531
+ function progress(index) {
532
+ animations[index].done = true;
533
+ (animations[index].endFn || noop)();
534
+ for(var i=0;i<animations.length;i++) {
535
+ if(!animations[i].done) return;
536
+ }
537
+ done();
538
+ }
539
+
540
+ function done() {
541
+ if(!done.hasBeenRun) {
542
+ done.hasBeenRun = true;
543
+ element.removeClass(className);
544
+ element.removeData(NG_ANIMATE_STATE);
545
+ (onComplete || noop)();
546
+ }
547
+ }
548
+ }
549
+ }]);
550
+
551
+ $animateProvider.register('', ['$window','$sniffer', '$timeout', function($window, $sniffer, $timeout) {
552
+ var noop = angular.noop;
553
+ var forEach = angular.forEach;
554
+ function animate(element, className, done) {
555
+ if (!($sniffer.transitions || $sniffer.animations)) {
556
+ done();
557
+ } else {
558
+ var activeClassName = '';
559
+ $timeout(startAnimation, 1, false);
560
+
561
+ //this acts as the cancellation function in case
562
+ //a new animation is triggered while another animation
563
+ //is still going on (otherwise the active className
564
+ //would still hang around until the timer is complete).
565
+ return onEnd;
566
+ }
567
+
568
+ function parseMaxTime(str) {
569
+ var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : [];
570
+ forEach(values, function(value) {
571
+ total = Math.max(parseFloat(value) || 0, total);
572
+ });
573
+ return total;
574
+ }
575
+
576
+ function startAnimation() {
577
+ var duration = 0;
578
+ forEach(className.split(' '), function(klass, i) {
579
+ activeClassName += (i > 0 ? ' ' : '') + klass + '-active';
580
+ });
581
+
582
+ element.addClass(activeClassName);
583
+
584
+ //one day all browsers will have these properties
585
+ var w3cAnimationProp = 'animation';
586
+ var w3cTransitionProp = 'transition';
587
+
588
+ //but some still use vendor-prefixed styles
589
+ var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation';
590
+ var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition';
591
+
592
+ var durationKey = 'Duration',
593
+ delayKey = 'Delay',
594
+ animationIterationCountKey = 'IterationCount';
595
+
596
+ //we want all the styles defined before and after
597
+ var ELEMENT_NODE = 1;
598
+ forEach(element, function(element) {
599
+ if (element.nodeType == ELEMENT_NODE) {
600
+ var elementStyles = $window.getComputedStyle(element) || {};
601
+
602
+ var transitionDelay = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + delayKey]),
603
+ parseMaxTime(elementStyles[vendorTransitionProp + delayKey]));
604
+
605
+ var animationDelay = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + delayKey]),
606
+ parseMaxTime(elementStyles[vendorAnimationProp + delayKey]));
607
+
608
+ var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]),
609
+ parseMaxTime(elementStyles[vendorTransitionProp + durationKey]));
610
+
611
+ var animationDuration = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + durationKey]),
612
+ parseMaxTime(elementStyles[vendorAnimationProp + durationKey]));
613
+
614
+ if(animationDuration > 0) {
615
+ animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp + animationIterationCountKey]) || 0,
616
+ parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0,
617
+ 1);
618
+ }
619
+
620
+ duration = Math.max(animationDelay + animationDuration,
621
+ transitionDelay + transitionDuration,
622
+ duration);
623
+ }
624
+ });
625
+
626
+ $timeout(done, duration * 1000, false);
627
+ }
628
+
629
+ //this will automatically be called by $animate so
630
+ //there is no need to attach this internally to the
631
+ //timeout done method
632
+ function onEnd(cancelled) {
633
+ element.removeClass(activeClassName);
634
+
635
+ //only when the animation is cancelled is the done()
636
+ //function not called for this animation therefore
637
+ //this must be also called
638
+ if(cancelled) {
639
+ done();
640
+ }
641
+ }
642
+ }
643
+
644
+ return {
645
+ enter : function(element, done) {
646
+ return animate(element, 'ng-enter', done);
647
+ },
648
+ leave : function(element, done) {
649
+ return animate(element, 'ng-leave', done);
650
+ },
651
+ move : function(element, done) {
652
+ return animate(element, 'ng-move', done);
653
+ },
654
+ addClass : function(element, className, done) {
655
+ return animate(element, suffixClasses(className, '-add'), done);
656
+ },
657
+ removeClass : function(element, className, done) {
658
+ return animate(element, suffixClasses(className, '-remove'), done);
659
+ }
660
+ };
661
+
662
+ }]);
663
+
664
+ function suffixClasses(classes, suffix) {
665
+ var className = '';
666
+ classes = angular.isArray(classes) ? classes : classes.split(/\s+/);
667
+ forEach(classes, function(klass, i) {
668
+ if(klass && klass.length > 0) {
669
+ className += (i > 0 ? ' ' : '') + klass + suffix;
670
+ }
671
+ });
672
+ return className;
673
+ }
674
+ }]);
675
+
676
+
677
+ })(window, window.angular);