| 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 ], |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 50 * This property is deprecated, but left over so that it doesn't | 49 * This property is deprecated, but left over so that it doesn't |
| 51 * break exiting code. Please use `offset` instead. If both `offset` and | 50 * break exiting code. Please use `offset` instead. If both `offset` and |
| 52 * `marginTop` are provided, `marginTop` will be ignored. | 51 * `marginTop` are provided, `marginTop` will be ignored. |
| 53 * @deprecated since version 1.0.3 | 52 * @deprecated since version 1.0.3 |
| 54 */ | 53 */ |
| 55 marginTop: { | 54 marginTop: { |
| 56 type: Number, | 55 type: Number, |
| 57 value: 14 | 56 value: 14 |
| 58 }, | 57 }, |
| 59 | 58 |
| 59 /** |
| 60 * The delay that will be applied before the `entry` animation is |
| 61 * played when showing the tooltip. |
| 62 */ |
| 63 animationDelay: { |
| 64 type: Number, |
| 65 value: 500 |
| 66 }, |
| 67 |
| 68 /** |
| 69 * The entry and exit animations that will be played when showing and |
| 70 * hiding the tooltip. If you want to override this, you must ensure |
| 71 * that your animationConfig has the exact format below. |
| 72 */ |
| 60 animationConfig: { | 73 animationConfig: { |
| 61 type: Object, | 74 type: Object, |
| 62 value: function() { | 75 value: function() { |
| 63 return { | 76 return { |
| 64 'entry': [{ | 77 'entry': [{ |
| 65 name: 'fade-in-animation', | 78 name: 'fade-in-animation', |
| 66 node: this, | 79 node: this, |
| 67 timing: {delay: 500} | 80 timing: {delay: 0} |
| 68 }], | 81 }], |
| 69 'exit': [{ | 82 'exit': [{ |
| 70 name: 'fade-out-animation', | 83 name: 'fade-out-animation', |
| 71 node: this | 84 node: this |
| 72 }] | 85 }] |
| 73 } | 86 } |
| 74 } | 87 } |
| 75 }, | 88 }, |
| 76 | 89 |
| 77 _showing: { | 90 _showing: { |
| 78 type: Boolean, | 91 type: Boolean, |
| 79 value: false | 92 value: false |
| 80 } | 93 } |
| 81 }, | 94 }, |
| 82 | 95 |
| 83 listeners: { | 96 listeners: { |
| 84 'neon-animation-finish': '_onAnimationFinish' | 97 'neon-animation-finish': '_onAnimationFinish', |
| 98 'mouseenter': 'hide' |
| 85 }, | 99 }, |
| 86 | 100 |
| 87 /** | 101 /** |
| 88 * Returns the target element that this tooltip is anchored to. It is | 102 * Returns the target element that this tooltip is anchored to. It is |
| 89 * either the element given by the `for` attribute, or the immediate paren
t | 103 * either the element given by the `for` attribute, or the immediate paren
t |
| 90 * of the tooltip. | 104 * of the tooltip. |
| 91 */ | 105 */ |
| 92 get target () { | 106 get target () { |
| 93 var parentNode = Polymer.dom(this).parentNode; | 107 var parentNode = Polymer.dom(this).parentNode; |
| 94 // If the parentNode is a document fragment, then we need to use the hos
t. | 108 // If the parentNode is a document fragment, then we need to use the hos
t. |
| (...skipping 10 matching lines...) Expand all Loading... |
| 105 return target; | 119 return target; |
| 106 }, | 120 }, |
| 107 | 121 |
| 108 attached: function() { | 122 attached: function() { |
| 109 this._target = this.target; | 123 this._target = this.target; |
| 110 | 124 |
| 111 this.listen(this._target, 'mouseenter', 'show'); | 125 this.listen(this._target, 'mouseenter', 'show'); |
| 112 this.listen(this._target, 'focus', 'show'); | 126 this.listen(this._target, 'focus', 'show'); |
| 113 this.listen(this._target, 'mouseleave', 'hide'); | 127 this.listen(this._target, 'mouseleave', 'hide'); |
| 114 this.listen(this._target, 'blur', 'hide'); | 128 this.listen(this._target, 'blur', 'hide'); |
| 129 this.listen(this._target, 'tap', 'hide'); |
| 115 }, | 130 }, |
| 116 | 131 |
| 117 detached: function() { | 132 detached: function() { |
| 118 if (this._target) { | 133 if (this._target) { |
| 119 this.unlisten(this._target, 'mouseenter', 'show'); | 134 this.unlisten(this._target, 'mouseenter', 'show'); |
| 120 this.unlisten(this._target, 'focus', 'show'); | 135 this.unlisten(this._target, 'focus', 'show'); |
| 121 this.unlisten(this._target, 'mouseleave', 'hide'); | 136 this.unlisten(this._target, 'mouseleave', 'hide'); |
| 122 this.unlisten(this._target, 'blur', 'hide'); | 137 this.unlisten(this._target, 'blur', 'hide'); |
| 138 this.unlisten(this._target, 'tap', 'hide'); |
| 123 } | 139 } |
| 124 }, | 140 }, |
| 125 | 141 |
| 126 show: function() { | 142 show: function() { |
| 143 // If the tooltip is already showing, there's nothing to do. |
| 127 if (this._showing) | 144 if (this._showing) |
| 128 return; | 145 return; |
| 129 | 146 |
| 130 if (Polymer.dom(this).textContent.trim() === '') | 147 if (Polymer.dom(this).textContent.trim() === '') |
| 131 return; | 148 return; |
| 132 | 149 |
| 150 |
| 133 this.cancelAnimation(); | 151 this.cancelAnimation(); |
| 134 | 152 this._showing = true; |
| 135 this.toggleClass('hidden', false, this.$.tooltip); | 153 this.toggleClass('hidden', false, this.$.tooltip); |
| 136 this.updatePosition(); | 154 this.updatePosition(); |
| 137 this._showing = true; | |
| 138 | 155 |
| 156 this.animationConfig.entry[0].timing.delay = this.animationDelay; |
| 157 this._animationPlaying = true; |
| 139 this.playAnimation('entry'); | 158 this.playAnimation('entry'); |
| 140 }, | 159 }, |
| 141 | 160 |
| 142 hide: function() { | 161 hide: function() { |
| 143 if (!this._showing) | 162 // If the tooltip is already hidden, there's nothing to do. |
| 163 if (!this._showing) { |
| 144 return; | 164 return; |
| 165 } |
| 166 |
| 167 // If the entry animation is still playing, don't try to play the exit |
| 168 // animation since this will reset the opacity to 1. Just end the animat
ion. |
| 169 if (this._animationPlaying) { |
| 170 this.cancelAnimation(); |
| 171 this._showing = false; |
| 172 this._onAnimationFinish(); |
| 173 return; |
| 174 } |
| 145 | 175 |
| 146 this._showing = false; | 176 this._showing = false; |
| 177 this._animationPlaying = true; |
| 147 this.playAnimation('exit'); | 178 this.playAnimation('exit'); |
| 148 }, | 179 }, |
| 149 | 180 |
| 150 _forChanged: function() { | 181 _forChanged: function() { |
| 151 this._target = this.target; | 182 this._target = this.target; |
| 152 }, | 183 }, |
| 153 | 184 |
| 154 updatePosition: function() { | 185 updatePosition: function() { |
| 155 if (!this._target) | 186 if (!this._target) |
| 156 return; | 187 return; |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 211 this.style.bottom = 'auto'; | 242 this.style.bottom = 'auto'; |
| 212 } | 243 } |
| 213 } else { | 244 } else { |
| 214 this.style.left = tooltipLeft + 'px'; | 245 this.style.left = tooltipLeft + 'px'; |
| 215 this.style.top = tooltipTop + 'px'; | 246 this.style.top = tooltipTop + 'px'; |
| 216 } | 247 } |
| 217 | 248 |
| 218 }, | 249 }, |
| 219 | 250 |
| 220 _onAnimationFinish: function() { | 251 _onAnimationFinish: function() { |
| 252 this._animationPlaying = false; |
| 221 if (!this._showing) { | 253 if (!this._showing) { |
| 222 this.toggleClass('hidden', true, this.$.tooltip); | 254 this.toggleClass('hidden', true, this.$.tooltip); |
| 223 } | 255 } |
| 224 }, | 256 }, |
| 225 }); | 257 }); |
| 226 | |
| OLD | NEW |