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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip-extracted.js

Issue 2321883004: Roll paper-tooltip to pick up some changes I made to it (Closed)
Patch Set: Created 4 years, 3 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 Polymer({ 1 Polymer({
2 is: 'paper-tooltip', 2 is: 'paper-tooltip',
3 3
4 hostAttributes: { 4 hostAttributes: {
5 role: 'tooltip', 5 role: 'tooltip',
6 tabindex: -1 6 tabindex: -1
7 }, 7 },
8 8
9 behaviors: [ 9 behaviors: [
10 Polymer.NeonAnimationRunnerBehavior 10 Polymer.NeonAnimationRunnerBehavior
11 ], 11 ],
12 12
13 properties: { 13 properties: {
14 /** 14 /**
15 * The id of the element that the tooltip is anchored to. This element 15 * The id of the element that the tooltip is anchored to. This element
16 * must be a sibling of the tooltip. 16 * must be a sibling of the tooltip.
17 */ 17 */
18 for: { 18 for: {
19 type: String, 19 type: String,
20 observer: '_forChanged' 20 observer: '_findTarget'
21 }, 21 },
22 22
23 /** 23 /**
24 * Set this to true if you want to manually control when the tooltip 24 * Set this to true if you want to manually control when the tooltip
25 * is shown or hidden. 25 * is shown or hidden.
26 */ 26 */
27 manualMode: { 27 manualMode: {
28 type: Boolean, 28 type: Boolean,
29 value: false 29 value: false,
30 observer: '_manualModeChanged'
30 }, 31 },
31 32
32 /** 33 /**
33 * Positions the tooltip to the top, right, bottom, left of its content. 34 * Positions the tooltip to the top, right, bottom, left of its content.
34 */ 35 */
35 position: { 36 position: {
36 type: String, 37 type: String,
37 value: 'bottom' 38 value: 'bottom'
38 }, 39 },
39 40
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
97 }, 98 },
98 99
99 _showing: { 100 _showing: {
100 type: Boolean, 101 type: Boolean,
101 value: false 102 value: false
102 } 103 }
103 }, 104 },
104 105
105 listeners: { 106 listeners: {
106 'neon-animation-finish': '_onAnimationFinish', 107 'neon-animation-finish': '_onAnimationFinish',
107 'mouseenter': 'hide'
108 }, 108 },
109 109
110 /** 110 /**
111 * Returns the target element that this tooltip is anchored to. It is 111 * Returns the target element that this tooltip is anchored to. It is
112 * either the element given by the `for` attribute, or the immediate paren t 112 * either the element given by the `for` attribute, or the immediate paren t
113 * of the tooltip. 113 * of the tooltip.
114 */ 114 */
115 get target () { 115 get target () {
116 var parentNode = Polymer.dom(this).parentNode; 116 var parentNode = Polymer.dom(this).parentNode;
117 // If the parentNode is a document fragment, then we need to use the hos t. 117 // If the parentNode is a document fragment, then we need to use the hos t.
118 var ownerRoot = Polymer.dom(this).getOwnerRoot(); 118 var ownerRoot = Polymer.dom(this).getOwnerRoot();
119 119
120 var target; 120 var target;
121 if (this.for) { 121 if (this.for) {
122 target = Polymer.dom(ownerRoot).querySelector('#' + this.for); 122 target = Polymer.dom(ownerRoot).querySelector('#' + this.for);
123 } else { 123 } else {
124 target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? 124 target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ?
125 ownerRoot.host : parentNode; 125 ownerRoot.host : parentNode;
126 } 126 }
127 127
128 return target; 128 return target;
129 }, 129 },
130 130
131 attached: function() { 131 attached: function() {
132 this._target = this.target; 132 this._findTarget();
133
134 if (this.manualMode)
135 return;
136
137 this.listen(this._target, 'mouseenter', 'show');
138 this.listen(this._target, 'focus', 'show');
139 this.listen(this._target, 'mouseleave', 'hide');
140 this.listen(this._target, 'blur', 'hide');
141 this.listen(this._target, 'tap', 'hide');
142 }, 133 },
143 134
144 detached: function() { 135 detached: function() {
145 if (this._target && !this.manualMode) { 136 if (!this.manualMode)
146 this.unlisten(this._target, 'mouseenter', 'show'); 137 this._removeListeners();
147 this.unlisten(this._target, 'focus', 'show');
148 this.unlisten(this._target, 'mouseleave', 'hide');
149 this.unlisten(this._target, 'blur', 'hide');
150 this.unlisten(this._target, 'tap', 'hide');
151 }
152 }, 138 },
153 139
154 show: function() { 140 show: function() {
155 // If the tooltip is already showing, there's nothing to do. 141 // If the tooltip is already showing, there's nothing to do.
156 if (this._showing) 142 if (this._showing)
157 return; 143 return;
158 144
159 if (Polymer.dom(this).textContent.trim() === '') 145 if (Polymer.dom(this).textContent.trim() === '')
160 return; 146 return;
161 147
162 148
163 this.cancelAnimation(); 149 this.cancelAnimation();
164 this._showing = true; 150 this._showing = true;
165 this.toggleClass('hidden', false, this.$.tooltip); 151 this.toggleClass('hidden', false, this.$.tooltip);
166 this.updatePosition(); 152 this.updatePosition();
167 153
154 this.animationConfig.entry[0].timing = this.animationConfig.entry[0].tim ing || {};
168 this.animationConfig.entry[0].timing.delay = this.animationDelay; 155 this.animationConfig.entry[0].timing.delay = this.animationDelay;
169 this._animationPlaying = true; 156 this._animationPlaying = true;
170 this.playAnimation('entry'); 157 this.playAnimation('entry');
171 }, 158 },
172 159
173 hide: function() { 160 hide: function() {
174 // If the tooltip is already hidden, there's nothing to do. 161 // If the tooltip is already hidden, there's nothing to do.
175 if (!this._showing) { 162 if (!this._showing) {
176 return; 163 return;
177 } 164 }
178 165
179 // If the entry animation is still playing, don't try to play the exit 166 // If the entry animation is still playing, don't try to play the exit
180 // animation since this will reset the opacity to 1. Just end the animat ion. 167 // animation since this will reset the opacity to 1. Just end the animat ion.
181 if (this._animationPlaying) { 168 if (this._animationPlaying) {
182 this.cancelAnimation(); 169 this.cancelAnimation();
183 this._showing = false; 170 this._showing = false;
184 this._onAnimationFinish(); 171 this._onAnimationFinish();
185 return; 172 return;
186 } 173 }
187 174
188 this._showing = false; 175 this._showing = false;
189 this._animationPlaying = true; 176 this._animationPlaying = true;
190 this.playAnimation('exit'); 177 this.playAnimation('exit');
191 }, 178 },
192 179
193 _forChanged: function() {
194 this._target = this.target;
195 },
196
197 updatePosition: function() { 180 updatePosition: function() {
198 if (!this._target || !this.offsetParent) 181 if (!this._target || !this.offsetParent)
199 return; 182 return;
200 183
201 var offset = this.offset; 184 var offset = this.offset;
202 // If a marginTop has been provided by the user (pre 1.0.3), use it. 185 // If a marginTop has been provided by the user (pre 1.0.3), use it.
203 if (this.marginTop != 14 && this.offset == 14) 186 if (this.marginTop != 14 && this.offset == 14)
204 offset = this.marginTop; 187 offset = this.marginTop;
205 188
206 var parentRect = this.offsetParent.getBoundingClientRect(); 189 var parentRect = this.offsetParent.getBoundingClientRect();
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
253 this.style.top = Math.max(0, tooltipTop) + 'px'; 236 this.style.top = Math.max(0, tooltipTop) + 'px';
254 this.style.bottom = 'auto'; 237 this.style.bottom = 'auto';
255 } 238 }
256 } else { 239 } else {
257 this.style.left = tooltipLeft + 'px'; 240 this.style.left = tooltipLeft + 'px';
258 this.style.top = tooltipTop + 'px'; 241 this.style.top = tooltipTop + 'px';
259 } 242 }
260 243
261 }, 244 },
262 245
246 _addListeners: function() {
247 if (this._target) {
248 this.listen(this._target, 'mouseenter', 'show');
249 this.listen(this._target, 'focus', 'show');
250 this.listen(this._target, 'mouseleave', 'hide');
251 this.listen(this._target, 'blur', 'hide');
252 this.listen(this._target, 'tap', 'hide');
253 }
254 this.listen(this, 'mouseenter', 'hide');
255 },
256
257 _findTarget: function() {
258 if (!this.manualMode)
259 this._removeListeners();
260
261 this._target = this.target;
262
263 if (!this.manualMode)
264 this._addListeners();
265 },
266
267 _manualModeChanged: function() {
268 if (this.manualMode)
269 this._removeListeners();
270 else
271 this._addListeners();
272 },
273
263 _onAnimationFinish: function() { 274 _onAnimationFinish: function() {
264 this._animationPlaying = false; 275 this._animationPlaying = false;
265 if (!this._showing) { 276 if (!this._showing) {
266 this.toggleClass('hidden', true, this.$.tooltip); 277 this.toggleClass('hidden', true, this.$.tooltip);
267 } 278 }
268 }, 279 },
280
281 _removeListeners: function() {
282 if (this._target) {
283 this.unlisten(this._target, 'mouseenter', 'show');
284 this.unlisten(this._target, 'focus', 'show');
285 this.unlisten(this._target, 'mouseleave', 'hide');
286 this.unlisten(this._target, 'blur', 'hide');
287 this.unlisten(this._target, 'tap', 'hide');
288 }
289 this.unlisten(this, 'mouseenter', 'hide');
290 }
269 }); 291 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698