| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html"> |
| <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html"> |
| |
| <!-- |
| Material design: [Snackbars & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html) |
| |
| `paper-toast` provides a subtle notification toast. Only one `paper-toast` will |
| be visible on screen. |
| |
| Use `opened` to show the toast: |
| |
| Example: |
| |
| <paper-toast text="Hello world!" opened></paper-toast> |
| |
| Also `open()` or `show()` can be used to show the toast: |
| |
| Example: |
| |
| <paper-button on-click="openToast">Open Toast</paper-button> |
| <paper-toast id="toast" text="Hello world!"></paper-toast> |
| |
| ... |
| |
| openToast: function() { |
| this.$.toast.open(); |
| } |
| |
| Set `duration` to 0, a negative number or Infinity to persist the toast on screen: |
| |
| Example: |
| |
| <paper-toast text="Terms and conditions" opened duration="0"> |
| <a href="#">Show more</a> |
| </paper-toast> |
| |
| |
| ### Styling |
| The following custom properties and mixins are available for styling: |
| |
| Custom property | Description | Default |
| ----------------|-------------|---------- |
| `--paper-toast-background-color` | The paper-toast background-color | `#323232` |
| `--paper-toast-color` | The paper-toast color | `#f1f1f1` |
| |
| This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. |
| In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. |
| |
| @group Paper Elements |
| @element paper-toast |
| @demo demo/index.html |
| @hero hero.svg |
| --> |
| |
| <dom-module id="paper-toast"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: fixed; |
| background-color: var(--paper-toast-background-color, #323232); |
| color: var(--paper-toast-color, #f1f1f1); |
| min-height: 48px; |
| min-width: 288px; |
| padding: 16px 24px; |
| box-sizing: border-box; |
| box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| border-radius: 2px; |
| margin: 12px; |
| font-size: 14px; |
| cursor: default; |
| -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; |
| transition: transform 0.3s, opacity 0.3s; |
| opacity: 0; |
| -webkit-transform: translateY(100px); |
| transform: translateY(100px); |
| @apply(--paper-font-common-base); |
| } |
| |
| :host(.capsule) { |
| border-radius: 24px; |
| } |
| |
| :host(.fit-bottom) { |
| width: 100%; |
| min-width: 0; |
| border-radius: 0; |
| margin: 0; |
| } |
| |
| :host(.paper-toast-open) { |
| opacity: 1; |
| -webkit-transform: translateY(0px); |
| transform: translateY(0px); |
| } |
| </style> |
| |
| <span id="label">{{text}}</span> |
| <content></content> |
| </template> |
| |
| <script> |
| (function() { |
| // Keeps track of the toast currently opened. |
| var currentToast = null; |
| |
| Polymer({ |
| is: 'paper-toast', |
| |
| behaviors: [ |
| Polymer.IronOverlayBehavior |
| ], |
| |
| properties: { |
| /** |
| * The element to fit `this` into. |
| * Overridden from `Polymer.IronFitBehavior`. |
| */ |
| fitInto: { |
| type: Object, |
| value: window, |
| observer: '_onFitIntoChanged' |
| }, |
| |
| /** |
| * The orientation against which to align the dropdown content |
| * horizontally relative to `positionTarget`. |
| * Overridden from `Polymer.IronFitBehavior`. |
| */ |
| horizontalAlign: { |
| type: String, |
| value: 'left' |
| }, |
| |
| /** |
| * The orientation against which to align the dropdown content |
| * vertically relative to `positionTarget`. |
| * Overridden from `Polymer.IronFitBehavior`. |
| */ |
| verticalAlign: { |
| type: String, |
| value: 'bottom' |
| }, |
| |
| /** |
| * The duration in milliseconds to show the toast. |
| * Set to `0`, a negative number, or `Infinity`, to disable the |
| * toast auto-closing. |
| */ |
| duration: { |
| type: Number, |
| value: 3000 |
| }, |
| |
| /** |
| * The text to display in the toast. |
| */ |
| text: { |
| type: String, |
| value: '' |
| }, |
| |
| /** |
| * Overridden from `IronOverlayBehavior`. |
| * Set to false to enable closing of the toast by clicking outside it. |
| */ |
| noCancelOnOutsideClick: { |
| type: Boolean, |
| value: true |
| }, |
| |
| /** |
| * Overridden from `IronOverlayBehavior`. |
| * Set to true to disable auto-focusing the toast or child nodes with |
| * the `autofocus` attribute` when the overlay is opened. |
| */ |
| noAutoFocus: { |
| type: Boolean, |
| value: true |
| } |
| }, |
| |
| listeners: { |
| 'transitionend': '__onTransitionEnd' |
| }, |
| |
| /** |
| * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`. |
| * @property visible |
| * @deprecated |
| */ |
| get visible() { |
| Polymer.Base._warn('`visible` is deprecated, use `opened` instead'); |
| return this.opened; |
| }, |
| |
| /** |
| * Read-only. Can auto-close if duration is a positive finite number. |
| * @property _canAutoClose |
| */ |
| get _canAutoClose() { |
| return this.duration > 0 && this.duration !== Infinity; |
| }, |
| |
| created: function() { |
| this._autoClose = null; |
| Polymer.IronA11yAnnouncer.requestAvailability(); |
| }, |
| |
| /** |
| * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`. |
| * @param {(Object|string)=} properties Properties to be set before opening the toast. |
| * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3000})` |
| */ |
| show: function(properties) { |
| if (typeof properties == 'string') { |
| properties = { text: properties }; |
| } |
| for (var property in properties) { |
| if (property.indexOf('_') === 0) { |
| Polymer.Base._warn('The property "' + property + '" is private and was not set.'); |
| } else if (property in this) { |
| this[property] = properties[property]; |
| } else { |
| Polymer.Base._warn('The property "' + property + '" is not valid.'); |
| } |
| } |
| this.open(); |
| }, |
| |
| /** |
| * Hide the toast. Same as `close()` from `IronOverlayBehavior`. |
| */ |
| hide: function() { |
| this.close(); |
| }, |
| |
| /** |
| * Called on transitions of the toast, indicating a finished animation |
| * @private |
| */ |
| __onTransitionEnd: function(e) { |
| // there are different transitions that are happening when opening and |
| // closing the toast. The last one so far is for `opacity`. |
| // This marks the end of the transition, so we check for this to determine if this |
| // is the correct event. |
| if (e && e.target === this && e.propertyName === 'opacity') { |
| if (this.opened) { |
| this._finishRenderOpened(); |
| } else { |
| this._finishRenderClosed(); |
| } |
| } |
| }, |
| |
| /** |
| * Overridden from `IronOverlayBehavior`. |
| * Called when the value of `opened` changes. |
| */ |
| _openedChanged: function() { |
| if (this._autoClose !== null) { |
| this.cancelAsync(this._autoClose); |
| this._autoClose = null; |
| } |
| if (this.opened) { |
| if (currentToast && currentToast !== this) { |
| currentToast.close(); |
| } |
| currentToast = this; |
| this.fire('iron-announce', { |
| text: this.text |
| }); |
| if (this._canAutoClose) { |
| this._autoClose = this.async(this.close, this.duration); |
| } |
| } else if (currentToast === this) { |
| currentToast = null; |
| } |
| Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments); |
| }, |
| |
| /** |
| * Overridden from `IronOverlayBehavior`. |
| */ |
| _renderOpened: function() { |
| this.classList.add('paper-toast-open'); |
| }, |
| |
| /** |
| * Overridden from `IronOverlayBehavior`. |
| */ |
| _renderClosed: function() { |
| this.classList.remove('paper-toast-open'); |
| }, |
| |
| /** |
| * @private |
| */ |
| _onFitIntoChanged: function(fitInto) { |
| this.positionTarget = fitInto; |
| } |
| |
| /** |
| * Fired when `paper-toast` is opened. |
| * |
| * @event 'iron-announce' |
| * @param {{text: string}} detail Contains text that will be announced. |
| */ |
| }); |
| })(); |
| </script> |
| </dom-module> |