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

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

Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: dzhioev@ review Created 5 years, 2 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 ],
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698