angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
426 lines (354 loc) • 12.8 kB
JavaScript
if (angular.version.minor >= 4) {
angular.module('material.core.animate', []);
} else {
(function() {
"use strict";
var forEach = angular.forEach;
var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance);
var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition';
var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation';
var PREFIX = WEBKIT ? '-webkit-' : '';
var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend';
var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend';
var $$ForceReflowFactory = ['$document', function($document) {
return function() {
return $document[0].body.clientWidth + 1;
};
}];
var $$rAFMutexFactory = ['$$rAF', function($$rAF) {
return function() {
var passed = false;
$$rAF(function() {
passed = true;
});
return function(fn) {
passed ? fn() : $$rAF(fn);
};
};
}];
var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {
var INITIAL_STATE = 0;
var DONE_PENDING_STATE = 1;
var DONE_COMPLETE_STATE = 2;
function AnimateRunner(host) {
this.setHost(host);
this._doneCallbacks = [];
this._runInAnimationFrame = $$rAFMutex();
this._state = 0;
}
AnimateRunner.prototype = {
setHost: function(host) {
this.host = host || {};
},
done: function(fn) {
if (this._state === DONE_COMPLETE_STATE) {
fn();
} else {
this._doneCallbacks.push(fn);
}
},
progress: angular.noop,
getPromise: function() {
if (!this.promise) {
var self = this;
this.promise = $q(function(resolve, reject) {
self.done(function(status) {
status === false ? reject() : resolve();
});
});
}
return this.promise;
},
then: function(resolveHandler, rejectHandler) {
return this.getPromise().then(resolveHandler, rejectHandler);
},
'catch': function(handler) {
return this.getPromise()['catch'](handler);
},
'finally': function(handler) {
return this.getPromise()['finally'](handler);
},
pause: function() {
if (this.host.pause) {
this.host.pause();
}
},
resume: function() {
if (this.host.resume) {
this.host.resume();
}
},
end: function() {
if (this.host.end) {
this.host.end();
}
this._resolve(true);
},
cancel: function() {
if (this.host.cancel) {
this.host.cancel();
}
this._resolve(false);
},
complete: function(response) {
var self = this;
if (self._state === INITIAL_STATE) {
self._state = DONE_PENDING_STATE;
self._runInAnimationFrame(function() {
self._resolve(response);
});
}
},
_resolve: function(response) {
if (this._state !== DONE_COMPLETE_STATE) {
forEach(this._doneCallbacks, function(fn) {
fn(response);
});
this._doneCallbacks.length = 0;
this._state = DONE_COMPLETE_STATE;
}
}
};
// Polyfill AnimateRunner.all which is used by input animations
AnimateRunner.all = function(runners, callback) {
var count = 0;
var status = true;
forEach(runners, function(runner) {
runner.done(onProgress);
});
function onProgress(response) {
status = status && response;
if (++count === runners.length) {
callback(status);
}
}
};
return AnimateRunner;
}];
angular
.module('material.core.animate', [])
.factory('$$forceReflow', $$ForceReflowFactory)
.factory('$$AnimateRunner', $$AnimateRunnerFactory)
.factory('$$rAFMutex', $$rAFMutexFactory)
.factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate',
function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) {
function init(element, options) {
var temporaryStyles = [];
var node = getDomNode(element);
var areAnimationsAllowed = node && $animate.enabled();
var hasCompleteStyles = false;
var hasCompleteClasses = false;
if (areAnimationsAllowed) {
if (options.transitionStyle) {
temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]);
}
if (options.keyframeStyle) {
temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]);
}
if (options.delay) {
temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']);
}
if (options.duration) {
temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']);
}
hasCompleteStyles = options.keyframeStyle ||
(options.to && (options.duration > 0 || options.transitionStyle));
hasCompleteClasses = !!options.addClass || !!options.removeClass;
blockTransition(element, true);
}
var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses);
applyAnimationFromStyles(element, options);
var animationClosed = false;
var events, eventFn;
return {
close: $window.close,
start: function() {
var runner = new $$AnimateRunner();
waitUntilQuiet(function() {
blockTransition(element, false);
if (!hasCompleteAnimation) {
return close();
}
forEach(temporaryStyles, function(entry) {
var key = entry[0];
var value = entry[1];
node.style[camelCase(key)] = value;
});
applyClasses(element, options);
var timings = computeTimings(element);
if (timings.duration === 0) {
return close();
}
var moreStyles = [];
if (options.easing) {
if (timings.transitionDuration) {
moreStyles.push([PREFIX + 'transition-timing-function', options.easing]);
}
if (timings.animationDuration) {
moreStyles.push([PREFIX + 'animation-timing-function', options.easing]);
}
}
if (options.delay && timings.animationDelay) {
moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']);
}
if (options.duration && timings.animationDuration) {
moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']);
}
forEach(moreStyles, function(entry) {
var key = entry[0];
var value = entry[1];
node.style[camelCase(key)] = value;
temporaryStyles.push(entry);
});
var maxDelay = timings.delay;
var maxDelayTime = maxDelay * 1000;
var maxDuration = timings.duration;
var maxDurationTime = maxDuration * 1000;
var startTime = Date.now();
events = [];
if (timings.transitionDuration) {
events.push(TRANSITION_EVENTS);
}
if (timings.animationDuration) {
events.push(ANIMATION_EVENTS);
}
events = events.join(' ');
eventFn = function(event) {
event.stopPropagation();
var ev = event.originalEvent || event;
var timeStamp = ev.timeStamp || Date.now();
var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));
if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
close();
}
};
element.on(events, eventFn);
applyAnimationToStyles(element, options);
$timeout(close, maxDelayTime + maxDurationTime * 1.5, false);
});
return runner;
function close() {
if (animationClosed) return;
animationClosed = true;
if (events && eventFn) {
element.off(events, eventFn);
}
applyClasses(element, options);
applyAnimationStyles(element, options);
forEach(temporaryStyles, function(entry) {
node.style[camelCase(entry[0])] = '';
});
runner.complete(true);
return runner;
}
}
};
}
function applyClasses(element, options) {
if (options.addClass) {
$$jqLite.addClass(element, options.addClass);
options.addClass = null;
}
if (options.removeClass) {
$$jqLite.removeClass(element, options.removeClass);
options.removeClass = null;
}
}
function computeTimings(element) {
var node = getDomNode(element);
var cs = $window.getComputedStyle(node);
var tdr = parseMaxTime(cs[prop('transitionDuration')]);
var adr = parseMaxTime(cs[prop('animationDuration')]);
var tdy = parseMaxTime(cs[prop('transitionDelay')]);
var ady = parseMaxTime(cs[prop('animationDelay')]);
adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1);
var duration = Math.max(adr, tdr);
var delay = Math.max(ady, tdy);
return {
duration: duration,
delay: delay,
animationDuration: adr,
transitionDuration: tdr,
animationDelay: ady,
transitionDelay: tdy
};
function prop(key) {
return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1)
: key;
}
}
function parseMaxTime(str) {
var maxValue = 0;
var values = (str || "").split(/\s*,\s*/);
forEach(values, function(value) {
// it's always safe to consider only second values and omit `ms` values since
// getComputedStyle will always handle the conversion for us
if (value.charAt(value.length - 1) == 's') {
value = value.substring(0, value.length - 1);
}
value = parseFloat(value) || 0;
maxValue = maxValue ? Math.max(value, maxValue) : value;
});
return maxValue;
}
var cancelLastRAFRequest;
var rafWaitQueue = [];
function waitUntilQuiet(callback) {
if (cancelLastRAFRequest) {
cancelLastRAFRequest(); //cancels the request
}
rafWaitQueue.push(callback);
cancelLastRAFRequest = $$rAF(function() {
cancelLastRAFRequest = null;
// DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
// PLEASE EXAMINE THE `$$forceReflow` service to understand why.
var pageWidth = $$forceReflow();
// we use a for loop to ensure that if the queue is changed
// during this looping then it will consider new requests
for (var i = 0; i < rafWaitQueue.length; i++) {
rafWaitQueue[i](pageWidth);
}
rafWaitQueue.length = 0;
});
}
function applyAnimationStyles(element, options) {
applyAnimationFromStyles(element, options);
applyAnimationToStyles(element, options);
}
function applyAnimationFromStyles(element, options) {
if (options.from) {
element.css(options.from);
options.from = null;
}
}
function applyAnimationToStyles(element, options) {
if (options.to) {
element.css(options.to);
options.to = null;
}
}
function getDomNode(element) {
for (var i = 0; i < element.length; i++) {
if (element[i].nodeType === 1) return element[i];
}
}
function blockTransition(element, bool) {
var node = getDomNode(element);
var key = camelCase(PREFIX + 'transition-delay');
node.style[key] = bool ? '-9999s' : '';
}
return init;
}]);
/**
* Older browsers [FF31] expect camelCase
* property keys.
* e.g.
* animation-duration --> animationDuration
*/
function camelCase(str) {
return str.replace(/-[a-z]/g, function(str) {
return str.charAt(1).toUpperCase();
});
}
})();
}