vendor/assets/javascripts/angular-animate.js in angularjs-rails-1.3.0 vs vendor/assets/javascripts/angular-animate.js in angularjs-rails-1.3.1

- old
+ new

@@ -1,7 +1,7 @@ /** - * @license AngularJS v1.3.0 + * @license AngularJS v1.3.1 * (c) 2010-2014 Google, Inc. http://angularjs.org * License: MIT */ (function(window, angular, undefined) {'use strict'; @@ -212,21 +212,45 @@ * * This workaround, however, does not apply to standard class-based transitions that are rendered * when a CSS class containing a transition is applied to an element: * * ```css + * /&#42; this works as expected &#42;/ * .fade { - * /&#42; this works as expected &#42;/ * transition:1s linear all; * opacity:0; * } * ``` * * Please keep this in mind when coding the CSS markup that will be used within class-based transitions. * Also, try not to mix the two class-based animation flavors together since the CSS code may become * overly complex. * + * + * ### Preventing Collisions With Third Party Libraries + * + * Some third-party frameworks place animation duration defaults across many element or className + * selectors in order to make their code small and reuseable. This can lead to issues with ngAnimate, which + * is expecting actual animations on these elements and has to wait for their completion. + * + * You can prevent this unwanted behavior by using a prefix on all your animation classes: + * + * ```css + * /&#42; prefixed with animate- &#42;/ + * .animate-fade-add.animate-fade-add-active { + * transition:1s linear all; + * opacity:0; + * } + * ``` + * + * You then configure `$animate` to enforce this prefix: + * + * ```js + * $animateProvider.classNamePrefix(/animate-/); + * ``` + * </div> + * * ### CSS Staggering Animations * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for * the animation. The style property expected within the stagger class can either be a **transition-delay** or an @@ -434,11 +458,11 @@ var NG_ANIMATE_CHILDREN = '$$ngAnimateChildren'; var NG_ANIMATE_CLASS_NAME = 'ng-animate'; var rootAnimateState = {running: true}; function extractElementNode(element) { - for(var i = 0; i < element.length; i++) { + for (var i = 0; i < element.length; i++) { var elm = element[i]; if (elm.nodeType == ELEMENT_NODE) { return elm; } } @@ -544,11 +568,11 @@ forEach((element.attr('class') || '').split(/\s+/), function(className) { hasClasses[className] = true; }); var toAdd = [], toRemove = []; - forEach(cache.classes, function(status, className) { + forEach((cache && cache.classes) || [], function(status, className) { var hasClass = hasClasses[className]; var matchingAnimation = lookup[className] || {}; // When addClass and removeClass is called then $animate will check to // see if addClass and removeClass cancel each other out. When there are @@ -590,11 +614,11 @@ //prior to the element being animated. if ($sniffer.transitions || $sniffer.animations) { matches.push($injector.get(selectors[''])); } - for(var i=0; i < classes.length; i++) { + for (var i=0; i < classes.length; i++) { var klass = classes[i], selectorFactoryName = selectors[klass]; if (selectorFactoryName && !flagMap[klass]) { matches.push($injector.get(selectorFactoryName)); flagMap[klass] = true; @@ -669,14 +693,14 @@ beforeFn = afterFn; //when set as null then animation knows to skip this phase afterFn = null; } after.push({ - event : event, fn : afterFn + event: event, fn: afterFn }); before.push({ - event : event, fn : beforeFn + event: event, fn: beforeFn }); return true; } } @@ -701,11 +725,11 @@ //operation is called right away. DO NOT REFACTOR! forEach(animations, function(animation, index) { var progress = function() { afterAnimationComplete(index); }; - switch(animation.event) { + switch (animation.event) { case 'setClass': cancellations.push(animation.fn(element, classNameAdd, classNameRemove, progress, options)); break; case 'animate': cancellations.push(animation.fn(element, className, options.from, options.to, progress)); @@ -726,35 +750,35 @@ allCompleteFn(); } } return { - node : node, - event : animationEvent, - className : className, - isClassBased : isClassBased, - isSetClassOperation : isSetClassOperation, - applyStyles : function() { + node: node, + event: animationEvent, + className: className, + isClassBased: isClassBased, + isSetClassOperation: isSetClassOperation, + applyStyles: function() { if (options) { element.css(angular.extend(options.from || {}, options.to || {})); } }, - before : function(allCompleteFn) { + before: function(allCompleteFn) { beforeComplete = allCompleteFn; run(before, beforeCancel, function() { beforeComplete = noop; allCompleteFn(); }); }, - after : function(allCompleteFn) { + after: function(allCompleteFn) { afterComplete = allCompleteFn; run(after, afterCancel, function() { afterComplete = noop; allCompleteFn(); }); }, - cancel : function() { + cancel: function() { if (beforeCancel) { forEach(beforeCancel, function(cancelFn) { (cancelFn || noop)(true); }); beforeComplete(true); @@ -875,11 +899,11 @@ * @param {object} to a collection of CSS styles that the element will animate towards * @param {string=} className an optional CSS class that will be added to the element for the duration of the animation (the default class is `ng-inline-animate`) * @param {object=} options an optional collection of options that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - animate : function(element, from, to, className, options) { + animate: function(element, from, to, className, options) { className = className || 'ng-inline-animate'; options = parseAnimateOptions(options) || {}; options.from = to ? from : null; options.to = to ? to : from; @@ -919,11 +943,11 @@ * @param {DOMElement} parentElement the parent element of the element that will be the focus of the enter animation * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation * @param {object=} options an optional collection of options that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - enter : function(element, parentElement, afterElement, options) { + enter: function(element, parentElement, afterElement, options) { options = parseAnimateOptions(options); element = angular.element(element); parentElement = prepareElement(parentElement); afterElement = prepareElement(afterElement); @@ -963,11 +987,11 @@ * * @param {DOMElement} element the element that will be the focus of the leave animation * @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - leave : function(element, options) { + leave: function(element, options) { options = parseAnimateOptions(options); element = angular.element(element); cancelChildAnimations(element); classBasedAnimationsBlocked(element, true); @@ -1010,11 +1034,11 @@ * @param {DOMElement} parentElement the parentElement element of the element that will be the focus of the move animation * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation * @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - move : function(element, parentElement, afterElement, options) { + move: function(element, parentElement, afterElement, options) { options = parseAnimateOptions(options); element = angular.element(element); parentElement = prepareElement(parentElement); afterElement = prepareElement(afterElement); @@ -1054,11 +1078,11 @@ * @param {DOMElement} element the element that will be animated * @param {string} className the CSS class that will be added to the element and then animated * @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - addClass : function(element, className, options) { + addClass: function(element, className, options) { return this.setClass(element, className, [], options); }, /** * @ngdoc method @@ -1088,11 +1112,11 @@ * @param {DOMElement} element the element that will be animated * @param {string} className the CSS class that will be animated and then removed from the element * @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - removeClass : function(element, className, options) { + removeClass: function(element, className, options) { return this.setClass(element, [], className, options); }, /** * @@ -1120,11 +1144,11 @@ * @param {string} remove the CSS class which will be removed from the element * CSS classes have been set on the element * @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation * @return {Promise} the animation callback promise */ - setClass : function(element, add, remove, options) { + setClass: function(element, add, remove, options) { options = parseAnimateOptions(options); var STORAGE_KEY = '$$animateClasses'; element = angular.element(element); element = stripCommentsFromElement(element); @@ -1164,12 +1188,12 @@ //the digest cycle will combine all the animations into one function return cache.promise; } else { element.data(STORAGE_KEY, cache = { - classes : classes, - options : options + classes: classes, + options: options }); } return cache.promise = runAnimationPostDigest(function(done) { var parentElement = element.parent(); @@ -1203,11 +1227,11 @@ * @param {Promise} animationPromise The animation promise that is returned when an animation is started. * * @description * Cancels the provided animation. */ - cancel : function(promise) { + cancel: function(promise) { promise.$$cancelFn(); }, /** * @ngdoc method @@ -1220,12 +1244,12 @@ * * @description * Globally enables/disables animations. * */ - enabled : function(value, element) { - switch(arguments.length) { + enabled: function(value, element) { + switch (arguments.length) { case 2: if (value) { cleanup(element); } else { var data = element.data(NG_ANIMATE_STATE) || {}; @@ -1296,11 +1320,11 @@ if (!runner.isClassBased) { if (animationEvent == 'leave' && runningAnimations['ng-leave']) { skipAnimation = true; } else { //cancel all animations when a structural animation takes place - for(var klass in runningAnimations) { + for (var klass in runningAnimations) { animationsToCancel.push(runningAnimations[klass]); } ngAnimateState = {}; cleanup(element, true); } @@ -1372,14 +1396,14 @@ var localAnimationCount = globalAnimationCounter++; totalActiveAnimations++; runningAnimations[className] = runner; element.data(NG_ANIMATE_STATE, { - last : runner, - active : runningAnimations, - index : localAnimationCount, - totalActive : totalActiveAnimations + last: runner, + active: runningAnimations, + index: localAnimationCount, + totalActive: totalActiveAnimations }); //first we run the before animations and when all of those are complete //then we perform the DOM operation and run the next set of animations fireBeforeCallbackAsync(); @@ -1403,12 +1427,12 @@ function fireDOMCallback(animationPhase) { var eventName = '$animate:' + animationPhase; if (elementEvents && elementEvents[eventName] && elementEvents[eventName].length > 0) { $$asyncCallback(function() { element.triggerHandler(eventName, { - event : animationEvent, - className : className + event: animationEvent, + className: className }); }); } } @@ -1550,11 +1574,11 @@ parentRunningAnimation = parentRunningAnimation || state.running || (state.last && !state.last.isClassBased); } - while(parentElement = parentElement.parent()); + while (parentElement = parentElement.parent()); return !hasParent || (!allowChildAnimations && parentRunningAnimation); } }]); @@ -1697,11 +1721,11 @@ } animationDuration = Math.max(aDuration, animationDuration); } }); data = { - total : 0, + total: 0, transitionDelay: transitionDelay, transitionDuration: transitionDuration, animationDelay: animationDelay, animationDuration: animationDuration }; @@ -1770,16 +1794,16 @@ stagger.animationDelay > 0 && stagger.animationDuration === 0; var closeAnimationFns = formerData.closeAnimationFns || []; element.data(NG_ANIMATE_CSS_DATA_KEY, { - stagger : stagger, - cacheKey : eventCacheKey, - running : formerData.running || 0, - itemIndex : itemIndex, - blockTransition : blockTransition, - closeAnimationFns : closeAnimationFns + stagger: stagger, + cacheKey: eventCacheKey, + running: formerData.running || 0, + itemIndex: itemIndex, + blockTransition: blockTransition, + closeAnimationFns: closeAnimationFns }); var node = extractElementNode(element); if (blockTransition) { @@ -2017,33 +2041,33 @@ } } } return { - animate : function(element, className, from, to, animationCompleted, options) { + animate: function(element, className, from, to, animationCompleted, options) { options = options || {}; options.from = from; options.to = to; return animate('animate', element, className, animationCompleted, options); }, - enter : function(element, animationCompleted, options) { + enter: function(element, animationCompleted, options) { options = options || {}; return animate('enter', element, 'ng-enter', animationCompleted, options); }, - leave : function(element, animationCompleted, options) { + leave: function(element, animationCompleted, options) { options = options || {}; return animate('leave', element, 'ng-leave', animationCompleted, options); }, - move : function(element, animationCompleted, options) { + move: function(element, animationCompleted, options) { options = options || {}; return animate('move', element, 'ng-move', animationCompleted, options); }, - beforeSetClass : function(element, add, remove, animationCompleted, options) { + beforeSetClass: function(element, add, remove, animationCompleted, options) { options = options || {}; var className = suffixClasses(remove, '-remove') + ' ' + suffixClasses(add, '-add'); var cancellationMethod = animateBefore('setClass', element, className, options.from); if (cancellationMethod) { @@ -2052,45 +2076,45 @@ } clearCacheAfterReflow(); animationCompleted(); }, - beforeAddClass : function(element, className, animationCompleted, options) { + beforeAddClass: function(element, className, animationCompleted, options) { options = options || {}; var cancellationMethod = animateBefore('addClass', element, suffixClasses(className, '-add'), options.from); if (cancellationMethod) { afterReflow(element, animationCompleted); return cancellationMethod; } clearCacheAfterReflow(); animationCompleted(); }, - beforeRemoveClass : function(element, className, animationCompleted, options) { + beforeRemoveClass: function(element, className, animationCompleted, options) { options = options || {}; var cancellationMethod = animateBefore('removeClass', element, suffixClasses(className, '-remove'), options.from); if (cancellationMethod) { afterReflow(element, animationCompleted); return cancellationMethod; } clearCacheAfterReflow(); animationCompleted(); }, - setClass : function(element, add, remove, animationCompleted, options) { + setClass: function(element, add, remove, animationCompleted, options) { options = options || {}; remove = suffixClasses(remove, '-remove'); add = suffixClasses(add, '-add'); var className = remove + ' ' + add; return animateAfter('setClass', element, className, animationCompleted, options.to); }, - addClass : function(element, className, animationCompleted, options) { + addClass: function(element, className, animationCompleted, options) { options = options || {}; return animateAfter('addClass', element, suffixClasses(className, '-add'), animationCompleted, options.to); }, - removeClass : function(element, className, animationCompleted, options) { + removeClass: function(element, className, animationCompleted, options) { options = options || {}; return animateAfter('removeClass', element, suffixClasses(className, '-remove'), animationCompleted, options.to); } };