@angular-wave/angular.ts 0.0.51 → 0.0.52

package/src/animations/animate-swap.js

@@ -1,119 +1,30 @@
-/**
- * @ngdoc directive
- * @name ngAnimateSwap
- * @restrict A
- * @scope
- *
- * @description
- *
- * ngAnimateSwap is a animation-oriented directive that allows for the container to
- * be removed and entered in whenever the associated expression changes. A
- * common usecase for this directive is a rotating banner or slider component which
- * contains one image being present at a time. When the active image changes
- * then the old image will perform a `leave` animation and the new element
- * will be inserted via an `enter` animation.
- *
- * @animations
- * | Animation                        | Occurs                               |
- * |----------------------------------|--------------------------------------|
- * | {@link ng.$animate#enter enter}  | when the new element is inserted to the DOM  |
- * | {@link ng.$animate#leave leave}  | when the old element is removed from the DOM |
- *
- * @example
- * <example name="ngAnimateSwap-directive" module="ngAnimateSwapExample"
- *          deps="angular-animate.js"
- *          animations="true" fixBase="true">
- *   <file name="index.html">
- *     <div class="container" ng-controller="AppCtrl">
- *       <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
- *         {{ number }}
- *       </div>
- *     </div>
- *   </file>
- *   <file name="script.js">
- *     angular.module('ngAnimateSwapExample', ['ngAnimate'])
- *       .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
- *         $scope.number = 0;
- *         $interval(function() {
- *           $scope.number++;
- *         }, 1000);
- *
- *         let colors = ['red','blue','green','yellow','orange'];
- *         $scope.colorClass = function(number) {
- *           return colors[number % colors.length];
- *         };
- *       }]);
- *   </file>
- *  <file name="animations.css">
- *  .container {
- *    height:250px;
- *    width:250px;
- *    position:relative;
- *    overflow:hidden;
- *    border:2px solid black;
- *  }
- *  .container .cell {
- *    font-size:150px;
- *    text-align:center;
- *    line-height:250px;
- *    position:absolute;
- *    top:0;
- *    left:0;
- *    right:0;
- *    border-bottom:2px solid black;
- *  }
- *  .swap-animation.ng-enter, .swap-animation.ng-leave {
- *    transition:0.5s linear all;
- *  }
- *  .swap-animation.ng-enter {
- *    top:-250px;
- *  }
- *  .swap-animation.ng-enter-active {
- *    top:0px;
- *  }
- *  .swap-animation.ng-leave {
- *    top:0px;
- *  }
- *  .swap-animation.ng-leave-active {
- *    top:250px;
- *  }
- *  .red { background:red; }
- *  .green { background:green; }
- *  .blue { background:blue; }
- *  .yellow { background:yellow; }
- *  .orange { background:orange; }
- *  </file>
- * </example>
- */
-export const ngAnimateSwapDirective = [
-  "$animate",
-  function ($animate) {
-    return {
-      restrict: "A",
-      transclude: "element",
-      terminal: true,
-      priority: 550, // We use 550 here to ensure that the directive is caught before others,
-      // but after `ngIf` (at priority 600).
-      link(scope, $element, attrs, ctrl, $transclude) {
-        let previousElement;
-        let previousScope;
-        scope.$watchCollection(attrs.ngAnimateSwap || attrs.for, (value) => {
-          if (previousElement) {
-            $animate.leave(previousElement);
-          }
-          if (previousScope) {
-            previousScope.$destroy();
-            previousScope = null;
-          }
-          if (value || value === 0) {
-            $transclude((clone, childScope) => {
-              previousElement = clone;
-              previousScope = childScope;
-              $animate.enter(clone, null, $element);
-            });
-          }
-        });
-      },
-    };
-  },
-];
+ngAnimateSwapDirective.$inject = ["$animate"];
+export function ngAnimateSwapDirective($animate) {
+  return {
+    restrict: "A",
+    transclude: "element",
+    terminal: true,
+    priority: 550, // We use 550 here to ensure that the directive is caught before others,
+    // but after `ngIf` (at priority 600).
+    link(scope, $element, attrs, ctrl, $transclude) {
+      let previousElement;
+      let previousScope;
+      scope.$watchCollection(attrs.ngAnimateSwap || attrs.for, (value) => {
+        if (previousElement) {
+          $animate.leave(previousElement);
+        }
+        if (previousScope) {
+          previousScope.$destroy();
+          previousScope = null;
+        }
+        if (value || value === 0) {
+          $transclude((clone, childScope) => {
+            previousElement = clone;
+            previousScope = childScope;
+            $animate.enter(clone, null, $element);
+          });
+        }
+      });
+    },
+  };
+}

package/src/animations/animate-swap.md

@@ -0,0 +1,88 @@
+/\*\*
+
+- @ngdoc directive
+- @name ngAnimateSwap
+- @restrict A
+- @scope
+-
+- @description
+-
+- ngAnimateSwap is a animation-oriented directive that allows for the container to
+- be removed and entered in whenever the associated expression changes. A
+- common usecase for this directive is a rotating banner or slider component which
+- contains one image being present at a time. When the active image changes
+- then the old image will perform a `leave` animation and the new element
+- will be inserted via an `enter` animation.
+-
+- @animations
+- | Animation | Occurs |
+- |----------------------------------|--------------------------------------|
+- | {@link ng.$animate#enter enter} | when the new element is inserted to the DOM |
+- | {@link ng.$animate#leave leave} | when the old element is removed from the DOM |
+-
+- @example
+- <example name="ngAnimateSwap-directive" module="ngAnimateSwapExample"
+-          deps="angular-animate.js"
+-          animations="true" fixBase="true">
+- <file name="index.html">
+-     <div class="container" ng-controller="AppCtrl">
+-       <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
+-         {{ number }}
+-       </div>
+-     </div>
+- </file>
+- <file name="script.js">
+-     angular.module('ngAnimateSwapExample', ['ngAnimate'])
+-       .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
+-         $scope.number = 0;
+-         $interval(function() {
+-           $scope.number++;
+-         }, 1000);
+-
+-         let colors = ['red','blue','green','yellow','orange'];
+-         $scope.colorClass = function(number) {
+-           return colors[number % colors.length];
+-         };
+-       }]);
+- </file>
+- <file name="animations.css">
+- .container {
+- height:250px;
+- width:250px;
+- position:relative;
+- overflow:hidden;
+- border:2px solid black;
+- }
+- .container .cell {
+- font-size:150px;
+- text-align:center;
+- line-height:250px;
+- position:absolute;
+- top:0;
+- left:0;
+- right:0;
+- border-bottom:2px solid black;
+- }
+- .swap-animation.ng-enter, .swap-animation.ng-leave {
+- transition:0.5s linear all;
+- }
+- .swap-animation.ng-enter {
+- top:-250px;
+- }
+- .swap-animation.ng-enter-active {
+- top:0px;
+- }
+- .swap-animation.ng-leave {
+- top:0px;
+- }
+- .swap-animation.ng-leave-active {
+- top:250px;
+- }
+- .red { background:red; }
+- .green { background:green; }
+- .blue { background:blue; }
+- .yellow { background:yellow; }
+- .orange { background:orange; }
+- </file>
+- </example>
+  */

package/src/animations/animation.js

@@ -9,14 +9,14 @@ import {
   prepareAnimationOptions,
 } from "./shared";
 
+const RUNNER_STORAGE_KEY = "$$animationRunner";
+const PREPARE_CLASSES_KEY = "$$animatePrepareClasses";
+
 export function $$AnimationProvider() {
   const NG_ANIMATE_REF_ATTR = "ng-animate-ref";
 
   const drivers = (this.drivers = []);
 
-  const RUNNER_STORAGE_KEY = "$$animationRunner";
-  const PREPARE_CLASSES_KEY = "$$animatePrepareClasses";
-
   function setRunner(element, runner) {
     element.data(RUNNER_STORAGE_KEY, runner);
   }

package/src/core/animate/animate-runner.js

@@ -1,5 +1,3 @@
-import { forEach } from "../../shared/utils";
-
 export function AnimateAsyncRunFactoryProvider() {
   this.$get = [
     function () {
@@ -33,163 +31,167 @@ export function AnimateAsyncRunFactoryProvider() {
   ];
 }
 
+const INITIAL_STATE = 0;
+const DONE_PENDING_STATE = 1;
+const DONE_COMPLETE_STATE = 2;
+let $q, $$animateAsyncRun, $timeout;
+
 export function AnimateRunnerFactoryProvider() {
   this.$get = [
     "$q",
     "$$animateAsyncRun",
-    "$$isDocumentHidden",
     "$timeout",
-    function ($q, $$animateAsyncRun, $$isDocumentHidden, $timeout) {
-      const INITIAL_STATE = 0;
-      const DONE_PENDING_STATE = 1;
-      const DONE_COMPLETE_STATE = 2;
+    function (q, animateAsyncRun, timeout) {
+      $q = q;
+      $$animateAsyncRun = animateAsyncRun;
+      $timeout = timeout;
+      return AnimateRunner;
+    },
+  ];
+}
 
-      AnimateRunner.chain = function (chain, callback) {
-        let index = 0;
+class AnimateRunner {
+  static chain(chain, callback) {
+    let index = 0;
 
-        next();
-        function next() {
-          if (index === chain.length) {
-            callback(true);
-            return;
-          }
+    function next() {
+      if (index === chain.length) {
+        callback(true);
+        return;
+      }
 
-          chain[index]((response) => {
-            if (response === false) {
-              callback(false);
-              return;
-            }
-            index++;
-            next();
-          });
+      chain[index]((response) => {
+        if (response === false) {
+          callback(false);
+          return;
         }
-      };
-
-      AnimateRunner.all = function (runners, callback) {
-        let count = 0;
-        let status = true;
-        forEach(runners, (runner) => {
-          runner.done(onProgress);
-        });
+        index++;
+        next();
+      });
+    }
 
-        function onProgress(response) {
-          status = status && response;
-          if (++count === runners.length) {
-            callback(status);
-          }
-        }
-      };
+    next();
+  }
 
-      function AnimateRunner(host) {
-        this.setHost(host);
+  static all(runners, callback) {
+    let count = 0;
+    let status = true;
 
-        const rafTick = $$animateAsyncRun();
-        const timeoutTick = function (fn) {
-          $timeout(fn, 0, false);
-        };
+    runners.forEach((runner) => {
+      runner.done(onProgress);
+    });
 
-        this._doneCallbacks = [];
-        this._tick = function (fn) {
-          if ($$isDocumentHidden()) {
-            timeoutTick(fn);
-          } else {
-            rafTick(fn);
-          }
-        };
-        this._state = 0;
+    function onProgress(response) {
+      status = status && response;
+      if (++count === runners.length) {
+        callback(status);
       }
-
-      AnimateRunner.prototype = {
-        setHost(host) {
-          this.host = host || {};
-        },
-
-        done(fn) {
-          if (this._state === DONE_COMPLETE_STATE) {
-            fn();
+    }
+  }
+
+  constructor(host) {
+    this.setHost(host);
+
+    const rafTick = $$animateAsyncRun();
+    const timeoutTick = (fn) => {
+      $timeout(fn, 0, false);
+    };
+
+    this._doneCallbacks = [];
+    this._tick = (fn) => {
+      if (document.hidden) {
+        timeoutTick(fn);
+      } else {
+        rafTick(fn);
+      }
+    };
+    this._state = 0;
+  }
+
+  setHost(host) {
+    this.host = host || {};
+  }
+
+  done(fn) {
+    if (this._state === DONE_COMPLETE_STATE) {
+      fn();
+    } else {
+      this._doneCallbacks.push(fn);
+    }
+  }
+
+  progress() {}
+
+  getPromise() {
+    if (!this.promise) {
+      const self = this;
+      this.promise = $q((resolve, reject) => {
+        self.done((status) => {
+          if (status === false) {
+            reject();
           } else {
-            this._doneCallbacks.push(fn);
-          }
-        },
-
-        progress: () => {},
-
-        getPromise() {
-          if (!this.promise) {
-            const self = this;
-            this.promise = $q((resolve, reject) => {
-              self.done((status) => {
-                if (status === false) {
-                  reject();
-                } else {
-                  resolve();
-                }
-              });
-            });
-          }
-          return this.promise;
-        },
-
-        then(resolveHandler, rejectHandler) {
-          return this.getPromise().then(resolveHandler, rejectHandler);
-        },
-
-        catch(handler) {
-          return this.getPromise().catch(handler);
-        },
-
-        finally(handler) {
-          return this.getPromise().finally(handler);
-        },
-
-        pause() {
-          if (this.host.pause) {
-            this.host.pause();
-          }
-        },
-
-        resume() {
-          if (this.host.resume) {
-            this.host.resume();
-          }
-        },
-
-        end() {
-          if (this.host.end) {
-            this.host.end();
+            resolve();
           }
-          this._resolve(true);
-        },
-
-        cancel() {
-          if (this.host.cancel) {
-            this.host.cancel();
-          }
-          this._resolve(false);
-        },
-
-        complete(response) {
-          const self = this;
-          if (self._state === INITIAL_STATE) {
-            self._state = DONE_PENDING_STATE;
-            self._tick(() => {
-              self._resolve(response);
-            });
-          }
-        },
-
-        _resolve(response) {
-          if (this._state !== DONE_COMPLETE_STATE) {
-            forEach(this._doneCallbacks, (fn) => {
-              fn(response);
-            });
-            this._doneCallbacks.length = 0;
-            this._state = DONE_COMPLETE_STATE;
-          }
-        },
-      };
-
-      return AnimateRunner;
-    },
-  ];
+        });
+      });
+    }
+    return this.promise;
+  }
+
+  then(resolveHandler, rejectHandler) {
+    return this.getPromise().then(resolveHandler, rejectHandler);
+  }
+
+  catch(handler) {
+    return this.getPromise().catch(handler);
+  }
+
+  finally(handler) {
+    return this.getPromise().finally(handler);
+  }
+
+  pause() {
+    if (this.host.pause) {
+      this.host.pause();
+    }
+  }
+
+  resume() {
+    if (this.host.resume) {
+      this.host.resume();
+    }
+  }
+
+  end() {
+    if (this.host.end) {
+      this.host.end();
+    }
+    this._resolve(true);
+  }
+
+  cancel() {
+    if (this.host.cancel) {
+      this.host.cancel();
+    }
+    this._resolve(false);
+  }
+
+  complete(response) {
+    if (this._state === INITIAL_STATE) {
+      this._state = DONE_PENDING_STATE;
+      this._tick(() => {
+        this._resolve(response);
+      });
+    }
+  }
+
+  _resolve(response) {
+    if (this._state !== DONE_COMPLETE_STATE) {
+      this._doneCallbacks.forEach((fn) => {
+        fn(response);
+      });
+      this._doneCallbacks.length = 0;
+      this._state = DONE_COMPLETE_STATE;
+    }
+  }
 }