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