| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/components/paper-toast/paper-toast.html"> |
| <dom-module is="toplevel-toast"> |
| <template> |
| <style> |
| .error { |
| color: #dd4b39; |
| font-weight: bold; |
| } |
| a { |
| color: #eeff41; |
| font-weight: bold; |
| text-decoration: none; |
| } |
| </style> |
| <paper-toast id="toast" text={{text}} duration="10000"> |
| <div id="content"></div> |
| </paper-toast> |
| </template> |
| <script> |
| 'use strict'; |
| Polymer({ |
| is: 'toplevel-toast', |
| ready: function() { |
| document.addEventListener( |
| 'display-toast', this.displayToast.bind(this)); |
| }, |
| displayToast: function(event) { |
| var detail = event.detail; |
| Polymer.dom.flush(); |
| // We use a window.requestAnimationFrame here because the content div |
| // may be generated by a template update, and the template update may |
| // not have occurred by the time this event fires. |
| window.requestAnimationFrame(function() { |
| this.text = detail.text; |
| var content = Polymer.dom(this.$.content); |
| for (var i = content.childNodes.length - 1; i >= 0; i--) { |
| content.removeChild(content.childNodes[i]); |
| } |
| if (detail.content) { |
| content.appendChild(detail.content.cloneNode(true)); |
| } |
| if (detail.error) { |
| Polymer.dom(this.$.toast).classList.add('error'); |
| } else { |
| Polymer.dom(this.$.toast).classList.remove('error'); |
| } |
| this.$.toast.show(); |
| }.bind(this)); |
| } |
| }); |
| </script> |
| </dom-module> |
