From b672d0b0d48bb0fe05ca21a61fb2226b45de6f17 Mon Sep 17 00:00:00 2001
From: "Regis Gaughan, III" <regisgaughan@google.com>
Date: Tue, 23 Sep 2014 18:25:35 -0400
Subject: [PATCH] Paper tab listens for down event and explicitly fires ripple
 down/up.

---
 paper-tab.css  | 21 ++++++---------------
 paper-tab.html | 24 +++++++++++++++++++++---
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/paper-tab.css b/paper-tab.css
index 74ad3d1..c76c608 100644
--- a/paper-tab.css
+++ b/paper-tab.css
@@ -13,7 +13,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   overflow: hidden;
 }
 
-#tabContainer {
+#tabContainer,
+.tab-content,
+#ink {
   position: absolute;
   top: 0;
   right: 0;
@@ -24,7 +26,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 .tab-content {
   transition: opacity .1s cubic-bezier(0.4, 0.0, 1, 1), color .1s cubic-bezier(0.4, 0.0, 1, 1);
   cursor: default;
-  pointer-events: none;
+  z-index: 2;
 }
 
 :host(:not(.core-selected)) .tab-content {
@@ -32,18 +34,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 #ink {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  color: #ffff8d;
-}
-
-:host[noink] #ink {
-  pointer-events: none;
-}
-
-:host-context(paper-tabs[noink]) #ink {
+  z-index: 1;
   pointer-events: none;
+  color: #ffff8d;
 }
diff --git a/paper-tab.html b/paper-tab.html
index 8104a84..cf45a0f 100644
--- a/paper-tab.html
+++ b/paper-tab.html
@@ -39,9 +39,9 @@
 
   <link rel="stylesheet" href="paper-tab.css">
   
-  <div id="tabContainer" center-justified center horizontal layout>
+  <div id="tabContainer">
   
-    <div class="tab-content"><content></content></div>
+    <div class="tab-content" center-justified center horizontal layout><content></content></div>
     <paper-ripple id="ink" initialOpacity="0.95" opacityDecayVelocity="0.98"></paper-ripple>
     
   </div>
@@ -58,7 +58,25 @@
      * @type boolean
      * @default false
      */
-    noink: false
+    noink: false,
+
+    eventDelegates: {
+      down: 'downAction'
+    },
+
+    /**
+     * Intercept the down action on the button and explicitly pass to the ripple
+     * @param {Event} e The down event containing, at least, an x & y property
+     */
+    downAction: function(e) {
+      if (!this.noink && !this.parentElement.noink) {
+        var ripple = this.shadowRoot.querySelector('paper-ripple');
+        if (ripple) {
+          ripple.downAction(e);
+          ripple.upAction();
+        }
+      }
+    }
     
   });