Index: polymer_1.2.3/bower_components/paper-ripple/paper-ripple.html |
diff --git a/polymer_1.0.4/bower_components/paper-ripple/paper-ripple.html b/polymer_1.2.3/bower_components/paper-ripple/paper-ripple.html |
similarity index 78% |
copy from polymer_1.0.4/bower_components/paper-ripple/paper-ripple.html |
copy to polymer_1.2.3/bower_components/paper-ripple/paper-ripple.html |
index 08d3da1ac003c4210f7143fa07f263aa007b10b3..d7652211958473cb9e4208ddd86062e3f6576dd2 100644 |
--- a/polymer_1.0.4/bower_components/paper-ripple/paper-ripple.html |
+++ b/polymer_1.2.3/bower_components/paper-ripple/paper-ripple.html |
@@ -11,19 +11,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> |
<!-- |
+Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction) |
+ |
`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> |
+ <div style="position:relative"> |
+ <paper-ripple></paper-ripple> |
+ </div> |
+ |
+Note, it's important that the parent container of the ripple be relative position, otherwise |
+the ripple will emanate outside of the desired container. |
`paper-ripple` listens to "mousedown" and "mouseup" 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. |
+important if you call `downAction()` you will have to make sure to call |
+`upAction()` so that `paper-ripple` would end the animation loop. |
Example: |
@@ -77,72 +84,74 @@ Apply `circle` class to make the rippling effect within a circle. |
@param {Object} detail.node The animated node |
--> |
- <style> |
- :host { |
- display: block; |
- position: absolute; |
- border-radius: inherit; |
- overflow: hidden; |
- top: 0; |
- left: 0; |
- right: 0; |
- bottom: 0; |
- } |
- |
- :host([animating]) { |
- /* This resolves a rendering issue in Chrome (as of 40) where the |
- ripple is not properly clipped by its parent (which may have |
- rounded corners). See: http://jsbin.com/temexa/4 |
+ <template> |
+ <style> |
+ :host { |
+ display: block; |
+ position: absolute; |
+ border-radius: inherit; |
+ overflow: hidden; |
+ top: 0; |
+ left: 0; |
+ right: 0; |
+ bottom: 0; |
+ |
+ /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers, |
+ * creating a node (with a position:absolute) in the middle of an event |
+ * handler "interrupts" that event handler (which happens when the |
+ * ripple is created on demand) */ |
+ pointer-events: none; |
+ } |
- Note: We only apply this style conditionally. Otherwise, the browser |
- will create a new compositing layer for every ripple element on the |
- page, and that would be bad. */ |
- -webkit-transform: translate(0, 0); |
- transform: translate3d(0, 0, 0); |
- } |
+ :host([animating]) { |
+ /* This resolves a rendering issue in Chrome (as of 40) where the |
+ ripple is not properly clipped by its parent (which may have |
+ rounded corners). See: http://jsbin.com/temexa/4 |
- :host([noink]) { |
- pointer-events: none; |
- } |
+ Note: We only apply this style conditionally. Otherwise, the browser |
+ will create a new compositing layer for every ripple element on the |
+ page, and that would be bad. */ |
+ -webkit-transform: translate(0, 0); |
+ transform: translate3d(0, 0, 0); |
+ } |
- #background, |
- #waves, |
- .wave-container, |
- .wave { |
- pointer-events: none; |
- position: absolute; |
- top: 0; |
- left: 0; |
- width: 100%; |
- height: 100%; |
- } |
+ #background, |
+ #waves, |
+ .wave-container, |
+ .wave { |
+ pointer-events: none; |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ width: 100%; |
+ height: 100%; |
+ } |
- #background, |
- .wave { |
- opacity: 0; |
- } |
+ #background, |
+ .wave { |
+ opacity: 0; |
+ } |
- #waves, |
- .wave { |
- overflow: hidden; |
- } |
+ #waves, |
+ .wave { |
+ overflow: hidden; |
+ } |
- .wave-container, |
- .wave { |
- border-radius: 50%; |
- } |
+ .wave-container, |
+ .wave { |
+ border-radius: 50%; |
+ } |
- :host(.circle) #background, |
- :host(.circle) #waves { |
- border-radius: 50%; |
- } |
+ :host(.circle) #background, |
+ :host(.circle) #waves { |
+ border-radius: 50%; |
+ } |
- :host(.circle) .wave-container { |
- overflow: hidden; |
- } |
+ :host(.circle) .wave-container { |
+ overflow: hidden; |
+ } |
+ </style> |
- </style> |
- <template> |
<div id="background"></div> |
<div id="waves"></div> |
</template> |
@@ -150,20 +159,6 @@ Apply `circle` class to make the rippling effect within a circle. |
<script> |
(function() { |
var Utility = { |
- cssColorWithAlpha: function(cssColor, alpha) { |
- var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); |
- |
- if (typeof alpha == 'undefined') { |
- alpha = 1; |
- } |
- |
- if (!parts) { |
- return 'rgba(255, 255, 255, ' + alpha + ')'; |
- } |
- |
- return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')'; |
- }, |
- |
distance: function(x1, y1, x2, y2) { |
var xDelta = (x1 - x2); |
var yDelta = (y1 - y2); |
@@ -171,13 +166,8 @@ Apply `circle` class to make the rippling effect within a circle. |
return Math.sqrt(xDelta * xDelta + yDelta * yDelta); |
}, |
- now: (function() { |
- if (window.performance && window.performance.now) { |
- return window.performance.now.bind(window.performance); |
- } |
- |
- return Date.now; |
- })() |
+ now: window.performance && window.performance.now ? |
+ window.performance.now.bind(window.performance) : Date.now |
}; |
/** |
@@ -545,6 +535,17 @@ Apply `circle` class to make the rippling effect within a circle. |
observer: '_holdDownChanged' |
}, |
+ /** |
+ * If true, the ripple will not generate a ripple effect |
+ * via pointer interaction. |
+ * Calling ripple's imperative api like `simulatedRipple` will |
+ * still generate the ripple effect. |
+ */ |
+ noink: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
_animating: { |
type: Boolean |
}, |
@@ -577,12 +578,17 @@ Apply `circle` class to make the rippling effect within a circle. |
}, |
attached: function() { |
- this.listen(this.target, 'up', 'upAction'); |
- this.listen(this.target, 'down', 'downAction'); |
+ // Set up a11yKeysBehavior to listen to key events on the target, |
+ // so that space and enter activate the ripple even if the target doesn't |
+ // handle key events. The key handlers deal with `noink` themselves. |
+ this.keyEventTarget = this.target; |
+ this.listen(this.target, 'up', 'uiUpAction'); |
+ this.listen(this.target, 'down', 'uiDownAction'); |
+ }, |
- if (!this.target.hasAttribute('noink')) { |
- this.keyEventTarget = this.target; |
- } |
+ detached: function() { |
+ this.unlisten(this.target, 'up', 'uiUpAction'); |
+ this.unlisten(this.target, 'down', 'uiDownAction'); |
}, |
get shouldKeepAnimating () { |
@@ -604,7 +610,22 @@ Apply `circle` class to make the rippling effect within a circle. |
}, 1); |
}, |
- /** @param {Event=} event */ |
+ /** |
+ * Provokes a ripple down effect via a UI event, |
+ * respecting the `noink` property. |
+ * @param {Event=} event |
+ */ |
+ uiDownAction: function(event) { |
+ if (!this.noink) { |
+ this.downAction(event); |
+ } |
+ }, |
+ |
+ /** |
+ * Provokes a ripple down effect via a UI event, |
+ * *not* respecting the `noink` property. |
+ * @param {Event=} event |
+ */ |
downAction: function(event) { |
if (this.holdDown && this.ripples.length > 0) { |
return; |
@@ -619,7 +640,22 @@ Apply `circle` class to make the rippling effect within a circle. |
} |
}, |
- /** @param {Event=} event */ |
+ /** |
+ * Provokes a ripple up effect via a UI event, |
+ * respecting the `noink` property. |
+ * @param {Event=} event |
+ */ |
+ uiUpAction: function(event) { |
+ if (!this.noink) { |
+ this.upAction(event); |
+ } |
+ }, |
+ |
+ /** |
+ * Provokes a ripple up effect via a UI event, |
+ * *not* respecting the `noink` property. |
+ * @param {Event=} event |
+ */ |
upAction: function(event) { |
if (this.holdDown) { |
return; |
@@ -692,20 +728,25 @@ Apply `circle` class to make the rippling effect within a circle. |
}, |
_onEnterKeydown: function() { |
- this.downAction(); |
- this.async(this.upAction, 1); |
+ this.uiDownAction(); |
+ this.async(this.uiUpAction, 1); |
}, |
_onSpaceKeydown: function() { |
- this.downAction(); |
+ this.uiDownAction(); |
}, |
_onSpaceKeyup: function() { |
- this.upAction(); |
+ this.uiUpAction(); |
}, |
- _holdDownChanged: function(holdDown) { |
- if (holdDown) { |
+ // note: holdDown does not respect noink since it can be a focus based |
+ // effect. |
+ _holdDownChanged: function(newVal, oldVal) { |
+ if (oldVal === undefined) { |
+ return; |
+ } |
+ if (newVal) { |
this.downAction(); |
} else { |
this.upAction(); |