| 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();
|
|
|