diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index e45b75a0db..cedb51345b 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -1,5 +1,7 @@ -import {Title} from 'angular2/angular2'; +import {Injectable, NgZone, Title} from 'angular2/angular2'; +import {Config} from '../../config/config'; +import {ClickBlock} from '../../util/click-block'; import {rafFrames} from '../../util/dom'; import {ScrollTo} from '../../animations/scroll-to'; @@ -8,10 +10,12 @@ import {ScrollTo} from '../../animations/scroll-to'; * Component registry service. For more information on registering * components see the [IdRef API reference](../id/IdRef/). */ +@Injectable() export class IonicApp { - constructor(config, clickBlock) { + constructor(config: Config, clickBlock: ClickBlock, zone: NgZone) { this._config = config; + this._zone = zone; this._titleSrv = new Title(); this._title = ''; this._disTime = 0; @@ -29,10 +33,12 @@ export class IonicApp { let self = this; if (val !== self._title) { self._title = val; - function setAppTitle() { - self._titleSrv.setTitle(self._title); - } - rafFrames(4, setAppTitle); + this._zone.runOutsideAngular(() => { + function setAppTitle() { + self._titleSrv.setTitle(self._title); + } + rafFrames(4, setAppTitle); + }); } } diff --git a/ionic/components/tap-click/activator.ts b/ionic/components/tap-click/activator.ts index bd8fef0c88..6864929e4b 100644 --- a/ionic/components/tap-click/activator.ts +++ b/ionic/components/tap-click/activator.ts @@ -3,8 +3,9 @@ import {raf, rafFrames} from '../../util/dom'; export class Activator { - constructor(app, config) { + constructor(app, config, zone) { this.app = app; + this.zone = zone; this.queue = []; this.active = []; this.clearStateDefers = 5; @@ -39,7 +40,9 @@ export class Activator { self.queue = []; } - rafFrames(2, activateCss); + this.zone.runOutsideAngular(() => { + rafFrames(2, activateCss); + }); return true; } @@ -50,7 +53,9 @@ export class Activator { function activateUp() { self.clearState(); } - rafFrames(self.clearStateDefers, activateUp); + this.zone.runOutsideAngular(() => { + rafFrames(self.clearStateDefers, activateUp); + }); } clearState() { diff --git a/ionic/components/tap-click/ripple.ts b/ionic/components/tap-click/ripple.ts index c8dde075e8..796538c1e9 100644 --- a/ionic/components/tap-click/ripple.ts +++ b/ionic/components/tap-click/ripple.ts @@ -18,11 +18,13 @@ export class RippleActivator extends Activator { // create a new ripple element this.expandSpeed = EXPAND_DOWN_PLAYBACK_RATE; - raf(() => { - let clientRect = activatableEle.getBoundingClientRect(); - + this.zone.runOutsideAngular(() => { raf(() => { - this.createRipple(activatableEle, pointerX, pointerY, clientRect); + let clientRect = activatableEle.getBoundingClientRect(); + + raf(() => { + this.createRipple(activatableEle, pointerX, pointerY, clientRect); + }); }); }); } @@ -83,8 +85,10 @@ export class RippleActivator extends Activator { this.expandSpeed = 1; - rafFrames(4, () => { - this.next(); + this.zone.runOutsideAngular(() => { + rafFrames(4, () => { + this.next(); + }); }); } diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts index fa6ace83e4..9ab71490dc 100644 --- a/ionic/components/tap-click/tap-click.ts +++ b/ionic/components/tap-click/tap-click.ts @@ -21,10 +21,10 @@ export class TapClick { this.lastActivated = 0; if (config.get('activator') == 'ripple') { - this.activator = new RippleActivator(app, config); + this.activator = new RippleActivator(app, config, zone); } else if (config.get('activator') == 'highlight') { - this.activator = new Activator(app, config); + this.activator = new Activator(app, config, zone); } this.usePolyfill = (config.get('tapPolyfill') === true); diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index 7085349533..e575f2ddc9 100644 --- a/ionic/config/bootstrap.ts +++ b/ionic/config/bootstrap.ts @@ -39,8 +39,6 @@ export function ionicProviders(args={}) { let clickBlock = new ClickBlock(config.get('clickBlock')); - let app = new IonicApp(config, clickBlock); - let events = new Events(); let featureDetect = new FeatureDetect(); @@ -51,7 +49,8 @@ export function ionicProviders(args={}) { platform.prepareReady(config); return [ - provide(IonicApp, {useValue: app}), + IonicApp, + provide(ClickBlock, {useValue: clickBlock}), provide(Config, {useValue: config}), provide(Platform, {useValue: platform}), provide(FeatureDetect, {useValue: featureDetect}), diff --git a/ionic/util/dom.ts b/ionic/util/dom.ts index 5ce0f87de6..12184b2ded 100644 --- a/ionic/util/dom.ts +++ b/ionic/util/dom.ts @@ -1,3 +1,4 @@ + const nativeRaf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; @@ -8,6 +9,7 @@ const nativeCancelRaf = window.cancelAnimationFrame || export function raf(callback) { //console.log('raf', callback.toString().replace(/\s/g, '').replace('function', '').substring(0, 50)); + //console.log('raf, isRootZone()', zone.isRootZone(), '$id', zone.$id); _raf(callback); } @@ -27,10 +29,6 @@ export const rafCancel = nativeRaf ? nativeCancelRaf : function(id) { return window.cancelTimeout(id); } -export function rafPromise() { - return new Promise(resolve => raf(resolve)); -} - export function rafFrames(framesToWait, callback) { framesToWait = Math.ceil(framesToWait);