| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| 10 | 10 |
| 11 <!-- | 11 <!-- |
| 12 Material design: [Surface reaction](https://www.google.com/design/spec/animation
/responsive-interaction.html#responsive-interaction-surface-reaction) | 12 Material design: [Surface reaction](https://www.google.com/design/spec/animation
/responsive-interaction.html#responsive-interaction-surface-reaction) |
| 13 | 13 |
| 14 `paper-ripple` provides a visual effect that other paper elements can | 14 `paper-ripple` provides a visual effect that other paper elements can |
| 15 use to simulate a rippling effect emanating from the point of contact. The | 15 use to simulate a rippling effect emanating from the point of contact. The |
| 16 effect can be visualized as a concentric circle with motion. | 16 effect can be visualized as a concentric circle with motion. |
| 17 | 17 |
| 18 Example: | 18 Example: |
| 19 | 19 |
| 20 <div style="position:relative"> | 20 <div style="position:relative"> |
| 21 <paper-ripple></paper-ripple> | 21 <paper-ripple></paper-ripple> |
| 22 </div> | 22 </div> |
| 23 | 23 |
| 24 Note, it's important that the parent container of the ripple be relative positio
n, otherwise | 24 Note, it's important that the parent container of the ripple be relative positio
n, otherwise |
| 25 the ripple will emanate outside of the desired container. | 25 the ripple will emanate outside of the desired container. |
| 26 | 26 |
| 27 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | 27 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple |
| 28 effect when touches on it. You can also defeat the default behavior and | 28 effect when touches on it. You can also defeat the default behavior and |
| 29 manually route the down and up actions to the ripple element. Note that it is | 29 manually route the down and up actions to the ripple element. Note that it is |
| 30 important if you call `downAction()` you will have to make sure to call | 30 important if you call `downAction()` you will have to make sure to call |
| 31 `upAction()` so that `paper-ripple` would end the animation loop. | 31 `upAction()` so that `paper-ripple` would end the animation loop. |
| 32 | 32 |
| 33 Example: | 33 Example: |
| 34 | 34 |
| 35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | 35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 74 </head><body><dom-module id="paper-ripple"> | 74 </head><body><dom-module id="paper-ripple"> |
| 75 | 75 |
| 76 <!-- | 76 <!-- |
| 77 Fired when the animation finishes. This is useful if you want to wait until th
e ripple | 77 Fired when the animation finishes. This is useful if you want to wait until th
e ripple |
| 78 animation finishes to perform some action. | 78 animation finishes to perform some action. |
| 79 | 79 |
| 80 @event transitionend | 80 @event transitionend |
| 81 @param {Object} detail | 81 @param {Object} detail |
| 82 @param {Object} detail.node The animated node | 82 @param {Object} detail.node The animated node |
| 83 --> | 83 --> |
| 84 | 84 |
| 85 <template> | 85 <template> |
| 86 <style> | 86 <style> |
| 87 :host { | 87 :host { |
| 88 display: block; | 88 display: block; |
| 89 position: absolute; | 89 position: absolute; |
| 90 border-radius: inherit; | 90 border-radius: inherit; |
| 91 overflow: hidden; | 91 overflow: hidden; |
| 92 top: 0; | 92 top: 0; |
| 93 left: 0; | 93 left: 0; |
| 94 right: 0; | 94 right: 0; |
| 95 bottom: 0; | 95 bottom: 0; |
| 96 |
| 97 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers
, |
| 98 * creating a node (with a position:absolute) in the middle of an event |
| 99 * handler "interrupts" that event handler (which happens when the |
| 100 * ripple is created on demand) */ |
| 101 pointer-events: none; |
| 96 } | 102 } |
| 97 | 103 |
| 98 :host([animating]) { | 104 :host([animating]) { |
| 99 /* This resolves a rendering issue in Chrome (as of 40) where the | 105 /* This resolves a rendering issue in Chrome (as of 40) where the |
| 100 ripple is not properly clipped by its parent (which may have | 106 ripple is not properly clipped by its parent (which may have |
| 101 rounded corners). See: http://jsbin.com/temexa/4 | 107 rounded corners). See: http://jsbin.com/temexa/4 |
| 102 | 108 |
| 103 Note: We only apply this style conditionally. Otherwise, the browser | 109 Note: We only apply this style conditionally. Otherwise, the browser |
| 104 will create a new compositing layer for every ripple element on the | 110 will create a new compositing layer for every ripple element on the |
| 105 page, and that would be bad. */ | 111 page, and that would be bad. */ |
| 106 -webkit-transform: translate(0, 0); | 112 -webkit-transform: translate(0, 0); |
| 107 transform: translate3d(0, 0, 0); | 113 transform: translate3d(0, 0, 0); |
| 108 } | 114 } |
| 109 | 115 |
| 110 :host([noink]) { | 116 :host([noink]) { |
| 111 pointer-events: none; | 117 pointer-events: none; |
| 112 } | 118 } |
| 113 | 119 |
| 114 #background, | 120 #background, |
| 115 #waves, | 121 #waves, |
| 116 .wave-container, | 122 .wave-container, |
| 117 .wave { | 123 .wave { |
| 118 pointer-events: none; | 124 pointer-events: none; |
| 119 position: absolute; | 125 position: absolute; |
| 120 top: 0; | 126 top: 0; |
| 121 left: 0; | 127 left: 0; |
| 122 width: 100%; | 128 width: 100%; |
| 123 height: 100%; | 129 height: 100%; |
| 124 } | 130 } |
| 125 | 131 |
| 126 #background, | 132 #background, |
| 127 .wave { | 133 .wave { |
| 128 opacity: 0; | 134 opacity: 0; |
| 129 } | 135 } |
| 130 | 136 |
| 131 #waves, | 137 #waves, |
| 132 .wave { | 138 .wave { |
| 133 overflow: hidden; | 139 overflow: hidden; |
| 134 } | 140 } |
| 135 | 141 |
| 136 .wave-container, | 142 .wave-container, |
| 137 .wave { | 143 .wave { |
| 138 border-radius: 50%; | 144 border-radius: 50%; |
| 139 } | 145 } |
| 140 | 146 |
| 141 :host(.circle) #background, | 147 :host(.circle) #background, |
| 142 :host(.circle) #waves { | 148 :host(.circle) #waves { |
| 143 border-radius: 50%; | 149 border-radius: 50%; |
| 144 } | 150 } |
| 145 | 151 |
| 146 :host(.circle) .wave-container { | 152 :host(.circle) .wave-container { |
| 147 overflow: hidden; | 153 overflow: hidden; |
| 148 } | 154 } |
| 149 </style> | 155 </style> |
| 150 | 156 |
| 151 <div id="background"></div> | 157 <div id="background"></div> |
| 152 <div id="waves"></div> | 158 <div id="waves"></div> |
| 153 </template> | 159 </template> |
| 154 </dom-module> | 160 </dom-module> |
| 155 <script src="paper-ripple-extracted.js"></script></body></html> | 161 <script src="paper-ripple-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1410143002:
Update Polymer to fix closure compile (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@iron-list5
