Index: third_party/pkg/angular/lib/animate/module.dart |
diff --git a/third_party/pkg/angular/lib/animate/module.dart b/third_party/pkg/angular/lib/animate/module.dart |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cbf42f584a91950663a6a8c88ae5e89cc1c08e9c |
--- /dev/null |
+++ b/third_party/pkg/angular/lib/animate/module.dart |
@@ -0,0 +1,166 @@ |
+/** |
+ * CSS animation and DOM lifecycle management for AngularDart apps. |
+ * |
+ * The [angular.animate](#angular/angular-animate) library makes it easier to build animations |
+ * that affect the lifecycle of DOM elements. A useful example of this is animating the |
+ * removal of an element from the DOM. In order to do this ideally the |
+ * operation should immediatly execute and manipulate the data model, |
+ * and the framework should handle the actual remove of the DOM element once |
+ * the animation complets. This ensures that the logic and model of the |
+ * application is seperated so that the state of the model can be reasoned |
+ * about without having to wory about future modifications of the model. |
+ * This library uses computed css styles to calculate the total duration |
+ * of an animation and handles the addition, removal, and modification of DOM |
+ * elements for block level directives such as `ng-if`, `ng-repeat`, |
+ * `ng-hide`, and more. |
+ * |
+ * To use, install the AnimationModule into your main module: |
+ * |
+ * var module = new Module() |
+ * ..install(new AnimationModule()); |
+ * |
+ * Once the module has been installed, all block level DOM manipulations will |
+ * be routed through the [CssAnimate] class instead of the |
+ * default [NgAnimate] implementation. This will, in turn, |
+ * perform the tracking, manipulation, and computation for animations. |
+ * |
+ * As an example of how this works, let's walk through what happens whan an |
+ * element is added to the DOM. The [CssAnimate] implementation will add the |
+ * `.ng-enter` class to new DOM elements when they are inserted into the DOM |
+ * by a directive and will read the computed style. If there is a |
+ * transition or keyframe animation, that animation duration will be read, |
+ * and the animation will be performed. The `.ng-enter-active` class will be |
+ * added to the DOM element to set the target state for transition based |
+ * animations. When the animation is complete (determined by the |
+ * precomputed duration) the `.ng-enter` and `.ng-enter-active` classes |
+ * will be removed from the DOM element. |
+ * |
+ * When removing elements from the DOM, a simliar pattern is followed. The |
+ * `.ng-leave` class will be added to an element, the transition and / or |
+ * keyframe animation duration will be computed, and if it is non-zero the |
+ * animation will be run by adding the `.ng-leave-active` class. When |
+ * the animation completes, the element will be physically removed from the |
+ * DOM. |
+ * |
+ * The same set of steps is run for each of the following types of DOM |
+ * manipulation: |
+ * |
+ * * `.ng-enter` |
+ * * `.ng-leave` |
+ * * `.ng-move` |
+ * * `.{cssclass}-add` |
+ * * `.{cssclass}-remove` |
+ * |
+ * When writing the css for animating a component you should avoid putting |
+ * css transitions on elements that might be animated or there may be |
+ * unintended pauses or side effects when an element is removed. |
+ * |
+ * Fade out example: |
+ * |
+ * HTML: |
+ * <div class="goodbye" ng-if="ctrl.visible"> |
+ * Goodbye world! |
+ * </div> |
+ * |
+ * CSS: |
+ * .goodbye.ng-leave { |
+ * opacity: 1; |
+ * transition: opacity 1s; |
+ * } |
+ * .goodbye.ng-leave.ng-leave-active { |
+ * opacity: 0; |
+ * } |
+ * |
+ * This will perform a fade out animation on the 'goodby' div when the |
+ * `ctrl.visible` property goes from `true` to `false`. |
+ * |
+ * The [CssAnimate] will also do optimizations on running animations by |
+ * preventing child DOM animations with the [AnimationOptimizer]. This |
+ * prevents transitions on child elements while the parent is animating, |
+ * but will not stop running transitions once they have started. |
+ * |
+ * Finally, it's possible to change the behavior of the [AnimationOptimizer] |
+ * by using the `ng-animate` and `ng-animate-children` with the options |
+ * `never`, `always`, or `auto`. `ng-animate` works only on the specific |
+ * element it is applied too and will override other optimizations if `never` |
+ * or `always` is specified. `ng-animate` defaults to `auto` which will |
+ * defer to the `ng-animate-children` on a parent element or the currently |
+ * running animation check. |
+ * |
+ * `ng-animate-children` allows animation to be controlled on large chunks of |
+ * DOM. It only affects child elements, and allows the `always`, `never`, |
+ * and `auto` values to be specified. Always will always attempt animations |
+ * on child DOM directives, never will always prevent them (except in the |
+ * case where a given element has `ng-animate="always"` specified), |
+ * and `auto` will defer the decision to the currently running animation |
+ * check. |
+ */ |
+ |
+library angular.animate; |
+ |
+import 'dart:async'; |
+import 'dart:html' as dom; |
+ |
+import 'package:angular/core/annotation.dart'; |
+import 'package:angular/core/module_internal.dart'; |
+import 'package:angular/core_dom/module_internal.dart'; |
+import 'package:angular/core_dom/dom_util.dart' as util; |
+import 'package:logging/logging.dart'; |
+import 'package:perf_api/perf_api.dart'; |
+import 'package:di/di.dart'; |
+ |
+@MirrorsUsed(targets: const [ |
+ 'angular.animate' |
+]) |
+import 'dart:mirrors' show MirrorsUsed; |
+ |
+part 'animations.dart'; |
+part 'animation_loop.dart'; |
+part 'animation_optimizer.dart'; |
+part 'css_animate.dart'; |
+part 'css_animation.dart'; |
+part 'ng_animate.dart'; |
+ |
+final Logger _logger = new Logger('ng.animate'); |
+ |
+/** |
+ * Installing the AnimationModule will install a [CssAnimate] implementation of |
+ * the [NgAnimate] interface in your application. This will change the behavior |
+ * of view construction, and some of the native directives to allow you to add |
+ * and define css transition and keyframe animations for the styles of your |
+ * elements. |
+ * |
+ * Example html: |
+ * |
+ * <div ng-if="ctrl.myBoolean" class="my-div">...</div> |
+ * |
+ * Example css defining an opacity transition over .5 seconds using the |
+ * `.ng-enter` and `.ng-leave` css classes: |
+ * |
+ * .my-div.ng-enter { |
+ * transition: all 500ms; |
+ * opacity: 0; |
+ * } |
+ * .my-div.ng-enter-active { |
+ * opacity: 1; |
+ * } |
+ * |
+ * .my-div.ng-leave { |
+ * transition: all 500ms; |
+ * opacity: 1; |
+ * } |
+ * .my-div.ng-leave-active { |
+ * opacity: 0; |
+ * } |
+ */ |
+class AnimationModule extends Module { |
+ AnimationModule() { |
+ type(AnimationFrame); |
+ type(AnimationLoop); |
+ type(CssAnimationMap); |
+ type(AnimationOptimizer); |
+ value(NgAnimate, null); |
+ type(NgAnimateChildren); |
+ type(Animate, implementedBy: CssAnimate); |
+ } |
+} |