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

Side by Side Diff: lib/src/paper-tooltip/paper-tooltip.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month 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) 2015 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2015 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 --> 8 -->
9 9
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> 12 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
13 <link rel="import" href="../neon-animation/animations/fade-in-animation.html"> 13 <link rel="import" href="../neon-animation/animations/fade-in-animation.html">
14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> 14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">
15
15 <!-- 16 <!--
17 Material design: [Tooltips](https://www.google.com/design/spec/components/toolti ps.html)
16 18
17 `<paper-tooltip>` is a label that appears on hover and focus when the user 19 `<paper-tooltip>` is a label that appears on hover and focus when the user
18 hovers over an element with the cursor or with the keyboard. It will be centered 20 hovers over an element with the cursor or with the keyboard. It will be centered
19 to an anchor element specified in the `for` attribute, or, if that doesn't exist , 21 to an anchor element specified in the `for` attribute, or, if that doesn't exist ,
20 centered to the parent node containing it. 22 centered to the parent node containing it.
21 23
22 Example: 24 Example:
23 25
24 <div style="display:inline-block"> 26 <div style="display:inline-block">
25 <button>Click me!</button> 27 <button>Click me!</button>
(...skipping 28 matching lines...) Expand all
54 --> 56 -->
55 57
56 <dom-module id="paper-tooltip"> 58 <dom-module id="paper-tooltip">
57 <template> 59 <template>
58 <style> 60 <style>
59 :host { 61 :host {
60 display: block; 62 display: block;
61 position: absolute; 63 position: absolute;
62 outline: none; 64 outline: none;
63 z-index: 1002; 65 z-index: 1002;
66 -moz-user-select: none;
67 -ms-user-select: none;
68 -webkit-user-select: none;
69 user-select: none;
70 cursor: default;
64 } 71 }
65 72
66 #tooltip { 73 #tooltip {
67 display: block; 74 display: block;
68 outline: none; 75 outline: none;
69 @apply(--paper-font-common-base); 76 @apply(--paper-font-common-base);
70 font-size: 10px; 77 font-size: 10px;
78 line-height: 1;
71 79
72 background-color: var(--paper-tooltip-background, #616161); 80 background-color: var(--paper-tooltip-background, #616161);
73 opacity: var(--paper-tooltip-opacity, 0.9); 81 opacity: var(--paper-tooltip-opacity, 0.9);
74 color: var(--paper-tooltip-text-color, white); 82 color: var(--paper-tooltip-text-color, white);
75 83
76 padding: 8px; 84 padding: 8px;
77 border-radius: 2px; 85 border-radius: 2px;
78 86
79 @apply(--paper-tooltip); 87 @apply(--paper-tooltip);
80 } 88 }
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
142 * This property is deprecated, but left over so that it doesn't 150 * This property is deprecated, but left over so that it doesn't
143 * break exiting code. Please use `offset` instead. If both `offset` and 151 * break exiting code. Please use `offset` instead. If both `offset` and
144 * `marginTop` are provided, `marginTop` will be ignored. 152 * `marginTop` are provided, `marginTop` will be ignored.
145 * @deprecated since version 1.0.3 153 * @deprecated since version 1.0.3
146 */ 154 */
147 marginTop: { 155 marginTop: {
148 type: Number, 156 type: Number,
149 value: 14 157 value: 14
150 }, 158 },
151 159
160 /**
161 * The delay that will be applied before the `entry` animation is
162 * played when showing the tooltip.
163 */
164 animationDelay: {
165 type: Number,
166 value: 500
167 },
168
169 /**
170 * The entry and exit animations that will be played when showing and
171 * hiding the tooltip. If you want to override this, you must ensure
172 * that your animationConfig has the exact format below.
173 */
152 animationConfig: { 174 animationConfig: {
153 type: Object, 175 type: Object,
154 value: function() { 176 value: function() {
155 return { 177 return {
156 'entry': [{ 178 'entry': [{
157 name: 'fade-in-animation', 179 name: 'fade-in-animation',
158 node: this, 180 node: this,
159 timing: {delay: 500} 181 timing: {delay: 0}
160 }], 182 }],
161 'exit': [{ 183 'exit': [{
162 name: 'fade-out-animation', 184 name: 'fade-out-animation',
163 node: this 185 node: this
164 }] 186 }]
165 } 187 }
166 } 188 }
167 }, 189 },
168 190
169 _showing: { 191 _showing: {
170 type: Boolean, 192 type: Boolean,
171 value: false 193 value: false
172 } 194 }
173 }, 195 },
174 196
175 listeners: { 197 listeners: {
176 'neon-animation-finish': '_onAnimationFinish' 198 'neon-animation-finish': '_onAnimationFinish',
199 'mouseenter': 'hide'
177 }, 200 },
178 201
179 /** 202 /**
180 * Returns the target element that this tooltip is anchored to. It is 203 * Returns the target element that this tooltip is anchored to. It is
181 * either the element given by the `for` attribute, or the immediate paren t 204 * either the element given by the `for` attribute, or the immediate paren t
182 * of the tooltip. 205 * of the tooltip.
183 */ 206 */
184 get target () { 207 get target () {
185 var parentNode = Polymer.dom(this).parentNode; 208 var parentNode = Polymer.dom(this).parentNode;
186 // If the parentNode is a document fragment, then we need to use the hos t. 209 // If the parentNode is a document fragment, then we need to use the hos t.
(...skipping 10 matching lines...) Expand all
197 return target; 220 return target;
198 }, 221 },
199 222
200 attached: function() { 223 attached: function() {
201 this._target = this.target; 224 this._target = this.target;
202 225
203 this.listen(this._target, 'mouseenter', 'show'); 226 this.listen(this._target, 'mouseenter', 'show');
204 this.listen(this._target, 'focus', 'show'); 227 this.listen(this._target, 'focus', 'show');
205 this.listen(this._target, 'mouseleave', 'hide'); 228 this.listen(this._target, 'mouseleave', 'hide');
206 this.listen(this._target, 'blur', 'hide'); 229 this.listen(this._target, 'blur', 'hide');
230 this.listen(this._target, 'tap', 'hide');
207 }, 231 },
208 232
209 detached: function() { 233 detached: function() {
210 if (this._target) { 234 if (this._target) {
211 this.unlisten(this._target, 'mouseenter', 'show'); 235 this.unlisten(this._target, 'mouseenter', 'show');
212 this.unlisten(this._target, 'focus', 'show'); 236 this.unlisten(this._target, 'focus', 'show');
213 this.unlisten(this._target, 'mouseleave', 'hide'); 237 this.unlisten(this._target, 'mouseleave', 'hide');
214 this.unlisten(this._target, 'blur', 'hide'); 238 this.unlisten(this._target, 'blur', 'hide');
239 this.unlisten(this._target, 'tap', 'hide');
215 } 240 }
216 }, 241 },
217 242
218 show: function() { 243 show: function() {
244 // If the tooltip is already showing, there's nothing to do.
219 if (this._showing) 245 if (this._showing)
220 return; 246 return;
221 247
222 if (Polymer.dom(this).textContent.trim() === '') 248 if (Polymer.dom(this).textContent.trim() === '')
223 return; 249 return;
224 250
251
225 this.cancelAnimation(); 252 this.cancelAnimation();
226 253 this._showing = true;
227 this.toggleClass('hidden', false, this.$.tooltip); 254 this.toggleClass('hidden', false, this.$.tooltip);
228 this.updatePosition(); 255 this.updatePosition();
229 this._showing = true;
230 256
257 this.animationConfig.entry[0].timing.delay = this.animationDelay;
258 this._animationPlaying = true;
231 this.playAnimation('entry'); 259 this.playAnimation('entry');
232 }, 260 },
233 261
234 hide: function() { 262 hide: function() {
235 if (!this._showing) 263 // If the tooltip is already hidden, there's nothing to do.
264 if (!this._showing) {
236 return; 265 return;
266 }
267
268 // If the entry animation is still playing, don't try to play the exit
269 // animation since this will reset the opacity to 1. Just end the animat ion.
270 if (this._animationPlaying) {
271 this.cancelAnimation();
272 this._showing = false;
273 this._onAnimationFinish();
274 return;
275 }
237 276
238 this._showing = false; 277 this._showing = false;
278 this._animationPlaying = true;
239 this.playAnimation('exit'); 279 this.playAnimation('exit');
240 }, 280 },
241 281
242 _forChanged: function() { 282 _forChanged: function() {
243 this._target = this.target; 283 this._target = this.target;
244 }, 284 },
245 285
246 updatePosition: function() { 286 updatePosition: function() {
247 if (!this._target) 287 if (!this._target)
248 return; 288 return;
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
303 this.style.bottom = 'auto'; 343 this.style.bottom = 'auto';
304 } 344 }
305 } else { 345 } else {
306 this.style.left = tooltipLeft + 'px'; 346 this.style.left = tooltipLeft + 'px';
307 this.style.top = tooltipTop + 'px'; 347 this.style.top = tooltipTop + 'px';
308 } 348 }
309 349
310 }, 350 },
311 351
312 _onAnimationFinish: function() { 352 _onAnimationFinish: function() {
353 this._animationPlaying = false;
313 if (!this._showing) { 354 if (!this._showing) {
314 this.toggleClass('hidden', true, this.$.tooltip); 355 this.toggleClass('hidden', true, this.$.tooltip);
315 } 356 }
316 }, 357 },
317 }); 358 });
318 </script> 359 </script>
319 </dom-module> 360 </dom-module>
OLDNEW
« no previous file with comments | « lib/src/paper-toggle-button/paper-toggle-button.html ('k') | lib/src/paper-tooltip/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698