feat(Animation): Animation for AngularDart.

Closes #635
dart-archive · Feb 27, 2014 · 5a36e77 · 5a36e77
1 parent 59d6659
commit 5a36e77
Show file tree

Hide file tree

Showing 39 changed files with 2,203 additions and 86 deletions.
diff --git a/demo/animate_demo/pubspec.lock b/demo/animate_demo/pubspec.lock
@@ -0,0 +1,77 @@
+# Generated by pub
+# See http://pub.dartlang.org/doc/glossary.html#lockfile
+packages:
+  analyzer:
+    description: analyzer
+    source: hosted
+    version: "0.10.5"
+  angular:
+    description:
+      path: "../.."
+      relative: true
+    source: path
+    version: "0.9.7"
+  args:
+    description: args
+    source: hosted
+    version: "0.9.0"
+  browser:
+    description: browser
+    source: hosted
+    version: "0.9.1"
+  collection:
+    description: collection
+    source: hosted
+    version: "0.9.1"
+  di:
+    description: di
+    source: hosted
+    version: "0.0.32"
+  html5lib:
+    description: html5lib
+    source: hosted
+    version: "0.9.1"
+  intl:
+    description: intl
+    source: hosted
+    version: "0.9.1"
+  logging:
+    description: logging
+    source: hosted
+    version: "0.9.1+1"
+  path:
+    description: path
+    source: hosted
+    version: "1.0.0"
+  perf_api:
+    description: perf_api
+    source: hosted
+    version: "0.0.8"
+  route_hierarchical:
+    description: route_hierarchical
+    source: hosted
+    version: "0.4.14"
+  shadow_dom:
+    description: shadow_dom
+    source: hosted
+    version: "0.9.2"
+  source_maps:
+    description: source_maps
+    source: hosted
+    version: "0.9.0"
+  stack_trace:
+    description: stack_trace
+    source: hosted
+    version: "0.9.1"
+  unittest:
+    description: unittest
+    source: hosted
+    version: "0.10.0"
+  unmodifiable_collection:
+    description: unmodifiable_collection
+    source: hosted
+    version: "0.9.2+1"
+  utf:
+    description: utf
+    source: hosted
+    version: "0.9.0"
diff --git a/demo/animate_demo/pubspec.yaml b/demo/animate_demo/pubspec.yaml
@@ -0,0 +1,7 @@
+name: angular_animate_demo
+version: 0.0.1
+dependencies:
+  angular:
+    path: ../..
+  browser: any
+  unittest: any
diff --git a/demo/animate_demo/web/animate_demo.dart b/demo/animate_demo/web/animate_demo.dart
@@ -0,0 +1,36 @@
+library animate_demo;
+
+import 'package:angular/angular.dart';
+import 'package:angular/animate/module.dart';
+
+// This annotation allows Dart to shake away any classes
+// not used from Dart code nor listed in another @MirrorsUsed.
+//
+// If you create classes that are referenced from the Angular
+// expressions, you must include a library target in @MirrorsUsed.
+@MirrorsUsed(override: '*')
+import 'dart:mirrors';
+
+part 'repeat_demo.dart';
+part 'visibility_demo.dart';
+part 'stress_demo.dart';
+part 'css_demo.dart';
+
+@NgController(
+    selector: '[animation-demo]',
+    publishAs: 'demo'
+)
+class AnimationDemoController {
+  var pages = ["About", "ng-repeat", "Visibility", "Css", "Stress Test"];
+  var currentPage = "About";
+}
+
+main() {
+  ngBootstrap(module: new Module()
+    ..install(new NgAnimateModule())
+    ..type(RepeatDemoComponent)
+    ..type(VisibilityDemoComponent)
+    ..type(StressDemoComponent)
+    ..type(CssDemoComponent)
+    ..type(AnimationDemoController));
+}
diff --git a/demo/animate_demo/web/css_demo.dart b/demo/animate_demo/web/css_demo.dart
@@ -0,0 +1,32 @@
+part of animate_demo;
+
+@NgComponent(
+    selector: 'css-demo',
+    template: '''
+      <div class="css-demo">
+        <button ng-click="ctrl.stateA = !ctrl.stateA"
+            ng-class="{'active': ctrl.stateA}">
+            Toggle A</button>
+        <button ng-click="ctrl.stateB = !ctrl.stateB"
+            ng-class="{'active': ctrl.stateB}">
+            Toggle B</button>
+        <button ng-click="ctrl.stateC = !ctrl.stateC"
+            ng-class="{'active': ctrl.stateC}">
+            Toggle C</button>
+        <div class="box-container">
+          <div class="css-box" ng-class="{
+            'a': ctrl.stateA,
+            'b': ctrl.stateB,
+            'c': ctrl.stateC}">BOX</div>
+          </div>
+        </div>
+      </div>
+    ''',
+    publishAs: 'ctrl',
+    applyAuthorStyles: true
+)
+class CssDemoComponent {
+  bool stateA = false;
+  bool stateB = false;
+  bool stateC = false;
+}
diff --git a/demo/animate_demo/web/index.html b/demo/animate_demo/web/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>NgAnimate | Demos, Stress Tests, Examples and More!</title>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+</head>
+<body class="ng-cloak" ng-app animation-demo>
+  <nav>
+    <button ng-repeat="page in demo.pages"
+        ng-click="demo.currentPage = page"
+        ng-class="{'current': demo.currentPage == page}">
+      {{page}}
+    </button>
+  </nav>
+  <div class="content" ng-switch="demo.currentPage">
+    <div class="demo" ng-switch-default>
+      <h2>About</h2>
+      <p>The NgAnimate module is a port with modifications of the original
+        AngularJS animation module. The default implementation does nothing.
+        It simply provides hooks into the angular subsystem. Adding
+        <code>NgAnimateModule</code> however is a whole different story. Once
+        added it allows you define and run css animations on your elements with
+        pure CSS.</p>
+      <p>Check out the demos above.</p>
+    </div>
+    <div class="demo" ng-switch-when="ng-repeat">
+      <h2>ng-repeat Demo</h2>
+      <repeat-demo></repeat-demo>
+    </div>
+    <div class="demo" ng-switch-when="Visibility">
+      <h2>Visibility Demo</h2>
+      <visibility-demo></visibility-demo>
+    </div>
+    <div class="demo" ng-switch-when="Css">
+      <h2>Css Demo</h2>
+      <p><strong>TODO</strong> This should contain a demo of css animation by applying multiple
+      classes and running multiple simultanious animations on the same
+      object.</p>
+      <css-demo></css-demo>
+    </div>
+    <div class="demo" ng-switch-when="Stress Test">
+      <h2>Stress Test</h2>
+      <stress-demo></stress-demo>
+    </div>
+  </div>
+<script type="application/dart" src="animate_demo.dart"></script>
+<script src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/demo/animate_demo/web/repeat_demo.dart b/demo/animate_demo/web/repeat_demo.dart
@@ -0,0 +1,32 @@
+part of animate_demo;
+
+@NgComponent(
+    selector: 'repeat-demo',
+    template: '''
+      <div class="repeat-demo">
+      <button ng-click="ctrl.addItem()">Add Thing</button>
+      <button ng-click="ctrl.removeItem()">Remove Thing
+      </button>
+      <ul><li ng-repeat="outer in ctrl.items">
+        <ul><li ng-repeat="inner in ctrl.items">
+          {{inner}}</li></ul>
+      </li></ul>
+      </div>
+    ''',
+    publishAs: 'ctrl',
+    applyAuthorStyles: true
+)
+class RepeatDemoComponent {
+  var thing = 0;
+  var items = [];
+
+  addItem() {
+    items.add("Thing ${thing++}");
+  }
+
+  removeItem() {
+    if (items.length > 0) {
+      items.removeLast();
+    }
+  }
+}
diff --git a/demo/animate_demo/web/stress_demo.dart b/demo/animate_demo/web/stress_demo.dart
@@ -0,0 +1,34 @@
+part of animate_demo;
+
+@NgComponent(selector: 'stress-demo', template:
+    '''
+      <div class="stress-demo">
+        <button ng-click="ctrl.visible = !ctrl.visible">
+          Toggle Visibility</button>
+        <div>
+          <div class="stress-box"
+            ng-repeat="number in ctrl.numbers">
+        </div>
+        </div>
+      </div>
+    ''',
+    publishAs: 'ctrl', applyAuthorStyles: true)
+class StressDemoComponent {
+  bool _visible = true;
+
+  // When visibility changes add or remove a large
+  // chunk of elements.
+  set visible(bool value) {
+    if (value) {
+      for (int i = 0; i < 200; i++) {
+        numbers.add(i);
+      }
+    } else {
+      numbers.clear();
+    }
+    _visible = value;
+  }
+  get visible => _visible;
+
+  List<int> numbers = [1, 2];
+}