Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(63)

Unified Diff: polymer_1.2.3/bower_components/paper-ripple/paper-ripple.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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();
« no previous file with comments | « polymer_1.2.3/bower_components/paper-ripple/index.html ('k') | polymer_1.2.3/bower_components/paper-ripple/test/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698