fix(ripple): always remove the activated class

ionic-team · Sep 30, 2016 · d893441 · d893441
1 parent 9b65022
commit d893441
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 42 deletions.
diff --git a/src/components/tap-click/activator.ts b/src/components/tap-click/activator.ts
@@ -14,24 +14,23 @@ export class Activator {
 
   downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates) {
     // the user just pressed down
-    let self = this;
-    if (self.disableActivated(ev)) {
+    if (this.disableActivated(ev)) {
       return;
     }
 
     // queue to have this element activated
-    self._queue.push(activatableEle);
+    this._queue.push(activatableEle);
 
-    rafFrames(2, function() {
+    rafFrames(2, () => {
       let activatableEle: HTMLElement;
-      for (let i = 0; i < self._queue.length; i++) {
-        activatableEle = self._queue[i];
+      for (let i = 0; i < this._queue.length; i++) {
+        activatableEle = this._queue[i];
         if (activatableEle && activatableEle.parentNode) {
-          self._active.push(activatableEle);
-          activatableEle.classList.add(self._css);
+          this._active.push(activatableEle);
+          activatableEle.classList.add(this._css);
         }
       }
-      self._queue = [];
+      this._queue = [];
     });
   }
 
@@ -60,24 +59,29 @@ export class Activator {
 
   deactivate() {
     // remove the active class from all active elements
-    let self = this;
-    self._queue = [];
+    this._queue = [];
 
-    rafFrames(2, function() {
-      for (var i = 0; i < self._active.length; i++) {
-        self._active[i].classList.remove(self._css);
+    rafFrames(2, () => {
+      for (var i = 0; i < this._active.length; i++) {
+        this._active[i].classList.remove(this._css);
       }
-      self._active = [];
+      this._active = [];
     });
   }
 
   disableActivated(ev: any) {
-    if (ev.defaultPrevented) return true;
+    if (ev.defaultPrevented) {
+      return true;
+    }
 
     let targetEle = ev.target;
-    for (let x = 0; x < 4; x++) {
-      if (!targetEle) break;
-      if (targetEle.hasAttribute('disable-activated')) return true;
+    for (let i = 0; i < 4; i++) {
+      if (!targetEle) {
+        break;
+      }
+      if (targetEle.hasAttribute('disable-activated')) {
+        return true;
+      }
       targetEle = targetEle.parentElement;
     }
     return false;

diff --git a/src/components/tap-click/ripple.ts b/src/components/tap-click/ripple.ts
@@ -48,15 +48,14 @@ export class RippleActivator extends Activator {
   }
 
   upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates) {
-    if (hasPointerMoved(6, startCoord, pointerCoord(ev))) {
-      return;
-    }
-    let i = activatableEle.childElementCount;
-    while (i--) {
-      var rippleEle: any = activatableEle.children[i];
-      if (rippleEle.classList.contains('button-effect')) {
-        this.startRippleEffect(rippleEle, activatableEle, startCoord);
-        break;
+    if (!hasPointerMoved(6, startCoord, pointerCoord(ev))) {
+      let i = activatableEle.childElementCount;
+      while (i--) {
+        var rippleEle: any = activatableEle.children[i];
+        if (rippleEle.classList.contains('button-effect')) {
+          this.startRippleEffect(rippleEle, activatableEle, startCoord);
+          break;
+        }
       }
     }
 

diff --git a/src/components/tap-click/tap-click.ts b/src/components/tap-click/tap-click.ts
@@ -25,31 +25,29 @@ export class TapClick {
     private app: App,
     zone: NgZone
   ) {
-    let self = this;
-
     if (config.get('activator') === 'ripple') {
-      self.activator = new RippleActivator(app, config);
+      this.activator = new RippleActivator(app, config);
 
     } else if (config.get('activator') === 'highlight') {
-      self.activator = new Activator(app, config);
+      this.activator = new Activator(app, config);
     }
 
-    self.usePolyfill = (config.get('tapPolyfill') === true);
+    this.usePolyfill = (config.get('tapPolyfill') === true);
 
     zone.runOutsideAngular(() => {
-      addListener('click', self.click.bind(self), true);
+      addListener('click', this.click.bind(this), true);
 
-      addListener('touchstart', self.touchStart.bind(self));
-      addListener('touchend', self.touchEnd.bind(self));
-      addListener('touchcancel', self.pointerCancel.bind(self));
+      addListener('touchstart', this.touchStart.bind(this));
+      addListener('touchend', this.touchEnd.bind(this));
+      addListener('touchcancel', this.pointerCancel.bind(this));
 
-      addListener('mousedown', self.mouseDown.bind(self), true);
-      addListener('mouseup', self.mouseUp.bind(self), true);
+      addListener('mousedown', this.mouseDown.bind(this), true);
+      addListener('mouseup', this.mouseUp.bind(this), true);
     });
 
-    self.pointerMove = function(ev: UIEvent) {
-      if ( hasPointerMoved(POINTER_MOVE_UNTIL_CANCEL, self.startCoord, pointerCoord(ev)) ) {
-        self.pointerCancel(ev);
+    this.pointerMove = (ev: UIEvent) => {
+      if ( hasPointerMoved(POINTER_MOVE_UNTIL_CANCEL, this.startCoord, pointerCoord(ev)) ) {
+        this.pointerCancel(ev);
       }
     };
   }