@angular-wave/angular.ts 0.0.1

package/src/animations/animateCssDriver.js

@@ -0,0 +1,291 @@
+import { jqLite } from "../jqLite";
+import { forEach, isString } from "../core/utils";
+import { concatWithSpace, getDomNode } from "./shared";
+
+export const $$AnimateCssDriverProvider = [
+  "$$animationProvider",
+  function ($$animationProvider) {
+    $$animationProvider.drivers.push("$$animateCssDriver");
+
+    const NG_ANIMATE_SHIM_CLASS_NAME = "ng-animate-shim";
+    const NG_ANIMATE_ANCHOR_CLASS_NAME = "ng-anchor";
+
+    const NG_OUT_ANCHOR_CLASS_NAME = "ng-anchor-out";
+    const NG_IN_ANCHOR_CLASS_NAME = "ng-anchor-in";
+
+    function isDocumentFragment(node) {
+      return node.parentNode && node.parentNode.nodeType === 11;
+    }
+
+    this.$get = [
+      "$animateCss",
+      "$rootScope",
+      "$$AnimateRunner",
+      "$rootElement",
+      "$document",
+      function (
+        $animateCss,
+        $rootScope,
+        $$AnimateRunner,
+        $rootElement,
+        $document,
+      ) {
+        const bodyNode = $document[0].body;
+        const rootNode = getDomNode($rootElement);
+
+        const rootBodyElement = jqLite(
+          // this is to avoid using something that exists outside of the body
+          // we also special case the doc fragment case because our unit test code
+          // appends the $rootElement to the body after the app has been bootstrapped
+          isDocumentFragment(rootNode) || bodyNode.contains(rootNode)
+            ? rootNode
+            : bodyNode,
+        );
+
+        return function initDriverFn(animationDetails) {
+          return animationDetails.from && animationDetails.to
+            ? prepareFromToAnchorAnimation(
+                animationDetails.from,
+                animationDetails.to,
+                animationDetails.classes,
+                animationDetails.anchors,
+              )
+            : prepareRegularAnimation(animationDetails);
+        };
+
+        function filterCssClasses(classes) {
+          // remove all the `ng-` stuff
+          return classes.replace(/\bng-\S+\b/g, "");
+        }
+
+        function getUniqueValues(a, b) {
+          if (isString(a)) a = a.split(" ");
+          if (isString(b)) b = b.split(" ");
+          return a.filter((val) => b.indexOf(val) === -1).join(" ");
+        }
+
+        function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
+          const clone = jqLite(getDomNode(outAnchor).cloneNode(true));
+          const startingClasses = filterCssClasses(getClassVal(clone));
+
+          outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
+          inAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
+
+          clone.addClass(NG_ANIMATE_ANCHOR_CLASS_NAME);
+
+          rootBodyElement.append(clone);
+
+          let animatorIn;
+          const animatorOut = prepareOutAnimation();
+
+          // the user may not end up using the `out` animation and
+          // only making use of the `in` animation or vice-versa.
+          // In either case we should allow this and not assume the
+          // animation is over unless both animations are not used.
+          if (!animatorOut) {
+            animatorIn = prepareInAnimation();
+            if (!animatorIn) {
+              return end();
+            }
+          }
+
+          const startingAnimator = animatorOut || animatorIn;
+
+          return {
+            start() {
+              let runner;
+
+              let currentAnimation = startingAnimator.start();
+              currentAnimation.done(() => {
+                currentAnimation = null;
+                if (!animatorIn) {
+                  animatorIn = prepareInAnimation();
+                  if (animatorIn) {
+                    currentAnimation = animatorIn.start();
+                    currentAnimation.done(() => {
+                      currentAnimation = null;
+                      end();
+                      runner.complete();
+                    });
+                    return currentAnimation;
+                  }
+                }
+                // in the event that there is no `in` animation
+                end();
+                runner.complete();
+              });
+
+              runner = new $$AnimateRunner({
+                end: endFn,
+                cancel: endFn,
+              });
+
+              return runner;
+
+              function endFn() {
+                if (currentAnimation) {
+                  currentAnimation.end();
+                }
+              }
+            },
+          };
+
+          function calculateAnchorStyles(anchor) {
+            const styles = {};
+
+            const coords = getDomNode(anchor).getBoundingClientRect();
+
+            // we iterate directly since safari messes up and doesn't return
+            // all the keys for the coords object when iterated
+            forEach(["width", "height", "top", "left"], (key) => {
+              let value = coords[key];
+              switch (key) {
+                case "top":
+                  value += bodyNode.scrollTop;
+                  break;
+                case "left":
+                  value += bodyNode.scrollLeft;
+                  break;
+              }
+              styles[key] = `${Math.floor(value)}px`;
+            });
+            return styles;
+          }
+
+          function prepareOutAnimation() {
+            const animator = $animateCss(clone, {
+              addClass: NG_OUT_ANCHOR_CLASS_NAME,
+              delay: true,
+              from: calculateAnchorStyles(outAnchor),
+            });
+
+            // read the comment within `prepareRegularAnimation` to understand
+            // why this check is necessary
+            return animator.$$willAnimate ? animator : null;
+          }
+
+          function getClassVal(element) {
+            return element.attr("class") || "";
+          }
+
+          function prepareInAnimation() {
+            const endingClasses = filterCssClasses(getClassVal(inAnchor));
+            const toAdd = getUniqueValues(endingClasses, startingClasses);
+            const toRemove = getUniqueValues(startingClasses, endingClasses);
+
+            const animator = $animateCss(clone, {
+              to: calculateAnchorStyles(inAnchor),
+              addClass: `${NG_IN_ANCHOR_CLASS_NAME} ${toAdd}`,
+              removeClass: `${NG_OUT_ANCHOR_CLASS_NAME} ${toRemove}`,
+              delay: true,
+            });
+
+            // read the comment within `prepareRegularAnimation` to understand
+            // why this check is necessary
+            return animator.$$willAnimate ? animator : null;
+          }
+
+          function end() {
+            clone.remove();
+            outAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
+            inAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
+          }
+        }
+
+        function prepareFromToAnchorAnimation(from, to, classes, anchors) {
+          const fromAnimation = prepareRegularAnimation(from, function () {});
+          const toAnimation = prepareRegularAnimation(to, function () {});
+
+          const anchorAnimations = [];
+          forEach(anchors, (anchor) => {
+            const outElement = anchor.out;
+            const inElement = anchor.in;
+            const animator = prepareAnchoredAnimation(
+              classes,
+              outElement,
+              inElement,
+            );
+            if (animator) {
+              anchorAnimations.push(animator);
+            }
+          });
+
+          // no point in doing anything when there are no elements to animate
+          if (!fromAnimation && !toAnimation && anchorAnimations.length === 0)
+            return;
+
+          return {
+            start() {
+              const animationRunners = [];
+
+              if (fromAnimation) {
+                animationRunners.push(fromAnimation.start());
+              }
+
+              if (toAnimation) {
+                animationRunners.push(toAnimation.start());
+              }
+
+              forEach(anchorAnimations, (animation) => {
+                animationRunners.push(animation.start());
+              });
+
+              const runner = new $$AnimateRunner({
+                end: endFn,
+                cancel: endFn, // CSS-driven animations cannot be cancelled, only ended
+              });
+
+              $$AnimateRunner.all(animationRunners, (status) => {
+                runner.complete(status);
+              });
+
+              return runner;
+
+              function endFn() {
+                forEach(animationRunners, (runner) => {
+                  runner.end();
+                });
+              }
+            },
+          };
+        }
+
+        function prepareRegularAnimation(animationDetails) {
+          const { element } = animationDetails;
+          const options = animationDetails.options || {};
+
+          if (animationDetails.structural) {
+            options.event = animationDetails.event;
+            options.structural = true;
+            options.applyClassesEarly = true;
+
+            // we special case the leave animation since we want to ensure that
+            // the element is removed as soon as the animation is over. Otherwise
+            // a flicker might appear or the element may not be removed at all
+            if (animationDetails.event === "leave") {
+              options.onDone = options.domOperation;
+            }
+          }
+
+          // We assign the preparationClasses as the actual animation event since
+          // the internals of $animateCss will just suffix the event token values
+          // with `-active` to trigger the animation.
+          if (options.preparationClasses) {
+            options.event = concatWithSpace(
+              options.event,
+              options.preparationClasses,
+            );
+          }
+
+          const animator = $animateCss(element, options);
+
+          // the driver lookup code inside of $$animation attempts to spawn a
+          // driver one by one until a driver returns a.$$willAnimate animator object.
+          // $animateCss will always return an object, however, it will pass in
+          // a flag as a hint as to whether an animation was detected or not
+          return animator.$$willAnimate ? animator : null;
+        }
+      },
+    ];
+  },
+];

package/src/animations/animateJs.js

@@ -0,0 +1,367 @@
+import { forEach, isArray, isObject, isFunction } from "../core/utils";
+import {
+  applyAnimationClassesFactory,
+  applyAnimationStyles,
+  prepareAnimationOptions,
+} from "./shared";
+
+// TODO(matsko): use caching here to speed things up for detection
+// TODO(matsko): add documentation
+//  by the time...
+
+export const $$AnimateJsProvider = [
+  "$animateProvider",
+  function ($animateProvider) {
+    this.$get = [
+      "$injector",
+      "$$AnimateRunner",
+      function ($injector, $$AnimateRunner) {
+        const applyAnimationClasses = applyAnimationClassesFactory();
+        // $animateJs(element, 'enter');
+        return function (element, event, classes, options) {
+          let animationClosed = false;
+
+          // the `classes` argument is optional and if it is not used
+          // then the classes will be resolved from the element's className
+          // property as well as options.addClass/options.removeClass.
+          if (arguments.length === 3 && isObject(classes)) {
+            options = classes;
+            classes = null;
+          }
+
+          options = prepareAnimationOptions(options);
+          if (!classes) {
+            classes = element.attr("class") || "";
+            if (options.addClass) {
+              classes += ` ${options.addClass}`;
+            }
+            if (options.removeClass) {
+              classes += ` ${options.removeClass}`;
+            }
+          }
+
+          const classesToAdd = options.addClass;
+          const classesToRemove = options.removeClass;
+
+          // the lookupAnimations function returns a series of animation objects that are
+          // matched up with one or more of the CSS classes. These animation objects are
+          // defined via the module.animation factory function. If nothing is detected then
+          // we don't return anything which then makes $animation query the next driver.
+          const animations = lookupAnimations(classes);
+          let before;
+          let after;
+          if (animations.length) {
+            let afterFn;
+            let beforeFn;
+            if (event === "leave") {
+              beforeFn = "leave";
+              afterFn = "afterLeave"; // TODO(matsko): get rid of this
+            } else {
+              beforeFn = `before${event.charAt(0).toUpperCase()}${event.substr(1)}`;
+              afterFn = event;
+            }
+
+            if (event !== "enter" && event !== "move") {
+              before = packageAnimations(
+                element,
+                event,
+                options,
+                animations,
+                beforeFn,
+              );
+            }
+            after = packageAnimations(
+              element,
+              event,
+              options,
+              animations,
+              afterFn,
+            );
+          }
+
+          // no matching animations
+          if (!before && !after) return;
+
+          function applyOptions() {
+            options.domOperation();
+            applyAnimationClasses(element, options);
+          }
+
+          function close() {
+            animationClosed = true;
+            applyOptions();
+            applyAnimationStyles(element, options);
+          }
+
+          let runner;
+
+          return {
+            $$willAnimate: true,
+            end() {
+              if (runner) {
+                runner.end();
+              } else {
+                close();
+                runner = new $$AnimateRunner();
+                runner.complete(true);
+              }
+              return runner;
+            },
+            start() {
+              if (runner) {
+                return runner;
+              }
+
+              runner = new $$AnimateRunner();
+              let closeActiveAnimations;
+              const chain = [];
+
+              if (before) {
+                chain.push((fn) => {
+                  closeActiveAnimations = before(fn);
+                });
+              }
+
+              if (chain.length) {
+                chain.push((fn) => {
+                  applyOptions();
+                  fn(true);
+                });
+              } else {
+                applyOptions();
+              }
+
+              if (after) {
+                chain.push((fn) => {
+                  closeActiveAnimations = after(fn);
+                });
+              }
+
+              runner.setHost({
+                end() {
+                  endAnimations();
+                },
+                cancel() {
+                  endAnimations(true);
+                },
+              });
+
+              $$AnimateRunner.chain(chain, onComplete);
+              return runner;
+
+              function onComplete(success) {
+                close(success);
+                runner.complete(success);
+              }
+
+              function endAnimations(cancelled) {
+                if (!animationClosed) {
+                  (closeActiveAnimations || (() => {}))(cancelled);
+                  onComplete(cancelled);
+                }
+              }
+            },
+          };
+
+          function executeAnimationFn(fn, element, event, options, onDone) {
+            let args;
+            switch (event) {
+              case "animate":
+                args = [element, options.from, options.to, onDone];
+                break;
+
+              case "setClass":
+                args = [element, classesToAdd, classesToRemove, onDone];
+                break;
+
+              case "addClass":
+                args = [element, classesToAdd, onDone];
+                break;
+
+              case "removeClass":
+                args = [element, classesToRemove, onDone];
+                break;
+
+              default:
+                args = [element, onDone];
+                break;
+            }
+
+            args.push(options);
+
+            let value = fn.apply(fn, args);
+            if (value) {
+              if (isFunction(value.start)) {
+                value = value.start();
+              }
+
+              if (value instanceof $$AnimateRunner) {
+                value.done(onDone);
+              } else if (isFunction(value)) {
+                // optional onEnd / onCancel callback
+                return value;
+              }
+            }
+
+            return () => {};
+          }
+
+          function groupEventedAnimations(
+            element,
+            event,
+            options,
+            animations,
+            fnName,
+          ) {
+            const operations = [];
+            forEach(animations, (ani) => {
+              const animation = ani[fnName];
+              if (!animation) return;
+
+              // note that all of these animations will run in parallel
+              operations.push(() => {
+                let runner;
+                let endProgressCb;
+
+                let resolved = false;
+                const onAnimationComplete = function (rejected) {
+                  if (!resolved) {
+                    resolved = true;
+                    (endProgressCb || (() => {}))(rejected);
+                    runner.complete(!rejected);
+                  }
+                };
+
+                runner = new $$AnimateRunner({
+                  end() {
+                    onAnimationComplete();
+                  },
+                  cancel() {
+                    onAnimationComplete(true);
+                  },
+                });
+
+                endProgressCb = executeAnimationFn(
+                  animation,
+                  element,
+                  event,
+                  options,
+                  (result) => {
+                    const cancelled = result === false;
+                    onAnimationComplete(cancelled);
+                  },
+                );
+
+                return runner;
+              });
+            });
+
+            return operations;
+          }
+
+          function packageAnimations(
+            element,
+            event,
+            options,
+            animations,
+            fnName,
+          ) {
+            let operations = groupEventedAnimations(
+              element,
+              event,
+              options,
+              animations,
+              fnName,
+            );
+            if (operations.length === 0) {
+              let a;
+              let b;
+              if (fnName === "beforeSetClass") {
+                a = groupEventedAnimations(
+                  element,
+                  "removeClass",
+                  options,
+                  animations,
+                  "beforeRemoveClass",
+                );
+                b = groupEventedAnimations(
+                  element,
+                  "addClass",
+                  options,
+                  animations,
+                  "beforeAddClass",
+                );
+              } else if (fnName === "setClass") {
+                a = groupEventedAnimations(
+                  element,
+                  "removeClass",
+                  options,
+                  animations,
+                  "removeClass",
+                );
+                b = groupEventedAnimations(
+                  element,
+                  "addClass",
+                  options,
+                  animations,
+                  "addClass",
+                );
+              }
+
+              if (a) {
+                operations = operations.concat(a);
+              }
+              if (b) {
+                operations = operations.concat(b);
+              }
+            }
+
+            if (operations.length === 0) return;
+
+            // TODO(matsko): add documentation
+            return function startAnimation(callback) {
+              const runners = [];
+              if (operations.length) {
+                forEach(operations, (animateFn) => {
+                  runners.push(animateFn());
+                });
+              }
+
+              if (runners.length) {
+                $$AnimateRunner.all(runners, callback);
+              } else {
+                callback();
+              }
+
+              return function endFn(reject) {
+                forEach(runners, (runner) => {
+                  if (reject) {
+                    runner.cancel();
+                  } else {
+                    runner.end();
+                  }
+                });
+              };
+            };
+          }
+        };
+
+        function lookupAnimations(classes) {
+          classes = isArray(classes) ? classes : classes.split(" ");
+          const matches = [];
+          const flagMap = {};
+          for (let i = 0; i < classes.length; i++) {
+            const klass = classes[i];
+            const animationFactory =
+              $animateProvider.$$registeredAnimations[klass];
+            if (animationFactory && !flagMap[klass]) {
+              matches.push($injector.get(animationFactory));
+              flagMap[klass] = true;
+            }
+          }
+          return matches;
+        }
+      },
+    ];
+  },
+];