From 1243fcda2cf10dbb186796a498ddd8bd0e2d93bb Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 24 Sep 2015 21:20:57 -0500
Subject: [PATCH] feat(ripple): list item md ripple

---
 ionic/components/item/item.scss         |  1 +
 ionic/components/item/modes/md.scss     |  6 ++++++
 ionic/components/tap-click/activator.ts | 19 ++++++++++++++++---
 ionic/components/tap-click/ripple.scss  |  4 ++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 6bcbe040fd..37668d4c78 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -15,6 +15,7 @@
   border: 0;
   min-height: 4.4rem;
   text-align: initial;
+  overflow: hidden;
 
   background-color: $list-background-color;
   color: $list-text-color;
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index d83645ac55..f036a2b1c6 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -189,3 +189,9 @@ $item-md-forward-icon-color:          $item-md-border-color !default;
   }
 
 }
+
+.item,
+a.item,
+button.item {
+  transition: background-color $button-md-transition-duration $button-md-animation-curve,
+}
diff --git a/ionic/components/tap-click/activator.ts b/ionic/components/tap-click/activator.ts
index eaaba385ff..0b6f4093a7 100644
--- a/ionic/components/tap-click/activator.ts
+++ b/ionic/components/tap-click/activator.ts
@@ -5,6 +5,7 @@ export class Activator {
 
   constructor(app, config) {
     this.app = app;
+    this.queue = [];
     this.active = [];
     this.clearStateTimeout = 180;
     this.clearAttempt = 0;
@@ -20,9 +21,20 @@ export class Activator {
     this.x = pointerX;
     this.y = pointerY;
 
-    // remember this is the active element
-    targetEle.classList.add(this.activatedClass);
-    this.active.push(targetEle);
+    // queue to have this element activated
+    this.queue.push(targetEle);
+
+    raf(() => {
+      let targetEle;
+      for (let i = 0; i < this.queue.length; i++) {
+        targetEle = this.queue[i];
+        if (targetEle && targetEle.parentNode) {
+          this.active.push(targetEle);
+          targetEle.classList.add(this.activatedClass);
+        }
+      }
+      this.queue = [];
+    });
   }
 
   upAction() {
@@ -54,6 +66,7 @@ export class Activator {
     for (let i = 0; i < this.active.length; i++) {
       this.active[i].classList.remove(this.activatedClass);
     }
+    this.queue = [];
     this.active = [];
   }
 
diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss
index 2f212411ec..06f9d84b35 100644
--- a/ionic/components/tap-click/ripple.scss
+++ b/ionic/components/tap-click/ripple.scss
@@ -18,3 +18,7 @@ md-ripple {
 
   transform: scale(0.001) translateZ(0);
 }
+
+.item > md-ripple {
+  z-index: 0;
+}