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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

Issue 1410143002: Update Polymer to fix closure compile (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@iron-list5
Patch Set: Created 5 years, 2 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 unified diff | Download patch
OLDNEW
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698