chore(TapClick): update TapClick to work w/ ionicBootstrap

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<HTMLElement> = [];
   protected _active: Array<HTMLElement> = [];
 
-  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() {
-      rafFrames(2, function() {
+      let activatableEle;
-        let activatableEle;
+      for (let i = 0; i < self._queue.length; i++) {
-        for (let i = 0; i < self._queue.length; i++) {
+        activatableEle = self._queue[i];
-          activatableEle = self._queue[i];
+        if (activatableEle && activatableEle.parentNode) {
-          if (activatableEle && activatableEle.parentNode) {
+          self._active.push(activatableEle);
-            self._active.push(activatableEle);
+          activatableEle.classList.add(self._css);
-            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;
+    rafFrames(CLEAR_STATE_DEFERS, () => {
-    function activateUp() {
+      this.clearState();
-      self.clearState();
-    }
-    this._zone.runOutsideAngular(() => {
-      rafFrames(CLEAR_STATE_DEFERS, activateUp);
     });
   }
 
@@ -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);
 

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) {
+  constructor(app, config) {
-    super(app, config, zone);
+    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() {
-      nativeRaf(function() {
+      var i;
-        var i;
 
-        for (i = 0; i < self._queue.length; i++) {
+      for (i = 0; i < self._queue.length; i++) {
-          var queuedEle = self._queue[i];
+        var queuedEle = self._queue[i];
-          if (queuedEle && queuedEle.parentNode) {
+        if (queuedEle && queuedEle.parentNode) {
-            self._active.push(queuedEle);
+          self._active.push(queuedEle);
 
-            // DOM WRITE
+          // DOM WRITE
-            queuedEle.classList.add(self._css);
+          queuedEle.classList.add(self._css);
 
-            var j = queuedEle.childElementCount;
+          var j = queuedEle.childElementCount;
-            while (j--) {
+          while (j--) {
-              var rippleEle: any = queuedEle.children[j];
+            var rippleEle: any = queuedEle.children[j];
-              if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
+            if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
-                // DOM WRITE
+              // DOM WRITE
-                rippleEle.style.left = '-9999px';
+              rippleEle.style.left = '-9999px';
-                rippleEle.style.opacity = '';
+              rippleEle.style.opacity = '';
-                rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)';
+              rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)';
-                rippleEle.style[CSS.transition] = '';
+              rippleEle.style[CSS.transition] = '';
 
-                // DOM READ
+              // DOM READ
-                var clientRect = activatableEle.getBoundingClientRect();
+              var clientRect = activatableEle.getBoundingClientRect();
-                rippleEle.$top = clientRect.top;
+              rippleEle.$top = clientRect.top;
-                rippleEle.$left = clientRect.left;
+              rippleEle.$left = clientRect.left;
-                rippleEle.$width = clientRect.width;
+              rippleEle.$width = clientRect.width;
-                rippleEle.$height = clientRect.height;
+              rippleEle.$height = clientRect.height;
-                break;
+              break;
-              }
             }
           }
         }
-        self._queue = [];
+      }
-      });
+      self._queue = [];
-
     });
   }
 

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);

src/config/bootstrap.ts

@@ -48,6 +48,9 @@ export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>): 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');