third_party/polymer/v0_8/components/paper-toast/paper-toast.html

   1 <!--
   2 @license
   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.github.io/LICENSE.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/CONTRIBUTORS.txt
   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/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../paper-styles/typography.html">
  13 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
  14
  15 <!--
  16 `paper-toast` provides a subtle notification toast.
  17
  18 @group Paper Elements
  19 @element paper-toast
  20 @demo demo/index.html
  21 @hero hero.svg
  22 -->
  23 <dom-module id="paper-toast">
  24   <style>
  25     :host {
  26       display: inline-block;
  27       position: fixed;
  28
  29       background: #323232;
  30       color: #f1f1f1;
  31       min-height: 48px;
  32       min-width: 288px;
  33       padding: 16px 24px 12px;
  34       box-sizing: border-box;
  35       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  36       border-radius: 2px;
  37       bottom: 12px;
  38       left: 12px;
  39       font-size: 14px;
  40       cursor: default;
  41
  42       -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
  43       transition: visibility 0.3s, transform 0.3s;
  44
  45       -webkit-transform: translateY(100px);
  46       transform: translateY(100px);
  47
  48       visibility: hidden;
  49     }
  50
  51     :host(.capsule) {
  52       border-radius: 24px;
  53     }
  54
  55     :host(.fit-bottom) {
  56       bottom: 0;
  57       left: 0;
  58       width: 100%;
  59       min-width: 0;
  60       border-radius: 0;
  61     }
  62
  63     :host(.paper-toast-open){
  64       visibility: visible;
  65
  66       -webkit-transform: translateY(0px);
  67       transform: translateY(0px);
  68     }
  69   </style>
  70   <template>
  71     <span id="label">{{text}}</span>
  72     <content></content>
  73   </template>
  74 </dom-module>
  75 <script>
  76 (function() {
  77
  78   var PaperToast = Polymer({
  79     is: 'paper-toast',
  80
  81     properties: {
  82       /**
  83        * The duration in milliseconds to show the toast.
  84        */
  85       duration: {
  86         type: Number,
  87         value: 3000
  88       },
  89
  90       /**
  91        * The text to display in the toast.
  92        */
  93       text: {
  94         type: String,
  95         value: ""
  96       },
  97
  98       /**
  99        * True if the toast is currently visible.
 100        */
 101       visible: {
 102         type: Boolean,
 103         readOnly: true,
 104         value: false,
 105         observer: '_visibleChanged'
 106       }
 107     },
 108
 109     created: function() {
 110       Polymer.IronA11yAnnouncer.requestAvailability();
 111     },
 112
 113     ready: function() {
 114       this.async(function() {
 115         this.hide();
 116       });
 117     },
 118
 119     /**
 120      * Show the toast.
 121      * @method show
 122      */
 123     show: function() {
 124       if (PaperToast.currentToast) {
 125         PaperToast.currentToast.hide();
 126       }
 127       PaperToast.currentToast = this;
 128       this.removeAttribute('aria-hidden');
 129       this._setVisible(true);
 130       this.fire('iron-announce', {
 131         text: this.text
 132       });
 133       this.debounce('hide', this.hide, this.duration);
 134     },
 135
 136     /**
 137      * Hide the toast
 138      */
 139     hide: function() {
 140       this.setAttribute('aria-hidden', 'true');
 141       this._setVisible(false);
 142     },
 143
 144     /**
 145      * Toggle the opened state of the toast.
 146      * @method toggle
 147      */
 148     toggle: function() {
 149       if (!this.visible) {
 150         this.show();
 151       } else {
 152         this.hide();
 153       }
 154     },
 155
 156     _visibleChanged: function(visible) {
 157       this.toggleClass('paper-toast-open', visible);
 158     }
 159   });
 160
 161   PaperToast.currentToast = null;
 162
 163 })();
 164 </script>