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

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

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 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 1 Polymer({
2 Polymer({
3 is: 'paper-tooltip', 2 is: 'paper-tooltip',
4 3
5 hostAttributes: { 4 hostAttributes: {
6 role: 'tooltip', 5 role: 'tooltip',
7 tabindex: -1 6 tabindex: -1
8 }, 7 },
9 8
10 behaviors: [ 9 behaviors: [
11 Polymer.NeonAnimationRunnerBehavior 10 Polymer.NeonAnimationRunnerBehavior
12 ], 11 ],
13 12
14 properties: { 13 properties: {
15 /** 14 /**
16 * 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
17 * must be a sibling of the tooltip. 16 * must be a sibling of the tooltip.
18 */ 17 */
19 for: { 18 for: {
20 type: String, 19 type: String,
21 observer: '_forChanged' 20 observer: '_forChanged'
22 }, 21 },
23 22
24 /** 23 /**
24 * Positions the tooltip to the top, right, bottom, left of its content.
25 */
26 position: {
27 type: String,
28 value: 'bottom'
29 },
30
31 /**
32 * If true, no parts of the tooltip will ever be shown offscreen.
33 */
34 fitToVisibleBounds: {
35 type: Boolean,
36 value: false
37 },
38
39 /**
25 * The spacing between the top of the tooltip and the element it is 40 * The spacing between the top of the tooltip and the element it is
26 * anchored to. 41 * anchored to.
27 */ 42 */
43 offset: {
44 type: Number,
45 value: 14
46 },
47
48 /**
49 * This property is deprecated, but left over so that it doesn't
50 * break exiting code. Please use `offset` instead. If both `offset` and
51 * `marginTop` are provided, `marginTop` will be ignored.
52 * @deprecated since version 1.0.3
53 */
28 marginTop: { 54 marginTop: {
29 type: Number, 55 type: Number,
30 value: 14 56 value: 14
31 }, 57 },
32 58
33 animationConfig: { 59 animationConfig: {
34 type: Object, 60 type: Object,
35 value: function() { 61 value: function() {
36 return { 62 return {
37 'entry': [{ 63 'entry': [{
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
93 this.unlisten(this._target, 'focus', 'show'); 119 this.unlisten(this._target, 'focus', 'show');
94 this.unlisten(this._target, 'mouseleave', 'hide'); 120 this.unlisten(this._target, 'mouseleave', 'hide');
95 this.unlisten(this._target, 'blur', 'hide'); 121 this.unlisten(this._target, 'blur', 'hide');
96 } 122 }
97 }, 123 },
98 124
99 show: function() { 125 show: function() {
100 if (this._showing) 126 if (this._showing)
101 return; 127 return;
102 128
129 if (Polymer.dom(this).textContent.trim() === '')
130 return;
131
103 this.cancelAnimation(); 132 this.cancelAnimation();
104 133
105 this.toggleClass('hidden', false, this.$.tooltip); 134 this.toggleClass('hidden', false, this.$.tooltip);
106 this._setPosition(); 135 this.updatePosition();
107 this._showing = true; 136 this._showing = true;
108 137
109 this.playAnimation('entry'); 138 this.playAnimation('entry');
110 }, 139 },
111 140
112 hide: function() { 141 hide: function() {
113 if (!this._showing) 142 if (!this._showing)
114 return; 143 return;
115 144
116 this._showing = false; 145 this._showing = false;
117 this.playAnimation('exit'); 146 this.playAnimation('exit');
118 }, 147 },
119 148
120 _forChanged: function() { 149 _forChanged: function() {
121 this._target = this.target; 150 this._target = this.target;
122 }, 151 },
123 152
124 _setPosition: function() { 153 updatePosition: function() {
125 if (!this._target) 154 if (!this._target)
126 return; 155 return;
127 156
157 var offset = this.offset;
158 // If a marginTop has been provided by the user (pre 1.0.3), use it.
159 if (this.marginTop != 14 && this.offset == 14)
160 offset = this.marginTop;
161
128 var parentRect = this.offsetParent.getBoundingClientRect(); 162 var parentRect = this.offsetParent.getBoundingClientRect();
129 var targetRect = this._target.getBoundingClientRect(); 163 var targetRect = this._target.getBoundingClientRect();
130 var thisRect = this.getBoundingClientRect(); 164 var thisRect = this.getBoundingClientRect();
131 165
132 var centerOffset = (targetRect.width - thisRect.width) / 2; 166 var horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
167 var verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
133 168
134 this.style.left = targetRect.left - parentRect.left + centerOffset + 'px '; 169 var targetLeft = targetRect.left - parentRect.left;
135 this.style.top = targetRect.top - parentRect.top + targetRect.height + t his.marginTop + 'px'; 170 var targetTop = targetRect.top - parentRect.top;
171
172 var tooltipLeft, tooltipTop;
173
174 switch (this.position) {
175 case 'top':
176 tooltipLeft = targetLeft + horizontalCenterOffset;
177 tooltipTop = targetTop - thisRect.height - offset;
178 break;
179 case 'bottom':
180 tooltipLeft = targetLeft + horizontalCenterOffset;
181 tooltipTop = targetTop + targetRect.height + offset;
182 break;
183 case 'left':
184 tooltipLeft = targetLeft - thisRect.width - offset;
185 tooltipTop = targetTop + verticalCenterOffset;
186 break;
187 case 'right':
188 tooltipLeft = targetLeft + targetRect.width + offset;
189 tooltipTop = targetTop + verticalCenterOffset;
190 break;
191 }
192
193 // TODO(noms): This should use IronFitBehavior if possible.
194 if (this.fitToVisibleBounds) {
195 // Clip the left/right side.
196 if (tooltipLeft + thisRect.width > window.innerWidth) {
197 this.style.right = '0px';
198 this.style.left = 'auto';
199 } else {
200 this.style.left = Math.max(0, tooltipLeft) + 'px';
201 this.style.right = 'auto';
202 }
203
204 // Clip the top/bottom side.
205 if (tooltipTop + thisRect.height > window.innerHeight) {
206 this.style.bottom = '0px';
207 this.style.top = 'auto';
208 } else {
209 this.style.top = Math.max(0, tooltipTop) + 'px';
210 this.style.bottom = 'auto';
211 }
212 } else {
213 this.style.left = tooltipLeft + 'px';
214 this.style.top = tooltipTop + 'px';
215 }
216
136 }, 217 },
137 218
138 _onAnimationFinish: function() { 219 _onAnimationFinish: function() {
139 if (!this._showing) { 220 if (!this._showing) {
140 this.toggleClass('hidden', true, this.$.tooltip); 221 this.toggleClass('hidden', true, this.$.tooltip);
141 } 222 }
142 }, 223 },
143 }) 224 });
144
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698