diff --git a/gulpfile.js b/gulpfile.js index e26de7631e..7f95412f68 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -147,7 +147,7 @@ gulp.task('bundle', ['bundle.cjs', 'bundle.system']); /** * Creates CommonJS bundle from Ionic source files. */ -gulp.task('bundle.cjs', ['transpile'], function(done){ +gulp.task('bundle.cjs', ['transpile', 'copy.libs'], function(done){ var config = require('./scripts/npm/ionic.webpack.config.js'); bundle({ config: config, stats: true }); diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts index f05b47935a..0afa78454c 100644 --- a/ionic/animations/animation.ts +++ b/ionic/animations/animation.ts @@ -171,7 +171,7 @@ export class Animation { }; if (typeof val === 'string' && val.indexOf(' ') < 0) { - let r = val.match(cssValueRegex); + let r = val.match(CSS_VALUE_REGEX); let num = parseFloat(r[1]); if (!isNaN(num)) { @@ -243,7 +243,7 @@ export class Animation { play(opts: PlayOptions = {}) { var self = this; var i: number; - var duration = isDefined(opts.duration) ? opts.duration : self._dur; + var duration: number = isDefined(opts.duration) ? opts.duration : self._dur; console.debug('Animation, play, duration', duration, 'easing', self._easing); @@ -252,12 +252,13 @@ export class Animation { // and that it has at least one FROM/TO effect // and that the FROM/TO effect can tween numeric values self.hasTween = false; + self.hasCompleted = false; // fire off all the onPlays for (i = 0; i < self._pFns.length; i++) { self._pFns[i](); } - this.isPlaying = true; + self.isPlaying = true; // this is the top level animation and is in full control // of when the async play() should actually kick off @@ -271,7 +272,7 @@ export class Animation { self._before(); // ensure all past transition end events have been cleared - this._clearAsync(); + self._clearAsync(); if (duration > 30) { // this animation has a duration, so it should animate @@ -280,7 +281,8 @@ export class Animation { // set the FROM properties self._progress(0); - self._willChange(true); + // add the will-change or translateZ properties when applicable + self._willChg(true); // set the async TRANSITION END event // and run onFinishes when the transition ends @@ -316,7 +318,7 @@ export class Animation { // since there was no animation, it's done // fire off all the onFinishes - self._onFinish(true); + self._didFinish(true); } } @@ -349,7 +351,7 @@ export class Animation { // since there was no animation, it's done // fire off all the onFinishes - self._onFinish(false); + self._didFinish(false); } } @@ -357,27 +359,57 @@ export class Animation { var self = this; function onTransitionEnd(ev) { - console.debug('Animation async end,', (ev ? 'transitionEnd, ' + ev.target.nodeName + ', property: ' + ev.propertyName : 'fallback timeout')); + console.debug('Animation onTransitionEnd', ev.target.nodeName, ev.propertyName); // ensure transition end events and timeouts have been cleared self._clearAsync(); // set the after styles self._after(); - self._willChange(false); - self._onFinish(shouldComplete); + + // remove will change properties + self._willChg(false); + + // transition finished + self._didFinish(shouldComplete); + } + + function onTransitionFallback() { + console.debug('Animation onTransitionFallback'); + // oh noz! the transition end event didn't fire in time! + // instead the fallback timer when first + + // clear the other async end events from firing + self._tmr = 0; + self._clearAsync(); + + // too late to have a smooth animation, just finish it + self._setTrans(0, true); + + // ensure the ending progress step gets rendered + self._progress(1); + + // set the after styles + self._after(); + + // remove will change properties + self._willChg(false); + + // transition finished + self._didFinish(shouldComplete); } // set the TRANSITION END event on one of the transition elements self._unregTrans = transitionEnd(self._transEl(), onTransitionEnd); - // set a fallback timeout if the transition end event never fires - self._tmr = setTimeout(onTransitionEnd, duration + 300); + // set a fallback timeout if the transition end event never fires, or is too slow + // transition end fallback: (animation duration + XXms) + self._tmr = setTimeout(onTransitionFallback, duration + 400); } _clearAsync() { + this._unregTrans && this._unregTrans(); if (this._tmr) { - this._unregTrans && this._unregTrans(); clearTimeout(this._tmr); this._tmr = 0; } @@ -483,13 +515,13 @@ export class Animation { } } - _willChange(addWillChange: boolean) { + _willChg(addWillChange: boolean) { var i: number; var wc: string[]; var prop: string; for (i = 0; i < this._c.length; i++) { - this._c[i]._willChange(addWillChange); + this._c[i]._willChg(addWillChange); } if (this._wChg) { @@ -652,8 +684,8 @@ export class Animation { // the progress was already left off at the point that is finished // for example, the left menu was dragged all the way open already this._after(); - this._willChange(false); - this._onFinish(shouldComplete); + this._willChg(false); + this._didFinish(shouldComplete); } else { // the stepValue was left off at a point when it needs to finish transition still @@ -684,7 +716,7 @@ export class Animation { return this; } - _onFinish(hasCompleted: boolean) { + _didFinish(hasCompleted: boolean) { this.isPlaying = false; this.hasCompleted = hasCompleted; var i: number; @@ -790,6 +822,6 @@ const TRANSFORMS = { 'skewX':1, 'skewY':1, 'perspective':1 }; -const cssValueRegex = /(^-?\d*\.?\d*)(.*)/; +const CSS_VALUE_REGEX = /(^-?\d*\.?\d*)(.*)/; let AnimationRegistry = {}; diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index 3505766bf0..4774ec9fd3 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -125,7 +125,7 @@ export class Navbar extends ToolbarBase { private _bgRef: ElementRef; /** - * @private + * @input {boolean} whether the back button should be shown or not */ @Input() get hideBackButton(): boolean { diff --git a/ionic/config/config.ts b/ionic/config/config.ts index 7d1cb7ab94..d098fb6c70 100644 --- a/ionic/config/config.ts +++ b/ionic/config/config.ts @@ -317,10 +317,16 @@ export class Config { this.platform = platform; } + /** + * @private + */ static setModeConfig(mode, config) { modeConfigs[mode] = config; } + /** + * @private + */ static getModeConfig(mode) { return modeConfigs[mode] || null; } diff --git a/ionic/platform/storage/sql.ts b/ionic/platform/storage/sql.ts index c01bda6706..ea071b43c8 100644 --- a/ionic/platform/storage/sql.ts +++ b/ionic/platform/storage/sql.ts @@ -23,7 +23,7 @@ const win :any = window; * }); * * // Sql storage also exposes the full engine underneath - * storage.query('insert into projects(name, data) values('Cool Project', 'blah')'); + * storage.query('insert into projects(name, data) values("Cool Project", "blah")'); * storage.query('select * from projects').then((resp) => {}) * ``` * diff --git a/ionic/util/test/util.spec.ts b/ionic/util/test/util.spec.ts index fe314e63cc..040fad43df 100644 --- a/ionic/util/test/util.spec.ts +++ b/ionic/util/test/util.spec.ts @@ -1,4 +1,4 @@ -import * as util from '../../../ionic/util'; +import * as util from 'ionic-angular/util'; export function run() { describe('extend', function() { diff --git a/scripts/karma/system.config.js b/scripts/karma/system.config.js index f505af5f22..6c902ad8ea 100644 --- a/scripts/karma/system.config.js +++ b/scripts/karma/system.config.js @@ -1,6 +1,10 @@ System.config({ map: { - angular2: '/base/angular2', - ionic: '/base/ionic' + 'angular2': '/base/angular2' + }, + packages: { + 'ionic-angular': { + main: 'index' + } } }); \ No newline at end of file