From 5f8b0130cb631ddcf47e51038df61153b67d991a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 17:38:39 -0500 Subject: [PATCH] chore(TapClick): update TapClick to work w/ ionicBootstrap --- src/components/tap-click/activator.ts | 34 +++++++-------- src/components/tap-click/ripple.ts | 60 +++++++++++++-------------- src/components/tap-click/tap-click.ts | 7 ++-- src/config/bootstrap.ts | 3 ++ 4 files changed, 48 insertions(+), 56 deletions(-) diff --git a/src/components/tap-click/activator.ts b/src/components/tap-click/activator.ts index 7fadd82958..accff64c61 100644 --- a/src/components/tap-click/activator.ts +++ b/src/components/tap-click/activator.ts @@ -1,4 +1,4 @@ -import {rafFrames} from '../../util/dom'; +import {rafFrames, nativeTimeout} from '../../util/dom'; export class Activator { @@ -6,7 +6,7 @@ export class Activator { protected _queue: Array = []; protected _active: Array = []; - constructor(protected app, config, protected _zone) { + constructor(protected app, config) { this._css = config.get('activatedClass') || 'activated'; } @@ -20,29 +20,23 @@ export class Activator { // queue to have this element activated self._queue.push(activatableEle); - this._zone.runOutsideAngular(() => { - rafFrames(2, function() { - let activatableEle; - for (let i = 0; i < self._queue.length; i++) { - activatableEle = self._queue[i]; - if (activatableEle && activatableEle.parentNode) { - self._active.push(activatableEle); - activatableEle.classList.add(self._css); - } + rafFrames(2, function() { + let activatableEle; + for (let i = 0; i < self._queue.length; i++) { + activatableEle = self._queue[i]; + if (activatableEle && activatableEle.parentNode) { + self._active.push(activatableEle); + activatableEle.classList.add(self._css); } - self._queue = []; - }); + } + self._queue = []; }); } upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) { // the user was pressing down, then just let up - let self = this; - function activateUp() { - self.clearState(); - } - this._zone.runOutsideAngular(() => { - rafFrames(CLEAR_STATE_DEFERS, activateUp); + rafFrames(CLEAR_STATE_DEFERS, () => { + this.clearState(); }); } @@ -52,7 +46,7 @@ export class Activator { // the app is actively disabled, so don't bother deactivating anything. // this makes it easier on the GPU so it doesn't have to redraw any // buttons during a transition. This will retry in XX milliseconds. - setTimeout(() => { + nativeTimeout(() => { this.clearState(); }, 600); diff --git a/src/components/tap-click/ripple.ts b/src/components/tap-click/ripple.ts index f0a0f421f8..4e44f3f9f3 100644 --- a/src/components/tap-click/ripple.ts +++ b/src/components/tap-click/ripple.ts @@ -1,6 +1,5 @@ import {Activator} from './activator'; import {CSS, nativeRaf, rafFrames} from '../../util/dom'; -const win: any = window; /** @@ -8,8 +7,8 @@ const win: any = window; */ export class RippleActivator extends Activator { - constructor(app, config, zone) { - super(app, config, zone); + constructor(app, config) { + super(app, config); } downAction(ev, activatableEle, pointerX, pointerY) { @@ -21,42 +20,39 @@ export class RippleActivator extends Activator { // queue to have this element activated self._queue.push(activatableEle); - this._zone.runOutsideAngular(function() { - nativeRaf(function() { - var i; + nativeRaf(function() { + var i; - for (i = 0; i < self._queue.length; i++) { - var queuedEle = self._queue[i]; - if (queuedEle && queuedEle.parentNode) { - self._active.push(queuedEle); + for (i = 0; i < self._queue.length; i++) { + var queuedEle = self._queue[i]; + if (queuedEle && queuedEle.parentNode) { + self._active.push(queuedEle); - // DOM WRITE - queuedEle.classList.add(self._css); + // DOM WRITE + queuedEle.classList.add(self._css); - var j = queuedEle.childElementCount; - while (j--) { - var rippleEle: any = queuedEle.children[j]; - if (rippleEle.tagName === 'ION-BUTTON-EFFECT') { - // DOM WRITE - rippleEle.style.left = '-9999px'; - rippleEle.style.opacity = ''; - rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)'; - rippleEle.style[CSS.transition] = ''; + var j = queuedEle.childElementCount; + while (j--) { + var rippleEle: any = queuedEle.children[j]; + if (rippleEle.tagName === 'ION-BUTTON-EFFECT') { + // DOM WRITE + rippleEle.style.left = '-9999px'; + rippleEle.style.opacity = ''; + rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)'; + rippleEle.style[CSS.transition] = ''; - // DOM READ - var clientRect = activatableEle.getBoundingClientRect(); - rippleEle.$top = clientRect.top; - rippleEle.$left = clientRect.left; - rippleEle.$width = clientRect.width; - rippleEle.$height = clientRect.height; - break; - } + // DOM READ + var clientRect = activatableEle.getBoundingClientRect(); + rippleEle.$top = clientRect.top; + rippleEle.$left = clientRect.left; + rippleEle.$width = clientRect.width; + rippleEle.$height = clientRect.height; + break; } } } - self._queue = []; - }); - + } + self._queue = []; }); } diff --git a/src/components/tap-click/tap-click.ts b/src/components/tap-click/tap-click.ts index 056747748f..35df1e99b7 100644 --- a/src/components/tap-click/tap-click.ts +++ b/src/components/tap-click/tap-click.ts @@ -23,15 +23,15 @@ export class TapClick { constructor( config: Config, private app: App, - private zone: NgZone + zone: NgZone ) { let self = this; if (config.get('activator') === 'ripple') { - self.activator = new RippleActivator(app, config, zone); + self.activator = new RippleActivator(app, config); } else if (config.get('activator') === 'highlight') { - self.activator = new Activator(app, config, zone); + self.activator = new Activator(app, config); } self.usePolyfill = (config.get('tapPolyfill') === true); @@ -47,7 +47,6 @@ export class TapClick { addListener('mouseup', self.mouseUp.bind(self), true); }); - self.pointerMove = function(ev) { if ( hasPointerMoved(POINTER_MOVE_UNTIL_CANCEL, self.startCoord, pointerCoord(ev)) ) { self.pointerCancel(ev); diff --git a/src/config/bootstrap.ts b/src/config/bootstrap.ts index 3d79c87699..375fe61206 100644 --- a/src/config/bootstrap.ts +++ b/src/config/bootstrap.ts @@ -48,6 +48,9 @@ export function ionicPostBootstrap(ngComponentRef: ComponentRef): Component platform.setZone(ngComponentRef.injector.get(NgZone)); platform.prepareReady(); + // TODO: Use PLATFORM_INITIALIZER + ngComponentRef.injector.get(TapClick); + // TODO: Use Renderer ngComponentRef.location.nativeElement.classList.add('app-init');