Index: third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
diff --git a/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html b/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e48a3fedfa33f525ecbfd6b37c4ca89587a2c81a |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/paper-ripple/paper-ripple.html |
@@ -0,0 +1,90 @@ |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<!-- |
+`paper-ripple` provides a visual effect that other paper elements can |
+use to simulate a rippling effect emanating from the point of contact. The |
+effect can be visualized as a concentric circle with motion. |
+ |
+Example: |
+ |
+ <paper-ripple></paper-ripple> |
+ |
+`paper-ripple` listens to "down" and "up" events so it would display ripple |
+effect when touches on it. You can also defeat the default behavior and |
+manually route the down and up actions to the ripple element. Note that it is |
+important if you call downAction() you will have to make sure to call upAction() |
+so that `paper-ripple` would end the animation loop. |
+ |
+Example: |
+ |
+ <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
+ ... |
+ downAction: function(e) { |
+ this.$.ripple.downAction({x: e.x, y: e.y}); |
+ }, |
+ upAction: function(e) { |
+ this.$.ripple.upAction(); |
+ } |
+ |
+Styling ripple effect: |
+ |
+ Use CSS color property to style the ripple: |
+ |
+ paper-ripple { |
+ color: #4285f4; |
+ } |
+ |
+ Note that CSS color property is inherited so it is not required to set it on |
+ the `paper-ripple` element directly. |
+ |
+Apply `recenteringTouch` class to make the recentering rippling effect. |
+ |
+ <paper-ripple class="recenteringTouch"></paper-ripple> |
+ |
+Apply `circle` class to make the rippling effect within a circle. |
+ |
+ <paper-ripple class="circle"></paper-ripple> |
+ |
+@group Paper Elements |
+@element paper-ripple |
+@homepage github.io |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+ |
+<polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelocity" assetpath=""> |
+<template> |
+ |
+ <style> |
+ |
+ :host { |
+ display: block; |
+ position: relative; |
+ } |
+ |
+ #canvas { |
+ pointer-events: none; |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ width: 100%; |
+ height: 100%; |
+ } |
+ |
+ :host(.circle) #canvas { |
+ border-radius: 50%; |
+ } |
+ |
+ </style> |
+ |
+</template> |
+ |
+</polymer-element> |
+<script src="paper-ripple-extracted.js"></script> |