(js/css) updates for the new packages

This commit is contained in:
Ludovic Marcotte
2015-08-31 11:08:41 -04:00
parent 89206f3705
commit 233b9c0613
19 changed files with 906 additions and 670 deletions
+170 -93
View File
@@ -1,5 +1,5 @@
/**
* @license AngularJS v1.4.4
* @license AngularJS v1.4.5
* (c) 2010-2015 Google, Inc. http://angularjs.org
* License: MIT
*/
@@ -379,6 +379,55 @@ function $$BodyProvider() {
}];
}
var $$rAFSchedulerFactory = ['$$rAF', function($$rAF) {
var queue, cancelFn;
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();
}
queue = scheduler.queue = [];
/* waitUntilQuiet does two things:
* 1. It will run the FINAL `fn` value only when an uncancelled 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 = function(fn) {
if (cancelFn) cancelFn();
cancelFn = $$rAF(function() {
cancelFn = null;
fn();
nextTick();
});
};
return scheduler;
function nextTick() {
if (!queue.length) return;
var items = queue.shift();
for (var i = 0; i < items.length; i++) {
items[i]();
}
if (!cancelFn) {
$$rAF(function() {
if (!cancelFn) nextTick();
});
}
}
}];
var $$AnimateChildrenDirective = [function() {
return function(scope, element, attrs) {
var val = attrs.ngAnimateChildren;
@@ -393,6 +442,8 @@ var $$AnimateChildrenDirective = [function() {
};
}];
var ANIMATE_TIMER_KEY = '$$animateCss';
/**
* @ngdoc service
* @name $animateCss
@@ -719,8 +770,10 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
var gcsLookup = createLocalCacheLookup();
var gcsStaggerLookup = createLocalCacheLookup();
this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout', '$$forceReflow', '$sniffer', '$$rAF',
function($window, $$jqLite, $$AnimateRunner, $timeout, $$forceReflow, $sniffer, $$rAF) {
this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout',
'$$forceReflow', '$sniffer', '$$rAFScheduler', '$animate',
function($window, $$jqLite, $$AnimateRunner, $timeout,
$$forceReflow, $sniffer, $$rAFScheduler, $animate) {
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
@@ -780,12 +833,8 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
var cancelLastRAFRequest;
var rafWaitQueue = [];
function waitUntilQuiet(callback) {
if (cancelLastRAFRequest) {
cancelLastRAFRequest(); //cancels the request
}
rafWaitQueue.push(callback);
cancelLastRAFRequest = $$rAF(function() {
cancelLastRAFRequest = null;
$$rAFScheduler.waitUntilQuiet(function() {
gcsLookup.flush();
gcsStaggerLookup.flush();
@@ -802,8 +851,6 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
});
}
return init;
function computeTimings(node, className, cacheKey) {
var timings = computeCachedCssStyles(node, className, cacheKey, DETECT_CSS_PROPERTIES);
var aD = timings.animationDelay;
@@ -818,9 +865,11 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
return timings;
}
function init(element, options) {
return function init(element, options) {
var node = getDomNode(element);
if (!node || !node.parentNode) {
if (!node
|| !node.parentNode
|| !$animate.enabled()) {
return closeAndReturnNoopAnimator();
}
@@ -876,7 +925,6 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
// there actually is a detected transition or keyframe animation
if (options.applyClassesEarly && addRemoveClassName.length) {
applyAnimationClasses(element, options);
addRemoveClassName = '';
}
var preparationClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
@@ -991,6 +1039,18 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
return closeAndReturnNoopAnimator();
}
if (options.delay != null) {
var delayStyle = parseFloat(options.delay);
if (flags.applyTransitionDelay) {
temporaryStyles.push(getCssDelayStyle(delayStyle));
}
if (flags.applyAnimationDelay) {
temporaryStyles.push(getCssDelayStyle(delayStyle, true));
}
}
// we need to recalculate the delay value since we used a pre-emptive negative
// delay value and the delay value is required for the final event checking. This
// property will ensure that this will happen after the RAF phase has passed.
@@ -1105,6 +1165,8 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
cancel: cancelFn
});
// should flush the cache animation
waitUntilQuiet(noop);
close();
return {
@@ -1202,27 +1264,16 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
flags.hasAnimations = timings.animationDuration > 0;
}
if (flags.applyTransitionDelay || flags.applyAnimationDelay) {
if (flags.applyAnimationDelay) {
relativeDelay = typeof options.delay !== "boolean" && truthyTimingValue(options.delay)
? parseFloat(options.delay)
: relativeDelay;
maxDelay = Math.max(relativeDelay, 0);
var delayStyle;
if (flags.applyTransitionDelay) {
timings.transitionDelay = relativeDelay;
delayStyle = getCssDelayStyle(relativeDelay);
temporaryStyles.push(delayStyle);
node.style[delayStyle[0]] = delayStyle[1];
}
if (flags.applyAnimationDelay) {
timings.animationDelay = relativeDelay;
delayStyle = getCssDelayStyle(relativeDelay, true);
temporaryStyles.push(delayStyle);
node.style[delayStyle[0]] = delayStyle[1];
}
timings.animationDelay = relativeDelay;
delayStyle = getCssDelayStyle(relativeDelay, true);
temporaryStyles.push(delayStyle);
node.style[delayStyle[0]] = delayStyle[1];
}
maxDelayTime = maxDelay * ONE_SECOND;
@@ -1251,17 +1302,47 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
}
startTime = Date.now();
element.on(events.join(' '), onAnimationProgress);
$timeout(onAnimationExpired, maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime, false);
var timerTime = maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime;
var endTime = startTime + timerTime;
var animationsData = element.data(ANIMATE_TIMER_KEY) || [];
var setupFallbackTimer = true;
if (animationsData.length) {
var currentTimerData = animationsData[0];
setupFallbackTimer = endTime > currentTimerData.expectedEndTime;
if (setupFallbackTimer) {
$timeout.cancel(currentTimerData.timer);
} else {
animationsData.push(close);
}
}
if (setupFallbackTimer) {
var timer = $timeout(onAnimationExpired, timerTime, false);
animationsData[0] = {
timer: timer,
expectedEndTime: endTime
};
animationsData.push(close);
element.data(ANIMATE_TIMER_KEY, animationsData);
}
element.on(events.join(' '), onAnimationProgress);
applyAnimationToStyles(element, options);
}
function onAnimationExpired() {
// although an expired animation is a failed animation, getting to
// this outcome is very easy if the CSS code screws up. Therefore we
// should still continue normally as if the animation completed correctly.
close();
var animationsData = element.data(ANIMATE_TIMER_KEY);
// this will be false in the event that the element was
// removed from the DOM (via a leave animation or something
// similar)
if (animationsData) {
for (var i = 1; i < animationsData.length; i++) {
animationsData[i]();
}
element.removeData(ANIMATE_TIMER_KEY);
}
}
function onAnimationProgress(event) {
@@ -1288,7 +1369,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
}
}
}
}
};
}];
}];
@@ -1314,13 +1395,13 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
return function initDriverFn(animationDetails, onBeforeClassesAppliedCb) {
return function initDriverFn(animationDetails) {
return animationDetails.from && animationDetails.to
? prepareFromToAnchorAnimation(animationDetails.from,
animationDetails.to,
animationDetails.classes,
animationDetails.anchors)
: prepareRegularAnimation(animationDetails, onBeforeClassesAppliedCb);
: prepareRegularAnimation(animationDetails);
};
function filterCssClasses(classes) {
@@ -1516,21 +1597,14 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
};
}
function prepareRegularAnimation(animationDetails, onBeforeClassesAppliedCb) {
function prepareRegularAnimation(animationDetails) {
var element = animationDetails.element;
var options = animationDetails.options || {};
// since the ng-EVENT, class-ADD and class-REMOVE classes are applied inside
// of the animateQueue pre and postDigest stages then there is no need to add
// then them here as well.
options.$$skipPreparationClasses = true;
// during the pre/post digest stages inside of animateQueue we also performed
// the blocking (transition:-9999s) so there is no point in doing that again.
options.skipBlocking = true;
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
@@ -1540,11 +1614,6 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
}
}
// we apply the classes right away since the pre-digest took care of the
// preparation classes.
onBeforeClassesAppliedCb(element);
applyAnimationClasses(element, options);
// 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.
@@ -1568,8 +1637,8 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
// by the time...
var $$AnimateJsProvider = ['$animateProvider', function($animateProvider) {
this.$get = ['$injector', '$$AnimateRunner', '$$rAFMutex', '$$jqLite',
function($injector, $$AnimateRunner, $$rAFMutex, $$jqLite) {
this.$get = ['$injector', '$$AnimateRunner', '$$jqLite',
function($injector, $$AnimateRunner, $$jqLite) {
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
// $animateJs(element, 'enter');
@@ -2264,9 +2333,6 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
return runner;
}
applyGeneratedPreparationClasses(element, isStructural ? event : null, options);
blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
// the counter keeps track of cancelled animations
var counter = (existingAnimation.counter || 0) + 1;
newAnimation.counter = counter;
@@ -2325,10 +2391,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
: animationDetails.event;
markElementAnimationState(element, RUNNING_STATE);
var realRunner = $$animation(element, event, animationDetails.options, function(e) {
$$forceReflow();
blockTransitions(getDomNode(e), false);
});
var realRunner = $$animation(element, event, animationDetails.options);
realRunner.done(function(status) {
close(!status);
@@ -2473,19 +2536,34 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
}];
}];
var $$rAFMutexFactory = ['$$rAF', function($$rAF) {
var $$AnimateAsyncRunFactory = ['$$rAF', function($$rAF) {
var waitQueue = [];
function waitForTick(fn) {
waitQueue.push(fn);
if (waitQueue.length > 1) return;
$$rAF(function() {
for (var i = 0; i < waitQueue.length; i++) {
waitQueue[i]();
}
waitQueue = [];
});
}
return function() {
var passed = false;
$$rAF(function() {
waitForTick(function() {
passed = true;
});
return function(fn) {
passed ? fn() : $$rAF(fn);
return function(callback) {
passed ? callback() : waitForTick(callback);
};
};
}];
var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {
var $$AnimateRunnerFactory = ['$q', '$sniffer', '$$animateAsyncRun',
function($q, $sniffer, $$animateAsyncRun) {
var INITIAL_STATE = 0;
var DONE_PENDING_STATE = 1;
var DONE_COMPLETE_STATE = 2;
@@ -2530,7 +2608,7 @@ var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {
this.setHost(host);
this._doneCallbacks = [];
this._runInAnimationFrame = $$rAFMutex();
this._runInAnimationFrame = $$animateAsyncRun();
this._state = 0;
}
@@ -2642,8 +2720,8 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
return element.data(RUNNER_STORAGE_KEY);
}
this.$get = ['$$jqLite', '$rootScope', '$injector', '$$AnimateRunner', '$$HashMap',
function($$jqLite, $rootScope, $injector, $$AnimateRunner, $$HashMap) {
this.$get = ['$$jqLite', '$rootScope', '$injector', '$$AnimateRunner', '$$HashMap', '$$rAFScheduler',
function($$jqLite, $rootScope, $injector, $$AnimateRunner, $$HashMap, $$rAFScheduler) {
var animationQueue = [];
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
@@ -2711,11 +2789,11 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
if (remainingLevelEntries <= 0) {
remainingLevelEntries = nextLevelEntries;
nextLevelEntries = 0;
result = result.concat(row);
result.push(row);
row = [];
}
row.push(entry.fn);
forEach(entry.children, function(childEntry) {
entry.children.forEach(function(childEntry) {
nextLevelEntries++;
queue.push(childEntry);
});
@@ -2723,14 +2801,15 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
}
if (row.length) {
result = result.concat(row);
result.push(row);
}
return result;
}
}
// TODO(matsko): document the signature in a better way
return function(element, event, options, onBeforeClassesAppliedCb) {
return function(element, event, options) {
options = prepareAnimationOptions(options);
var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
@@ -2782,8 +2861,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
// the element was destroyed early on which removed the runner
// form its storage. This means we can't animate this element
// at all and it already has been closed due to destruction.
var elm = entry.element;
if (getRunner(elm) && getDomNode(elm).parentNode) {
if (getRunner(entry.element)) {
animations.push(entry);
} else {
entry.close();
@@ -2814,7 +2892,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
: animationEntry.element;
if (getRunner(targetElement)) {
var operation = invokeFirstDriver(animationEntry, onBeforeClassesAppliedCb);
var operation = invokeFirstDriver(animationEntry);
if (operation) {
startAnimationFn = operation.start;
}
@@ -2834,11 +2912,9 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
});
// we need to sort each of the animations in order of parent to child
// relationships. This ensures that the parent to child classes are
// applied at the right time.
forEach(sortAnimations(toBeSortedAnimations), function(triggerAnimation) {
triggerAnimation();
});
// relationships. This ensures that the child classes are applied at the
// right time.
$$rAFScheduler(sortAnimations(toBeSortedAnimations));
});
return runner;
@@ -2908,7 +2984,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
var lookupKey = from.animationID.toString();
if (!anchorGroups[lookupKey]) {
var group = anchorGroups[lookupKey] = {
// TODO(matsko): double-check this code
structural: true,
beforeStart: function() {
fromAnimation.beforeStart();
toAnimation.beforeStart();
@@ -2962,7 +3038,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
return matches.join(' ');
}
function invokeFirstDriver(animationDetails, onBeforeClassesAppliedCb) {
function invokeFirstDriver(animationDetails) {
// we loop in reverse order since the more general drivers (like CSS and JS)
// may attempt more elements, but custom drivers are more particular
for (var i = drivers.length - 1; i >= 0; i--) {
@@ -2970,7 +3046,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
if (!$injector.has(driverName)) continue; // TODO(matsko): remove this check
var factory = $injector.get(driverName);
var driver = factory(animationDetails, onBeforeClassesAppliedCb);
var driver = factory(animationDetails);
if (driver) {
return driver;
}
@@ -3026,7 +3102,8 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
/* global angularAnimateModule: true,
$$BodyProvider,
$$rAFMutexFactory,
$$AnimateAsyncRunFactory,
$$rAFSchedulerFactory,
$$AnimateChildrenDirective,
$$AnimateRunnerFactory,
$$AnimateQueueProvider,
@@ -3043,7 +3120,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
* @description
*
* The `ngAnimate` module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via
* callback hooks. Animations are not enabled by default, however, by including `ngAnimate` then the animation hooks are enabled for an Angular app.
* callback hooks. Animations are not enabled by default, however, by including `ngAnimate` the animation hooks are enabled for an Angular app.
*
* <div doc-module-components="ngAnimate"></div>
*
@@ -3076,7 +3153,7 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
* CSS-based animations with ngAnimate are unique since they require no JavaScript code at all. By using a CSS class that we reference between our HTML
* and CSS code we can create an animation that will be picked up by Angular when an the underlying directive performs an operation.
*
* The example below shows how an `enter` animation can be made possible on a element using `ng-if`:
* The example below shows how an `enter` animation can be made possible on an element using `ng-if`:
*
* ```html
* <div ng-if="bool" class="fade">
@@ -3211,8 +3288,8 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
* /&#42; this will have a 100ms delay between each successive leave animation &#42;/
* transition-delay: 0.1s;
*
* /&#42; in case the stagger doesn't work then the duration value
* must be set to 0 to avoid an accidental CSS inheritance &#42;/
* /&#42; As of 1.4.4, this must always be set: it signals ngAnimate
* to not accidentally inherit a delay property from another CSS class &#42;/
* transition-duration: 0s;
* }
* .my-animation.ng-enter.ng-enter-active {
@@ -3761,16 +3838,16 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
* @description
* The ngAnimate `$animate` service documentation is the same for the core `$animate` service.
*
* Click here {@link ng.$animate $animate to learn more about animations with `$animate`}.
* Click here {@link ng.$animate to learn more about animations with `$animate`}.
*/
angular.module('ngAnimate', [])
.provider('$$body', $$BodyProvider)
.directive('ngAnimateChildren', $$AnimateChildrenDirective)
.factory('$$rAFMutex', $$rAFMutexFactory)
.factory('$$rAFScheduler', $$rAFSchedulerFactory)
.factory('$$AnimateRunner', $$AnimateRunnerFactory)
.factory('$$animateAsyncRun', $$AnimateAsyncRunFactory)
.provider('$$animateQueue', $$AnimateQueueProvider)
.provider('$$animation', $$AnimationProvider)