| OLD | NEW |
| 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 Loading... |
| 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 | |
| OLD | NEW |