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

Side by Side Diff: third_party/polymer/components/paper-toast/paper-toast.html

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 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 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
70 display: block; 70 display: block;
71 position: fixed; 71 position: fixed;
72 background-color: var(--paper-toast-background-color, #323232); 72 background-color: var(--paper-toast-background-color, #323232);
73 color: var(--paper-toast-color, #f1f1f1); 73 color: var(--paper-toast-color, #f1f1f1);
74 min-height: 48px; 74 min-height: 48px;
75 min-width: 288px; 75 min-width: 288px;
76 padding: 16px 24px; 76 padding: 16px 24px;
77 box-sizing: border-box; 77 box-sizing: border-box;
78 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 78 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
79 border-radius: 2px; 79 border-radius: 2px;
80 left: 0;
81 bottom: 0;
82 margin: 12px; 80 margin: 12px;
83 font-size: 14px; 81 font-size: 14px;
84 cursor: default; 82 cursor: default;
85 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 83 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
86 transition: transform 0.3s, opacity 0.3s; 84 transition: transform 0.3s, opacity 0.3s;
87 opacity: 0; 85 opacity: 0;
88 -webkit-transform: translateY(100px); 86 -webkit-transform: translateY(100px);
89 transform: translateY(100px); 87 transform: translateY(100px);
90 @apply(--paper-font-common-base); 88 @apply(--paper-font-common-base);
91 } 89 }
(...skipping 27 matching lines...) Expand all
119 117
120 Polymer({ 118 Polymer({
121 is: 'paper-toast', 119 is: 'paper-toast',
122 120
123 behaviors: [ 121 behaviors: [
124 Polymer.IronOverlayBehavior 122 Polymer.IronOverlayBehavior
125 ], 123 ],
126 124
127 properties: { 125 properties: {
128 /** 126 /**
127 * The element to fit `this` into.
128 * Overridden from `Polymer.IronFitBehavior`.
129 */
130 fitInto: {
131 type: Object,
132 value: window,
133 observer: '_onFitIntoChanged'
134 },
135
136 /**
137 * The orientation against which to align the dropdown content
138 * horizontally relative to `positionTarget`.
139 * Overridden from `Polymer.IronFitBehavior`.
140 */
141 horizontalAlign: {
142 type: String,
143 value: 'left'
144 },
145
146 /**
147 * The orientation against which to align the dropdown content
148 * vertically relative to `positionTarget`.
149 * Overridden from `Polymer.IronFitBehavior`.
150 */
151 verticalAlign: {
152 type: String,
153 value: 'bottom'
154 },
155
156 /**
129 * The duration in milliseconds to show the toast. 157 * The duration in milliseconds to show the toast.
130 * Set to `0`, a negative number, or `Infinity`, to disable the 158 * Set to `0`, a negative number, or `Infinity`, to disable the
131 * toast auto-closing. 159 * toast auto-closing.
132 */ 160 */
133 duration: { 161 duration: {
134 type: Number, 162 type: Number,
135 value: 3000 163 value: 3000
136 }, 164 },
137 165
138 /** 166 /**
(...skipping 27 matching lines...) Expand all
166 listeners: { 194 listeners: {
167 'transitionend': '__onTransitionEnd' 195 'transitionend': '__onTransitionEnd'
168 }, 196 },
169 197
170 /** 198 /**
171 * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`. 199 * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`.
172 * @property visible 200 * @property visible
173 * @deprecated 201 * @deprecated
174 */ 202 */
175 get visible() { 203 get visible() {
176 console.warn('`visible` is deprecated, use `opened` instead'); 204 Polymer.Base._warn('`visible` is deprecated, use `opened` instead');
177 return this.opened; 205 return this.opened;
178 }, 206 },
179 207
180 /** 208 /**
181 * Read-only. Can auto-close if duration is a positive finite number. 209 * Read-only. Can auto-close if duration is a positive finite number.
182 * @property _canAutoClose 210 * @property _canAutoClose
183 */ 211 */
184 get _canAutoClose() { 212 get _canAutoClose() {
185 return this.duration > 0 && this.duration !== Infinity; 213 return this.duration > 0 && this.duration !== Infinity;
186 }, 214 },
187 215
188 created: function() { 216 created: function() {
189 this._autoClose = null; 217 this._autoClose = null;
190 Polymer.IronA11yAnnouncer.requestAvailability(); 218 Polymer.IronA11yAnnouncer.requestAvailability();
191 }, 219 },
192 220
193 /** 221 /**
194 * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`. 222 * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
195 * @param {(Object|string)=} properties Properties to be set before open ing the toast. 223 * @param {(Object|string)=} properties Properties to be set before open ing the toast.
196 * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3 000})` 224 * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3 000})`
197 */ 225 */
198 show: function(properties) { 226 show: function(properties) {
199 if (typeof properties == 'string') { 227 if (typeof properties == 'string') {
200 properties = { text: properties }; 228 properties = { text: properties };
201 } 229 }
202 for (var property in properties) { 230 for (var property in properties) {
203 if (property.indexOf('_') === 0) { 231 if (property.indexOf('_') === 0) {
204 console.warn('The property "' + property + '" is private and was n ot set.'); 232 Polymer.Base._warn('The property "' + property + '" is private and was not set.');
205 } else if (property in this) { 233 } else if (property in this) {
206 this[property] = properties[property]; 234 this[property] = properties[property];
207 } else { 235 } else {
208 console.warn('The property "' + property + '" is not valid.'); 236 Polymer.Base._warn('The property "' + property + '" is not valid.' );
209 } 237 }
210 } 238 }
211 this.open(); 239 this.open();
212 }, 240 },
213 241
214 /** 242 /**
215 * Hide the toast. Same as `close()` from `IronOverlayBehavior`. 243 * Hide the toast. Same as `close()` from `IronOverlayBehavior`.
216 */ 244 */
217 hide: function() { 245 hide: function() {
218 this.close(); 246 this.close();
219 }, 247 },
220 248
221 /** 249 /**
222 * Overridden from `IronFitBehavior`.
223 * Positions the toast at the bottom left of fitInto.
224 */
225 center: function () {
226 if (this.fitInto === window) {
227 this.style.bottom = this.style.left = '';
228 } else {
229 var rect = this.fitInto.getBoundingClientRect();
230 this.style.left = rect.left + 'px';
231 this.style.bottom = (window.innerHeight - rect.bottom) + 'px';
232 }
233 },
234
235 /**
236 * Called on transitions of the toast, indicating a finished animation 250 * Called on transitions of the toast, indicating a finished animation
237 * @private 251 * @private
238 */ 252 */
239 __onTransitionEnd: function(e) { 253 __onTransitionEnd: function(e) {
240 // there are different transitions that are happening when opening and 254 // there are different transitions that are happening when opening and
241 // closing the toast. The last one so far is for `opacity`. 255 // closing the toast. The last one so far is for `opacity`.
242 // This marks the end of the transition, so we check for this to deter mine if this 256 // This marks the end of the transition, so we check for this to deter mine if this
243 // is the correct event. 257 // is the correct event.
244 if (e && e.target === this && e.propertyName === 'opacity') { 258 if (e && e.target === this && e.propertyName === 'opacity') {
245 if (this.opened) { 259 if (this.opened) {
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
284 }, 298 },
285 299
286 /** 300 /**
287 * Overridden from `IronOverlayBehavior`. 301 * Overridden from `IronOverlayBehavior`.
288 */ 302 */
289 _renderClosed: function() { 303 _renderClosed: function() {
290 this.classList.remove('paper-toast-open'); 304 this.classList.remove('paper-toast-open');
291 }, 305 },
292 306
293 /** 307 /**
294 * Overridden from `IronOverlayBehavior`. 308 * @private
295 * iron-fit-behavior will set the inline style position: static, which
296 * causes the toast to be rendered incorrectly when opened by default.
297 */ 309 */
298 _onIronResize: function() { 310 _onFitIntoChanged: function(fitInto) {
299 Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments); 311 this.positionTarget = fitInto;
300 if (this.opened) {
301 // Make sure there is no inline style for position.
302 this.style.position = '';
303 }
304 } 312 }
305 313
306 /** 314 /**
307 * Fired when `paper-toast` is opened. 315 * Fired when `paper-toast` is opened.
308 * 316 *
309 * @event 'iron-announce' 317 * @event 'iron-announce'
310 * @param {{text: string}} detail Contains text that will be announced. 318 * @param {{text: string}} detail Contains text that will be announced.
311 */ 319 */
312 }); 320 });
313 })(); 321 })();
314 </script> 322 </script>
315 </dom-module> 323 </dom-module>
OLDNEW
« no previous file with comments | « third_party/polymer/components/paper-toast/paper-toast.css ('k') | third_party/polymer/components/paper-toast/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698