ionic-framework
Version:
The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.
1,087 lines (1,057 loc) • 1.11 MB
JavaScript
System.register('ionic/components', ['./components/app/app', './components/app/id', './components/action-sheet/action-sheet', './components/alert/alert', './components/blur/blur', './components/button/button', './components/checkbox/checkbox', './components/content/content', './components/icon/icon', './components/item/item', './components/item/item-sliding', './components/menu/menu', './components/menu/menu-types', './components/menu/menu-toggle', './components/menu/menu-close', './components/text-input/text-input', './components/label/label', './components/list/list', './components/show-hide-when/show-hide-when', './components/modal/modal', './components/nav/nav', './components/nav/nav-controller', './components/nav/view-controller', './components/nav/nav-push', './components/nav/nav-router', './components/navbar/navbar', './components/overlay/overlay', './components/slides/slides', './components/radio/radio', './components/scroll/scroll', './components/scroll/pull-to-refresh', './components/searchbar/searchbar', './components/segment/segment', './components/tabs/tabs', './components/tabs/tab', './components/tap-click/tap-click', './components/toggle/toggle', './components/toolbar/toolbar'], function (_export) {
'use strict';
return {
setters: [function (_componentsAppApp) {
for (var _key in _componentsAppApp) {
if (_key !== 'default') _export(_key, _componentsAppApp[_key]);
}
}, function (_componentsAppId) {
for (var _key2 in _componentsAppId) {
if (_key2 !== 'default') _export(_key2, _componentsAppId[_key2]);
}
}, function (_componentsActionSheetActionSheet) {
for (var _key3 in _componentsActionSheetActionSheet) {
if (_key3 !== 'default') _export(_key3, _componentsActionSheetActionSheet[_key3]);
}
}, function (_componentsAlertAlert) {
for (var _key4 in _componentsAlertAlert) {
if (_key4 !== 'default') _export(_key4, _componentsAlertAlert[_key4]);
}
}, function (_componentsBlurBlur) {
for (var _key5 in _componentsBlurBlur) {
if (_key5 !== 'default') _export(_key5, _componentsBlurBlur[_key5]);
}
}, function (_componentsButtonButton) {
for (var _key6 in _componentsButtonButton) {
if (_key6 !== 'default') _export(_key6, _componentsButtonButton[_key6]);
}
}, function (_componentsCheckboxCheckbox) {
for (var _key7 in _componentsCheckboxCheckbox) {
if (_key7 !== 'default') _export(_key7, _componentsCheckboxCheckbox[_key7]);
}
}, function (_componentsContentContent) {
for (var _key8 in _componentsContentContent) {
if (_key8 !== 'default') _export(_key8, _componentsContentContent[_key8]);
}
}, function (_componentsIconIcon) {
for (var _key9 in _componentsIconIcon) {
if (_key9 !== 'default') _export(_key9, _componentsIconIcon[_key9]);
}
}, function (_componentsItemItem) {
for (var _key10 in _componentsItemItem) {
if (_key10 !== 'default') _export(_key10, _componentsItemItem[_key10]);
}
}, function (_componentsItemItemSliding) {
for (var _key11 in _componentsItemItemSliding) {
if (_key11 !== 'default') _export(_key11, _componentsItemItemSliding[_key11]);
}
}, function (_componentsMenuMenu) {
for (var _key12 in _componentsMenuMenu) {
if (_key12 !== 'default') _export(_key12, _componentsMenuMenu[_key12]);
}
}, function (_componentsMenuMenuTypes) {
for (var _key13 in _componentsMenuMenuTypes) {
if (_key13 !== 'default') _export(_key13, _componentsMenuMenuTypes[_key13]);
}
}, function (_componentsMenuMenuToggle) {
for (var _key14 in _componentsMenuMenuToggle) {
if (_key14 !== 'default') _export(_key14, _componentsMenuMenuToggle[_key14]);
}
}, function (_componentsMenuMenuClose) {
for (var _key15 in _componentsMenuMenuClose) {
if (_key15 !== 'default') _export(_key15, _componentsMenuMenuClose[_key15]);
}
}, function (_componentsTextInputTextInput) {
for (var _key16 in _componentsTextInputTextInput) {
if (_key16 !== 'default') _export(_key16, _componentsTextInputTextInput[_key16]);
}
}, function (_componentsLabelLabel) {
for (var _key17 in _componentsLabelLabel) {
if (_key17 !== 'default') _export(_key17, _componentsLabelLabel[_key17]);
}
}, function (_componentsListList) {
for (var _key18 in _componentsListList) {
if (_key18 !== 'default') _export(_key18, _componentsListList[_key18]);
}
}, function (_componentsShowHideWhenShowHideWhen) {
for (var _key19 in _componentsShowHideWhenShowHideWhen) {
if (_key19 !== 'default') _export(_key19, _componentsShowHideWhenShowHideWhen[_key19]);
}
}, function (_componentsModalModal) {
for (var _key20 in _componentsModalModal) {
if (_key20 !== 'default') _export(_key20, _componentsModalModal[_key20]);
}
}, function (_componentsNavNav) {
for (var _key21 in _componentsNavNav) {
if (_key21 !== 'default') _export(_key21, _componentsNavNav[_key21]);
}
}, function (_componentsNavNavController) {
for (var _key22 in _componentsNavNavController) {
if (_key22 !== 'default') _export(_key22, _componentsNavNavController[_key22]);
}
}, function (_componentsNavViewController) {
for (var _key23 in _componentsNavViewController) {
if (_key23 !== 'default') _export(_key23, _componentsNavViewController[_key23]);
}
}, function (_componentsNavNavPush) {
for (var _key24 in _componentsNavNavPush) {
if (_key24 !== 'default') _export(_key24, _componentsNavNavPush[_key24]);
}
}, function (_componentsNavNavRouter) {
for (var _key25 in _componentsNavNavRouter) {
if (_key25 !== 'default') _export(_key25, _componentsNavNavRouter[_key25]);
}
}, function (_componentsNavbarNavbar) {
for (var _key26 in _componentsNavbarNavbar) {
if (_key26 !== 'default') _export(_key26, _componentsNavbarNavbar[_key26]);
}
}, function (_componentsOverlayOverlay) {
for (var _key27 in _componentsOverlayOverlay) {
if (_key27 !== 'default') _export(_key27, _componentsOverlayOverlay[_key27]);
}
}, function (_componentsSlidesSlides) {
for (var _key28 in _componentsSlidesSlides) {
if (_key28 !== 'default') _export(_key28, _componentsSlidesSlides[_key28]);
}
}, function (_componentsRadioRadio) {
for (var _key29 in _componentsRadioRadio) {
if (_key29 !== 'default') _export(_key29, _componentsRadioRadio[_key29]);
}
}, function (_componentsScrollScroll) {
for (var _key30 in _componentsScrollScroll) {
if (_key30 !== 'default') _export(_key30, _componentsScrollScroll[_key30]);
}
}, function (_componentsScrollPullToRefresh) {
for (var _key31 in _componentsScrollPullToRefresh) {
if (_key31 !== 'default') _export(_key31, _componentsScrollPullToRefresh[_key31]);
}
}, function (_componentsSearchbarSearchbar) {
for (var _key32 in _componentsSearchbarSearchbar) {
if (_key32 !== 'default') _export(_key32, _componentsSearchbarSearchbar[_key32]);
}
}, function (_componentsSegmentSegment) {
for (var _key33 in _componentsSegmentSegment) {
if (_key33 !== 'default') _export(_key33, _componentsSegmentSegment[_key33]);
}
}, function (_componentsTabsTabs) {
for (var _key34 in _componentsTabsTabs) {
if (_key34 !== 'default') _export(_key34, _componentsTabsTabs[_key34]);
}
}, function (_componentsTabsTab) {
for (var _key35 in _componentsTabsTab) {
if (_key35 !== 'default') _export(_key35, _componentsTabsTab[_key35]);
}
}, function (_componentsTapClickTapClick) {
for (var _key36 in _componentsTapClickTapClick) {
if (_key36 !== 'default') _export(_key36, _componentsTapClickTapClick[_key36]);
}
}, function (_componentsToggleToggle) {
for (var _key37 in _componentsToggleToggle) {
if (_key37 !== 'default') _export(_key37, _componentsToggleToggle[_key37]);
}
}, function (_componentsToolbarToolbar) {
for (var _key38 in _componentsToolbarToolbar) {
if (_key38 !== 'default') _export(_key38, _componentsToolbarToolbar[_key38]);
}
}],
execute: function () {}
};
});
System.register('ionic/ionic', ['./config/modes', './platform/registry', './animations/builtins', './animations/ios-transition', './animations/md-transition', './config/bootstrap', './config/config', './config/directives', './decorators/config-component', './decorators/app', './decorators/page', './components', './platform/platform', './platform/storage', './util/click-block', './util/events', './util/keyboard', './animations/animation', './translation/translate', './translation/translate_pipe'], function (_export) {
'use strict';
return {
setters: [function (_configModes) {}, function (_platformRegistry) {}, function (_animationsBuiltins) {}, function (_animationsIosTransition) {}, function (_animationsMdTransition) {}, function (_configBootstrap) {
for (var _key in _configBootstrap) {
if (_key !== 'default') _export(_key, _configBootstrap[_key]);
}
}, function (_configConfig) {
for (var _key2 in _configConfig) {
if (_key2 !== 'default') _export(_key2, _configConfig[_key2]);
}
}, function (_configDirectives) {
for (var _key3 in _configDirectives) {
if (_key3 !== 'default') _export(_key3, _configDirectives[_key3]);
}
}, function (_decoratorsConfigComponent) {
for (var _key4 in _decoratorsConfigComponent) {
if (_key4 !== 'default') _export(_key4, _decoratorsConfigComponent[_key4]);
}
}, function (_decoratorsApp) {
for (var _key5 in _decoratorsApp) {
if (_key5 !== 'default') _export(_key5, _decoratorsApp[_key5]);
}
}, function (_decoratorsPage) {
for (var _key6 in _decoratorsPage) {
if (_key6 !== 'default') _export(_key6, _decoratorsPage[_key6]);
}
}, function (_components) {
for (var _key7 in _components) {
if (_key7 !== 'default') _export(_key7, _components[_key7]);
}
}, function (_platformPlatform) {
for (var _key8 in _platformPlatform) {
if (_key8 !== 'default') _export(_key8, _platformPlatform[_key8]);
}
}, function (_platformStorage) {
for (var _key9 in _platformStorage) {
if (_key9 !== 'default') _export(_key9, _platformStorage[_key9]);
}
}, function (_utilClickBlock) {
for (var _key10 in _utilClickBlock) {
if (_key10 !== 'default') _export(_key10, _utilClickBlock[_key10]);
}
}, function (_utilEvents) {
for (var _key11 in _utilEvents) {
if (_key11 !== 'default') _export(_key11, _utilEvents[_key11]);
}
}, function (_utilKeyboard) {
for (var _key12 in _utilKeyboard) {
if (_key12 !== 'default') _export(_key12, _utilKeyboard[_key12]);
}
}, function (_animationsAnimation) {
for (var _key13 in _animationsAnimation) {
if (_key13 !== 'default') _export(_key13, _animationsAnimation[_key13]);
}
}, function (_translationTranslate) {
for (var _key14 in _translationTranslate) {
if (_key14 !== 'default') _export(_key14, _translationTranslate[_key14]);
}
}, function (_translationTranslate_pipe) {
for (var _key15 in _translationTranslate_pipe) {
if (_key15 !== 'default') _export(_key15, _translationTranslate_pipe[_key15]);
}
}],
execute: function () {}
};
});
System.register('ionic/util', ['./util/dom', './util/util'], function (_export) {
'use strict';
var domUtil, dom;
return {
setters: [function (_utilDom) {
domUtil = _utilDom;
}, function (_utilUtil) {
for (var _key in _utilUtil) {
if (_key !== 'default') _export(_key, _utilUtil[_key]);
}
}],
execute: function () {
dom = domUtil;
_export('dom', dom);
}
};
});
System.register('ionic/animations/animation', ['../util/dom', '../util/util'], function (_export) {
/**
Animation Steps/Process
-----------------------
- Construct animation (doesn't start)
- Client play()'s animation, returns promise
- Add before classes to elements
- Remove before classes from elements
- Elements staged in "from" effect w/ inline styles
- Call onReady()
- Wait for RENDER_DELAY milliseconds (give browser time to render)
- Call onPlay()
- Run from/to animation on elements
- Animations finish async
- Set inline styles w/ the "to" effects on elements
- Add after classes to elements
- Remove after classes from elements
- Call onFinish()
- Resolve play()'s promise
**/
/**
* @private
**/
'use strict';
var CSS, rafFrames, extend, Animation, Animate, TRANSFORMS, ANIMATE_PROPERTIES, CUBIC_BEZIERS, EASING_FN, AnimationRegistry;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function insertEffects(effects, fromEffect, toEffect, easingConfig) {
easingConfig.opts = easingConfig.opts || {};
var increment = easingConfig.opts.increment || 0.04;
var easingFn = EASING_FN[easingConfig.name];
var pos = undefined,
tweenEffect = undefined,
addEffect = undefined,
property = undefined,
toProperty = undefined,
fromValue = undefined,
diffValue = undefined;
for (pos = increment; pos <= 1 - increment; pos += increment) {
tweenEffect = {};
addEffect = false;
for (property in toEffect) {
toProperty = toEffect[property];
if (toProperty.tween) {
fromValue = fromEffect[property].num;
diffValue = toProperty.num - fromValue;
tweenEffect[property] = {
value: roundValue(easingFn(pos, easingConfig.opts) * diffValue + fromValue) + toProperty.unit
};
addEffect = true;
}
}
if (addEffect) {
effects.push(convertProperties(tweenEffect));
}
}
}
function parseEffect(inputEffect) {
var val = undefined,
r = undefined,
num = undefined,
property = undefined;
var outputEffect = {};
for (property in inputEffect) {
val = inputEffect[property];
r = val.toString().match(/(^-?\d*\.?\d*)(.*)/);
num = parseFloat(r[1]);
outputEffect[property] = {
value: val,
num: num,
unit: r[0] != r[2] ? r[2] : '',
tween: !isNaN(num) && ANIMATE_PROPERTIES.indexOf(property) > -1
};
}
return outputEffect;
}
function convertProperties(inputEffect) {
var outputEffect = {};
var transforms = [];
var value = undefined,
property = undefined;
for (property in inputEffect) {
value = inputEffect[property].value;
if (TRANSFORMS.indexOf(property) > -1) {
transforms.push(property + '(' + value + ')');
} else {
outputEffect[property] = value;
}
}
if (transforms.length) {
transforms.push('translateZ(0px)');
outputEffect.transform = transforms.join(' ');
}
return outputEffect;
}
function inlineStyle(ele, effect) {
if (ele && effect) {
var transforms = [];
var value = undefined,
property = undefined;
for (property in effect) {
value = effect[property].value;
if (TRANSFORMS.indexOf(property) > -1) {
transforms.push(property + '(' + value + ')');
} else {
ele.style[property] = value;
}
}
if (transforms.length) {
transforms.push('translateZ(0px)');
ele.style[CSS.transform] = transforms.join(' ');
}
}
}
function roundValue(val) {
return Math.round(val * 10000) / 10000;
}
function parallel(tasks, done) {
var l = tasks.length;
if (!l) {
done && done();
return;
}
var completed = 0;
function taskCompleted() {
completed++;
if (completed === l) {
done && done();
}
}
for (var i = 0; i < l; i++) {
tasks[i](taskCompleted);
}
}
return {
setters: [function (_utilDom) {
CSS = _utilDom.CSS;
rafFrames = _utilDom.rafFrames;
}, function (_utilUtil) {
extend = _utilUtil.extend;
}],
execute: function () {
Animation = (function () {
function Animation(ele) {
var opts = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
_classCallCheck(this, Animation);
this.reset();
this._opts = extend({
renderDelay: 16
}, opts);
this.elements(ele);
if (!document.documentElement.animate) {
console.error('Web Animations polyfill missing');
}
}
/**
* @private
**/
_createClass(Animation, [{
key: 'reset',
value: function reset() {
this._el = [];
this._chld = [];
this._ani = [];
this._bfAdd = [];
this._bfSty = {};
this._bfRmv = [];
this._afAdd = [];
this._afRmv = [];
this._readys = [];
this._plays = [];
this._finishes = [];
}
}, {
key: 'elements',
value: function elements(ele) {
if (ele) {
if (typeof ele === 'string') {
// string query selector
ele = document.querySelectorAll(ele);
}
if (ele.length) {
// array of elements
for (var i = 0; i < ele.length; i++) {
this.addElement(ele[i]);
}
} else {
// single element
this.addElement(ele);
}
}
return this;
}
}, {
key: 'addElement',
value: function addElement(ele) {
// ensure only HTML Element nodes
if (ele) {
if (ele.nativeElement) {
// angular ElementRef
ele = ele.nativeElement;
}
if (ele.nodeType === 1) {
this._el.push(ele);
}
}
}
}, {
key: 'parent',
value: function parent(parentAnimation) {
this._parent = parentAnimation;
return this;
}
}, {
key: 'add',
value: function add(childAnimations) {
var _childAnimations = Array.isArray(childAnimations) ? childAnimations : arguments;
for (var i = 0; i < _childAnimations.length; i++) {
_childAnimations[i].parent(this);
this._chld.push(_childAnimations[i]);
}
return this;
}
}, {
key: 'duration',
value: function duration(value) {
if (arguments.length) {
this._duration = value;
return this;
}
return this._duration || this._parent && this._parent.duration() || 0;
}
}, {
key: 'clearDuration',
value: function clearDuration() {
this._duration = null;
for (var i = 0, l = this._chld.length; i < l; i++) {
this._chld[i].clearDuration();
}
}
}, {
key: 'easing',
value: function easing(name, opts) {
if (arguments.length) {
this._easing = {
name: name,
opts: opts
};
return this;
}
return this._easing || this._parent && this._parent.easing();
}
}, {
key: 'playbackRate',
value: function playbackRate(value) {
if (arguments.length) {
this._rate = value;
var i = undefined;
for (i = 0; i < this._chld.length; i++) {
this._chld[i].playbackRate(value);
}
for (i = 0; i < this._ani.length; i++) {
this._ani[i].playbackRate(value);
}
return this;
}
return typeof this._rate !== 'undefined' ? this._rate : this._parent && this._parent.playbackRate();
}
}, {
key: 'reverse',
value: function reverse() {
return this.playbackRate(-1);
}
}, {
key: 'forward',
value: function forward() {
return this.playbackRate(1);
}
}, {
key: 'from',
value: function from(property, value) {
if (!this._from) {
this._from = {};
}
this._from[property] = value;
return this;
}
}, {
key: 'to',
value: function to(property, value) {
if (!this._to) {
this._to = {};
}
this._to[property] = value;
return this;
}
}, {
key: 'fromTo',
value: function fromTo(property, from, to) {
return this.from(property, from).to(property, to);
}
}, {
key: 'fadeIn',
value: function fadeIn() {
return this.fromTo('opacity', 0.001, 1);
}
}, {
key: 'fadeOut',
value: function fadeOut() {
return this.fromTo('opacity', 0.999, 0);
}
}, {
key: 'play',
value: function play(done) {
var self = this;
// the actual play() method which may or may not start async
function beginPlay(beginPlayDone) {
var tasks = [];
self._chld.forEach(function (childAnimation) {
tasks.push(function (taskDone) {
childAnimation.play(taskDone);
});
});
self._ani.forEach(function (animation) {
tasks.push(function (taskDone) {
animation.play(taskDone);
});
});
parallel(tasks, beginPlayDone);
}
if (!self._parent) {
var kickoff = function kickoff() {
// synchronously call all onPlay()'s before play()
self._onPlay();
beginPlay(function () {
self._onFinish();
done();
});
};
// this is the top level animation and is in full control
// of when the async play() should actually kick off
// stage all animations and child animations at their starting point
self.stage();
var promise = undefined;
if (!done) {
promise = new Promise(function (res) {
done = res;
});
}
if (self._duration > 16 && self._opts.renderDelay > 0) {
// begin each animation when everything is rendered in their starting point
// give the browser some time to render everything in place before starting
rafFrames(self._opts.renderDelay / 16, kickoff);
} else {
// no need to render everything in there place before animating in
// just kick it off immediately to render them in their "to" locations
kickoff();
}
return promise;
}
// this is a child animation, it is told exactly when to
// start by the top level animation
beginPlay(done);
}
}, {
key: 'stage',
value: function stage() {
// before the RENDER_DELAY
// before the animations have started
if (!this._isStaged) {
this._isStaged = true;
var i = undefined,
p = undefined,
l = undefined,
j = undefined,
ele = undefined,
animation = undefined;
for (i = 0, l = this._chld.length; i < l; i++) {
this._chld[i].stage();
}
for (i = 0; i < this._el.length; i++) {
ele = this._el[i];
for (j = 0; j < this._bfAdd.length; j++) {
ele.classList.add(this._bfAdd[j]);
}
for (p in this._bfSty) {
ele.style[p] = this._bfSty[p];
}
for (j = 0; j < this._bfRmv.length; j++) {
ele.classList.remove(this._bfRmv[j]);
}
}
if (this._to) {
// only animate the elements if there are defined "to" effects
for (i = 0; i < this._el.length; i++) {
animation = new Animate(this._el[i], this._from, this._to, this.duration(), this.easing(), this.playbackRate());
if (animation.shouldAnimate) {
this._ani.push(animation);
}
}
}
for (i = 0; i < this._readys.length; i++) {
this._readys[i](this);
}
}
}
}, {
key: '_onPlay',
value: function _onPlay() {
// after the RENDER_DELAY
// before the animations have started
var i = undefined;
this._isFinished = false;
for (i = 0; i < this._chld.length; i++) {
this._chld[i]._onPlay();
}
for (i = 0; i < this._plays.length; i++) {
this._plays[i](this);
}
}
}, {
key: '_onFinish',
value: function _onFinish() {
// after the animations have finished
if (!this._isFinished && !this.isProgress) {
this._isFinished = true;
var i = undefined,
j = undefined,
ele = undefined;
for (i = 0; i < this._chld.length; i++) {
this._chld[i]._onFinish();
}
if (this.playbackRate() < 0) {
// reverse direction
for (i = 0; i < this._el.length; i++) {
ele = this._el[i];
for (j = 0; j < this._bfAdd.length; j++) {
ele.classList.remove(this._bfAdd[j]);
}
for (j = 0; j < this._bfRmv.length; j++) {
ele.classList.add(this._bfRmv[j]);
}
}
} else {
// normal direction
for (i = 0; i < this._el.length; i++) {
ele = this._el[i];
for (j = 0; j < this._afAdd.length; j++) {
ele.classList.add(this._afAdd[j]);
}
for (j = 0; j < this._afRmv.length; j++) {
ele.classList.remove(this._afRmv[j]);
}
}
}
for (i = 0; i < this._finishes.length; i++) {
this._finishes[i](this);
}
}
}
}, {
key: 'pause',
value: function pause() {
var i = undefined;
for (i = 0; i < this._chld.length; i++) {
this._chld[i].pause();
}
for (i = 0; i < this._ani.length; i++) {
this._ani[i].pause();
}
}
}, {
key: 'progressStart',
value: function progressStart() {
this.isProgress = true;
for (var i = 0; i < this._chld.length; i++) {
this._chld[i].progressStart();
}
this.duration(1000);
this.play();
this.pause();
}
}, {
key: 'progress',
value: function progress(value) {
value = Math.min(1, Math.max(0, value));
this.isProgress = true;
var i = undefined;
for (i = 0; i < this._chld.length; i++) {
this._chld[i].progress(value);
}
for (i = 0; i < this._ani.length; i++) {
this._ani[i].progress(value);
}
}
/**
* Get the current time of the first animation
* in the list. To get a specific time of an animation, call
* subAnimationInstance.getCurrentTime()
*/
}, {
key: 'getCurrentTime',
value: function getCurrentTime() {
if (this._chld.length > 0) {
return this._chld[0].getCurrentTime();
}
if (this._ani.length > 0) {
return this._ani[0].getCurrentTime();
}
return 0;
}
}, {
key: 'progressEnd',
value: function progressEnd(shouldComplete) {
var rate = arguments.length <= 1 || arguments[1] === undefined ? 3 : arguments[1];
var promises = [];
this.isProgress = false;
for (var i = 0; i < this._chld.length; i++) {
promises.push(this._chld[i].progressEnd(shouldComplete));
}
this._ani.forEach(function (animation) {
if (shouldComplete) {
animation.playbackRate(rate);
} else {
animation.playbackRate(rate * -1);
}
promises.push(new Promise(function (resolve) {
animation.play(resolve);
}));
});
return Promise.all(promises);
}
}, {
key: 'onReady',
value: function onReady(fn, clear) {
if (clear) {
this._readys = [];
}
this._readys.push(fn);
return this;
}
}, {
key: 'onPlay',
value: function onPlay(fn, clear) {
if (clear) {
this._plays = [];
}
this._plays.push(fn);
return this;
}
}, {
key: 'onFinish',
value: function onFinish(fn, clear) {
if (clear) {
this._finishes = [];
}
this._finishes.push(fn);
return this;
}
}, {
key: 'clone',
value: function clone() {
function copy(dest, src) {
// undo what stage() may have already done
extend(dest, src);
dest._isFinished = dest._isStaged = dest.isProgress = false;
dest._chld = [];
dest._ani = [];
for (var i = 0; i < src._chld.length; i++) {
dest.add(copy(new Animation(), src._chld[i]));
}
return dest;
}
return copy(new Animation(), this);
}
}, {
key: 'dispose',
value: function dispose(removeElement) {
var i = undefined;
for (i = 0; i < this._chld.length; i++) {
this._chld[i].dispose(removeElement);
}
for (i = 0; i < this._ani.length; i++) {
this._ani[i].dispose(removeElement);
}
if (removeElement) {
for (i = 0; i < this._el.length; i++) {
this._el[i].parentNode && this._el[i].parentNode.removeChild(this._el[i]);
}
}
this.reset();
}
/*
STATIC CLASSES
*/
}, {
key: 'before',
get: function get() {
var _this = this;
return {
addClass: function addClass(className) {
_this._bfAdd.push(className);
return _this;
},
removeClass: function removeClass(className) {
_this._bfRmv.push(className);
return _this;
},
setStyles: function setStyles(styles) {
_this._bfSty = styles;
return _this;
}
};
}
}, {
key: 'after',
get: function get() {
var _this2 = this;
return {
addClass: function addClass(className) {
_this2._afAdd.push(className);
return _this2;
},
removeClass: function removeClass(className) {
_this2._afRmv.push(className);
return _this2;
}
};
}
}], [{
key: 'create',
value: function create(element, name) {
var AnimationClass = AnimationRegistry[name];
if (!AnimationClass) {
// couldn't find an animation by the given name
// fallback to just the base Animation class
AnimationClass = Animation;
}
return new AnimationClass(element);
}
}, {
key: 'createTransition',
value: function createTransition(enteringView, leavingView) {
var opts = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
var TransitionClass = AnimationRegistry[opts.animation];
if (!TransitionClass) {
// didn't find a transition animation, default to ios-transition
TransitionClass = AnimationRegistry['ios-transition'];
}
return new TransitionClass(enteringView, leavingView, opts);
}
}, {
key: 'register',
value: function register(name, AnimationClass) {
AnimationRegistry[name] = AnimationClass;
}
}]);
return Animation;
})();
_export('Animation', Animation);
Animate = (function () {
function Animate(ele, fromEffect, toEffect, duration, easingConfig, playbackRate) {
_classCallCheck(this, Animate);
// https://w3c.github.io/web-animations/
// not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest
// and correct API methods under the hood, so really doesn't matter
if (!fromEffect) {
return console.error(ele.tagName, 'animation fromEffect required, toEffect:', toEffect);
}
this.toEffect = parseEffect(toEffect);
this.shouldAnimate = duration > 32;
if (!this.shouldAnimate) {
return inlineStyle(ele, this.toEffect);
}
this.ele = ele;
// stage where the element will start from
this.fromEffect = parseEffect(fromEffect);
inlineStyle(ele, this.fromEffect);
this.duration = duration;
this.rate = typeof playbackRate !== 'undefined' ? playbackRate : 1;
this.easing = easingConfig && easingConfig.name || 'linear';
this.effects = [convertProperties(this.fromEffect)];
if (this.easing in EASING_FN) {
insertEffects(this.effects, this.fromEffect, this.toEffect, easingConfig);
} else if (this.easing in CUBIC_BEZIERS) {
this.easing = 'cubic-bezier(' + CUBIC_BEZIERS[this.easing] + ')';
}
this.effects.push(convertProperties(this.toEffect));
}
_createClass(Animate, [{
key: 'play',
value: function play(done) {
var self = this;
if (self.ani) {
self.ani.play();
} else {
// https://developers.google.com/web/updates/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36
// https://w3c.github.io/web-animations/
// Future versions will use "new window.Animation" rather than "element.animate()"
self.ani = self.ele.animate(self.effects, {
duration: self.duration || 0,
easing: self.easing,
playbackRate: self.rate // old way of setting playbackRate, but still necessary
});
self.ani.playbackRate = self.rate;
}
self.ani.onfinish = function () {
// lock in where the element will stop at
// if the playbackRate is negative then it needs to return
// to its "from" effects
if (self.ani) {
inlineStyle(self.ele, self.rate < 0 ? self.fromEffect : self.toEffect);
self.ani = self.ani.onfinish = null;
done && done();
}
};
}
}, {
key: 'pause',
value: function pause() {
this.ani && this.ani.pause();
}
}, {
key: 'progress',
value: function progress(value) {
if (this.ani) {
// passed a number between 0 and 1
if (this.ani.playState !== 'paused') {
this.ani.pause();
}
// don't let the progress finish the animation
// leave it off JUST before it's finished
value = Math.min(0.999, Math.max(0.001, value));
this.ani.currentTime = this.duration * value;
}
}
}, {
key: 'getCurrentTime',
value: function getCurrentTime() {
return this.ani && this.ani.currentTime || 0;
}
}, {
key: 'playbackRate',
value: function playbackRate(value) {
this.rate = value;
if (this.ani) {
this.ani.playbackRate = value;
}
}
}, {
key: 'dispose',
value: function dispose() {
this.ele = this.ani = this.effects = this.toEffect = null;
}
}]);
return Animate;
})();
TRANSFORMS = ['translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'perspective'];
ANIMATE_PROPERTIES = TRANSFORMS.concat('opacity');
// Robert Penner's Easing Functions
// http://robertpenner.com/easing/
CUBIC_BEZIERS = {
// default browser suppored easing
// ease
// ease-in
// ease-out
// ease-in-out
// Cubic
'ease-in-cubic': '0.55,0.055,0.675,0.19',
'ease-out-cubic': '0.215,0.61,0.355,1',
'ease-in-Out-cubic': '0.645,0.045,0.355,1',
// Circ
'ease-in-circ': '0.6,0.04,0.98,0.335',
'ease-out-circ': '0.075,0.82,0.165,1',
'ease-in-out-circ': '0.785,0.135,0.15,0.86',
// Expo
'ease-in-expo': '0.95,0.05,0.795,0.035',
'ease-out-expo': '0.19,1,0.22,1',
'ease-in-out-expo': '1,0,0,1',
// Quad
'ease-in-quad': '0.55,0.085,0.68,0.53',
'ease-out-quad': '0.25,0.46,0.45,0.94',
'ease-in-out-quad': '0.455,0.03,0.515,0.955',
// Quart
'ease-in-quart': '0.895,0.03,0.685,0.22',
'ease-out-quart': '0.165,0.84,0.44,1',
'ease-in-out-quart': '0.77,0,0.175,1',
// Quint
'ease-in-quint': '0.755,0.05,0.855,0.06',
'ease-out-quint': '0.23,1,0.32,1',
'ease-in-out-quint': '0.86,0,0.07,1',
// Sine
'ease-in-sine': '0.47,0,0.745,0.715',
'ease-out-sine': '0.39,0.575,0.565,1',
'ease-in-out-sine': '0.445,0.05,0.55,0.95',
// Back
'ease-in-back': '0.6,-0.28,0.735,0.045',
'ease-out-back': '0.175,0.885,0.32,1.275',
'ease-in-out-back': '0.68,-0.55,0.265,1.55'
};
EASING_FN = {
'elastic': function elastic(pos) {
return -1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
},
'swing-from-to': function swingFromTo(pos, opts) {
var s = opts.s || 1.70158;
return (pos /= 0.5) < 1 ? 0.5 * (pos * pos * (((s *= 1.525) + 1) * pos - s)) : 0.5 * ((pos -= 2) * pos * (((s *= 1.525) + 1) * pos + s) + 2);
},
'swing-from': function swingFrom(pos, opts) {
var s = opts.s || 1.70158;
return pos * pos * ((s + 1) * pos - s);
},
'swing-to': function