fix: Accordion showed ripple when user clicks on content, solves #12

MikeMitterer · Jul 30, 2015 · 307c2c5 · 307c2c5
1 parent 01581c1
commit 307c2c5
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 48 deletions.
diff --git a/example/_templates/default.html b/example/_templates/default.html
@@ -29,7 +29,7 @@
     <!--<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>-->
     <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
 
-    <!--<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">-->
+    <link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
     <link rel="stylesheet" href="prism-default.css">
     <link rel="stylesheet" href="demo.css">
     <link rel="stylesheet" href="styles.css">

diff --git a/lib/src/components/MaterialRipple.dart b/lib/src/components/MaterialRipple.dart
@@ -142,13 +142,28 @@ class MaterialRipple extends MdlComponent {
         //event.preventDefault();
         //event.stopPropagation();
 
+        bool _hasRipple(final dom.Element element) {
+            if(element is dom.HtmlElement == false) { return false; }
+
+            final dom.Element child = element.firstChild;
+            return element.classes.contains(_cssClasses.MDL_RIPPLE) ||
+            (child != null && child is dom.HtmlElement && child.classes.contains(_cssClasses.MDL_RIPPLE));
+        }
+
+        final bool hasRipple = _hasRipple(event.target);
+        if(!hasRipple) {
+            return;
+        }
+
         if (rippleElement.style.width == null && rippleElement.style.height == null) {
-            final dom.Rectangle rect = element.getBoundingClientRect();
+
+            final dom.Rectangle rect = bound;
             _boundHeight = rect.height;
             _boundWidth = rect.width;
             _rippleSize = (Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2).toInt();
             rippleElement.style.width = "${_rippleSize}px";
             rippleElement.style.height = "${_rippleSize}px";
+
         }
 
         rippleElement.classes.add(_cssClasses.IS_VISIBLE);
@@ -200,12 +215,16 @@ class MaterialRipple extends MdlComponent {
                 y = ((clientY - bound.top) as double).round();
             }
 
-            //
-            _updateDimension();
-            _setRippleXY(x, y);
-            _setRippleStyles(true);
 
-            dom.window.requestAnimationFrame(_animFrameHandler);
+            _logger.info("X $x Y $y ${bound} ${event.target} T ${hasRipple}");
+
+            if(hasRipple) {
+                _updateDimension();
+                _setRippleXY(x, y);
+                _setRippleStyles(true);
+
+                dom.window.requestAnimationFrame(_animFrameHandler);
+            }
         }
     }
 

diff --git a/site/web/images/logo-drawer.svg b/site/web/images/logo-drawer.svg
diff --git a/site/web/index.html b/site/web/index.html
@@ -29,7 +29,7 @@
       <div class="android-header mdl-layout__header mdl-layout__header--waterfall mdl-color--primary">
         <div class="mdl-layout__header-row">
           <span class="android-title mdl-layout-title">
-            <img class="logo" src="images/logo-drawer.png">
+            <img class="logo" src="images/logo-drawer.svg">
           </span>
           <!-- Add spacer, to align navigation to the right in desktop -->
           <div class="android-header-spacer mdl-layout-spacer"></div>
@@ -55,14 +55,14 @@
             <li class="mdl-menu__item">Android History</li>
           </ul>
           <span class="mobile-title mdl-layout-title">
-            <img class="logo" src="images/logo-drawer.png">
+            <img class="logo" src="images/logo-drawer.svg">
           </span>
         </div>
       </div>
 
       <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">
-          <img class="logo" src="images/logo-drawer.png">
+          <img class="logo" src="images/logo-drawer.svg">
         </span>
         <nav class="mdl-navigation">
           <a class="mdl-navigation__link" href="">Phones1</a>