@angular-wave/angular.ts 0.0.1

package/src/animations/ngAnimateSwap.js

@@ -0,0 +1,119 @@
+/**
+ * @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);
+            });
+          }
+        });
+      },
+    };
+  },
+];

package/src/animations/rafScheduler.js

@@ -0,0 +1,50 @@
+export const $$rAFSchedulerFactory = [
+  () => {
+    let queue;
+    let cancelFn;
+
+    function nextTick() {
+      if (!queue.length) return;
+
+      const items = queue.shift();
+      items.forEach((i) => i());
+
+      if (!cancelFn) {
+        window.requestAnimationFrame(() => {
+          if (!cancelFn) nextTick();
+        });
+      }
+    }
+
+    function scheduler(tasks) {
+      // we make a copy since RAFScheduler mutates the state
+      // of the passed in array variable and this would be difficult
+      // to track down on the outside code
+      queue = queue.concat(tasks);
+      nextTick();
+    }
+
+    // eslint-disable-next-line no-multi-assign
+    queue = scheduler.queue = [];
+
+    /* waitUntilQuiet does two things:
+     * 1. It will run the FINAL `fn` value only when an uncanceled RAF has passed through
+     * 2. It will delay the next wave of tasks from running until the quiet `fn` has run.
+     *
+     * The motivation here is that animation code can request more time from the scheduler
+     * before the next wave runs. This allows for certain DOM properties such as classes to
+     * be resolved in time for the next animation to run.
+     */
+    scheduler.waitUntilQuiet = (fn) => {
+      if (cancelFn) cancelFn();
+
+      cancelFn = window.requestAnimationFrame(() => {
+        cancelFn = null;
+        fn();
+        nextTick();
+      });
+    };
+
+    return scheduler;
+  },
+];

package/src/animations/shared.js

@@ -0,0 +1,378 @@
+import { forEach, isArray, isString, minErr, extend } from "../core/utils";
+import { jqLite } from "../jqLite";
+
+export const ADD_CLASS_SUFFIX = "-add";
+export const REMOVE_CLASS_SUFFIX = "-remove";
+export const EVENT_CLASS_PREFIX = "ng-";
+export const ACTIVE_CLASS_SUFFIX = "-active";
+export const PREPARE_CLASS_SUFFIX = "-prepare";
+
+export const NG_ANIMATE_CLASSNAME = "ng-animate";
+export const NG_ANIMATE_CHILDREN_DATA = "$$ngAnimateChildren";
+
+// Detect proper transitionend/animationend event names.
+export let CSS_PREFIX = "";
+export let TRANSITION_PROP;
+export let TRANSITIONEND_EVENT;
+export let ANIMATION_PROP;
+export let ANIMATIONEND_EVENT;
+
+// If unprefixed events are not supported but webkit-prefixed are, use the latter.
+// Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
+// Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
+// but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
+// Register both events in case `window.onanimationend` is not supported because of that,
+// do the same for `transitionend` as Safari is likely to exhibit similar behavior.
+// Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
+// therefore there is no reason to test anymore for other vendor prefixes:
+// http://caniuse.com/#search=transition
+if (
+  window.ontransitionend === undefined &&
+  window.onwebkittransitionend !== undefined
+) {
+  CSS_PREFIX = "-webkit-";
+  TRANSITION_PROP = "WebkitTransition";
+  TRANSITIONEND_EVENT = "webkitTransitionEnd transitionend";
+} else {
+  TRANSITION_PROP = "transition";
+  // eslint-disable-next-line no-unused-vars
+  TRANSITIONEND_EVENT = "transitionend";
+}
+
+if (
+  window.onanimationend === undefined &&
+  window.onwebkitanimationend !== undefined
+) {
+  // eslint-disable-next-line no-unused-vars
+  CSS_PREFIX = "-webkit-";
+  ANIMATION_PROP = "WebkitAnimation";
+  ANIMATIONEND_EVENT = "webkitAnimationEnd animationend";
+} else {
+  ANIMATION_PROP = "animation";
+  // eslint-disable-next-line no-unused-vars
+  ANIMATIONEND_EVENT = "animationend";
+}
+
+export const DURATION_KEY = "Duration";
+export const PROPERTY_KEY = "Property";
+export const DELAY_KEY = "Delay";
+export const TIMING_KEY = "TimingFunction";
+export const ANIMATION_ITERATION_COUNT_KEY = "IterationCount";
+export const ANIMATION_PLAYSTATE_KEY = "PlayState";
+export const SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
+
+export const ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
+export const ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
+export const TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
+export const TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
+
+export const ngMinErr = minErr("ng");
+export function assertArg(arg, name, reason) {
+  if (!arg) {
+    throw ngMinErr(
+      "areq",
+      "Argument '{0}' is {1}",
+      name || "?",
+      reason || "required",
+    );
+  }
+  return arg;
+}
+
+export function mergeClasses(a, b) {
+  if (!a && !b) return "";
+  if (!a) return b;
+  if (!b) return a;
+  if (isArray(a)) a = a.join(" ");
+  if (isArray(b)) b = b.join(" ");
+  return `${a} ${b}`;
+}
+
+export function packageStyles(options) {
+  const styles = {};
+  if (options && (options.to || options.from)) {
+    styles.to = options.to;
+    styles.from = options.from;
+  }
+  return styles;
+}
+
+export function pendClasses(classes, fix, isPrefix) {
+  let className = "";
+  // eslint-disable-next-line no-nested-ternary
+  classes = isArray(classes)
+    ? classes
+    : classes && isString(classes) && classes.length
+      ? classes.split(/\s+/)
+      : [];
+  classes.forEach((klass, i) => {
+    if (klass && klass.length > 0) {
+      className += i > 0 ? " " : "";
+      className += isPrefix ? fix + klass : klass + fix;
+    }
+  });
+  return className;
+}
+
+export function removeFromArray(arr, val) {
+  const index = arr.indexOf(val);
+  if (val >= 0) {
+    arr.splice(index, 1);
+  }
+}
+
+export function stripCommentsFromElement(element) {
+  if (element instanceof jqLite) {
+    switch (element.length) {
+      case 0:
+        return element;
+
+      case 1:
+        // there is no point of stripping anything if the element
+        // is the only element within the jqLite wrapper.
+        // (it's important that we retain the element instance.)
+        if (element[0].nodeType === Node.ELEMENT_NODE) {
+          return element;
+        }
+        break;
+
+      default:
+        return jqLite(extractElementNode(element));
+    }
+  }
+
+  if (element.nodeType === Node.ELEMENT_NODE) {
+    return jqLite(element);
+  }
+}
+
+export function extractElementNode(element) {
+  if (!element[0]) return element;
+  for (let i = 0; i < element.length; i++) {
+    const elm = element[i];
+    if (elm.nodeType === Node.ELEMENT_NODE) {
+      return elm;
+    }
+  }
+}
+
+export function applyAnimationClassesFactory() {
+  return function (element, options) {
+    if (options.addClass) {
+      element[0].classList.add(options.addClass);
+      options.addClass = null;
+    }
+    if (options.removeClass) {
+      element[0].classList.remove(options.removeClass);
+      options.removeClass = null;
+    }
+  };
+}
+
+export function prepareAnimationOptions(options) {
+  options = options || {};
+  if (!options.$$prepared) {
+    let domOperation = options.domOperation || (() => {});
+    options.domOperation = function () {
+      options.$$domOperationFired = true;
+      domOperation();
+      domOperation = () => {};
+    };
+    options.$$prepared = true;
+  }
+  return options;
+}
+
+export function applyAnimationStyles(element, options) {
+  applyAnimationFromStyles(element, options);
+  applyAnimationToStyles(element, options);
+}
+
+export function applyAnimationFromStyles(element, options) {
+  if (options.from) {
+    //element.css(options.from);
+    options.from = null;
+  }
+}
+
+export function applyAnimationToStyles(element, options) {
+  if (options.to) {
+    //element.css(options.to);
+    options.to = null;
+  }
+}
+
+export function mergeAnimationDetails(element, oldAnimation, newAnimation) {
+  const target = oldAnimation.options || {};
+  const newOptions = newAnimation.options || {};
+
+  const toAdd = `${target.addClass || ""} ${newOptions.addClass || ""}`;
+  const toRemove = `${target.removeClass || ""} ${newOptions.removeClass || ""}`;
+  const classes = resolveElementClasses(element.attr("class"), toAdd, toRemove);
+
+  if (newOptions.preparationClasses) {
+    target.preparationClasses = concatWithSpace(
+      newOptions.preparationClasses,
+      target.preparationClasses,
+    );
+    delete newOptions.preparationClasses;
+  }
+
+  // noop is basically when there is no callback; otherwise something has been set
+  const realDomOperation =
+    target.domOperation !== (() => {}) ? target.domOperation : null;
+
+  extend(target, newOptions);
+
+  // TODO(matsko or sreeramu): proper fix is to maintain all animation callback in array and call at last,but now only leave has the callback so no issue with this.
+  if (realDomOperation) {
+    target.domOperation = realDomOperation;
+  }
+
+  if (classes.addClass) {
+    target.addClass = classes.addClass;
+  } else {
+    target.addClass = null;
+  }
+
+  if (classes.removeClass) {
+    target.removeClass = classes.removeClass;
+  } else {
+    target.removeClass = null;
+  }
+
+  oldAnimation.addClass = target.addClass;
+  oldAnimation.removeClass = target.removeClass;
+
+  return target;
+}
+
+export function resolveElementClasses(existing, toAdd, toRemove) {
+  const ADD_CLASS = 1;
+  const REMOVE_CLASS = -1;
+
+  const flags = {};
+  existing = splitClassesToLookup(existing);
+
+  toAdd = splitClassesToLookup(toAdd);
+  forEach(toAdd, (value, key) => {
+    flags[key] = ADD_CLASS;
+  });
+
+  toRemove = splitClassesToLookup(toRemove);
+  forEach(toRemove, (value, key) => {
+    flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
+  });
+
+  const classes = {
+    addClass: "",
+    removeClass: "",
+  };
+
+  forEach(flags, function (val, klass) {
+    var prop, allow;
+    if (val === ADD_CLASS) {
+      prop = "addClass";
+      allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];
+    } else if (val === REMOVE_CLASS) {
+      prop = "removeClass";
+      allow = existing[klass] || existing[klass + ADD_CLASS_SUFFIX];
+    }
+    if (allow) {
+      if (classes[prop].length) {
+        classes[prop] += " ";
+      }
+      classes[prop] += klass;
+    }
+  });
+
+  function splitClassesToLookup(classes) {
+    if (isString(classes)) {
+      classes = classes.split(" ");
+    }
+
+    const obj = {};
+    forEach(classes, (klass) => {
+      // sometimes the split leaves empty string values
+      // incase extra spaces were applied to the options
+      if (klass.length) {
+        obj[klass] = true;
+      }
+    });
+    return obj;
+  }
+
+  return classes;
+}
+
+export function getDomNode(element) {
+  return element instanceof jqLite ? element[0] : element;
+}
+
+export function applyGeneratedPreparationClasses(element, event, options) {
+  let classes = "";
+  if (event) {
+    classes = pendClasses(event, EVENT_CLASS_PREFIX, true);
+  }
+  if (options.addClass) {
+    classes = concatWithSpace(
+      classes,
+      pendClasses(options.addClass, ADD_CLASS_SUFFIX),
+    );
+  }
+  if (options.removeClass) {
+    classes = concatWithSpace(
+      classes,
+      pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX),
+    );
+  }
+  if (classes.length) {
+    options.preparationClasses = classes;
+    element[0].className += ` ${classes}`;
+  }
+}
+
+export function clearGeneratedClasses(element, options) {
+  if (options.preparationClasses) {
+    options.preparationClasses
+      .split(" ")
+      .forEach((cls) => element[0].classList.remove(cls));
+    options.preparationClasses = null;
+  }
+  if (options.activeClasses) {
+    options.activeClasses
+      .split(" ")
+      .forEach((cls) => element[0].classList.remove(cls));
+    options.activeClasses = null;
+  }
+}
+
+export function blockKeyframeAnimations(node, applyBlock) {
+  const value = applyBlock ? "paused" : "";
+  const key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
+  applyInlineStyle(node, [key, value]);
+  return [key, value];
+}
+
+export function applyInlineStyle(node, styleTuple) {
+  const prop = styleTuple[0];
+  const value = styleTuple[1];
+  node.style[prop] = value;
+}
+
+export function concatWithSpace(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return `${a} ${b}`;
+}
+
+export const helpers = {
+  blockTransitions(node, duration) {
+    // we use a negative delay value since it performs blocking
+    // yet it doesn't kill any existing transitions running on the
+    // same element which makes this safe for class-based animations
+    const value = duration ? `-${duration}s` : "";
+    applyInlineStyle(node, [TRANSITION_DELAY_PROP, value]);
+    return [TRANSITION_DELAY_PROP, value];
+  },
+};

package/src/constants.js

@@ -0,0 +1,20 @@
+export const VALID_CLASS = "ng-valid";
+export const INVALID_CLASS = "ng-invalid";
+export const PRISTINE_CLASS = "ng-pristine";
+export const DIRTY_CLASS = "ng-dirty";
+export const UNTOUCHED_CLASS = "ng-untouched";
+export const TOUCHED_CLASS = "ng-touched";
+export const EMPTY_CLASS = "ng-empty";
+export const NOT_EMPTY_CLASS = "ng-not-empty";
+
+export const PREFIX_REGEXP = /^((?:x|data)[:\-_])/i;
+export const SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
+
+export const ALIASED_ATTR = {
+  ngMinlength: "minlength",
+  ngMaxlength: "maxlength",
+  ngMin: "min",
+  ngMax: "max",
+  ngPattern: "pattern",
+  ngStep: "step",
+};