OLD | NEW |
| (Empty) |
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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.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> | |
OLD | NEW |