OLD | NEW |
| (Empty) |
1 | |
2 | |
3 (function() { | |
4 | |
5 var currentToast; | |
6 | |
7 Polymer('paper-toast', { | |
8 | |
9 /** | |
10 * The text shows in a toast. | |
11 * | |
12 * @attribute text | |
13 * @type string | |
14 * @default '' | |
15 */ | |
16 text: '', | |
17 | |
18 /** | |
19 * The duration in milliseconds to show the toast. | |
20 * | |
21 * @attribute duration | |
22 * @type number | |
23 * @default 3000 | |
24 */ | |
25 duration: 3000, | |
26 | |
27 /** | |
28 * Set opened to true to show the toast and to false to hide it. | |
29 * | |
30 * @attribute opened | |
31 * @type boolean | |
32 * @default false | |
33 */ | |
34 opened: false, | |
35 | |
36 /** | |
37 * Min-width when the toast changes to narrow layout. In narrow layout, | |
38 * the toast fits at the bottom of the screen when opened. | |
39 * | |
40 * @attribute responsiveWidth | |
41 * @type string | |
42 * @default '480px' | |
43 */ | |
44 responsiveWidth: '480px', | |
45 | |
46 /** | |
47 * If true, the toast can't be swiped. | |
48 * | |
49 * @attribute swipeDisabled | |
50 * @type boolean | |
51 * @default false | |
52 */ | |
53 swipeDisabled: false, | |
54 | |
55 /** | |
56 * By default, the toast will close automatically if the user taps | |
57 * outside it or presses the escape key. Disable this behavior by setting | |
58 * the `autoCloseDisabled` property to true. | |
59 * | |
60 * @attribute autoCloseDisabled | |
61 * @type boolean | |
62 * @default false | |
63 */ | |
64 autoCloseDisabled: false, | |
65 | |
66 narrowMode: false, | |
67 | |
68 eventDelegates: { | |
69 trackstart: 'trackStart', | |
70 track: 'track', | |
71 trackend: 'trackEnd', | |
72 transitionend: 'transitionEnd' | |
73 }, | |
74 | |
75 narrowModeChanged: function() { | |
76 this.classList.toggle('fit-bottom', this.narrowMode); | |
77 if (this.opened) { | |
78 this.$.overlay.resizeHandler(); | |
79 } | |
80 }, | |
81 | |
82 openedChanged: function() { | |
83 if (this.opened) { | |
84 this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duratio
n); | |
85 } else { | |
86 this.dismissJob && this.dismissJob.stop(); | |
87 this.dismiss(); | |
88 } | |
89 }, | |
90 | |
91 /** | |
92 * Toggle the opened state of the toast. | |
93 * @method toggle | |
94 */ | |
95 toggle: function() { | |
96 this.opened = !this.opened; | |
97 }, | |
98 | |
99 /** | |
100 * Show the toast for the specified duration | |
101 * @method show | |
102 */ | |
103 show: function() { | |
104 if (currentToast) { | |
105 currentToast.dismiss(); | |
106 } | |
107 currentToast = this; | |
108 this.opened = true; | |
109 }, | |
110 | |
111 /** | |
112 * Dismiss the toast and hide it. | |
113 * @method dismiss | |
114 */ | |
115 dismiss: function() { | |
116 if (this.dragging) { | |
117 this.shouldDismiss = true; | |
118 } else { | |
119 this.opened = false; | |
120 if (currentToast === this) { | |
121 currentToast = null; | |
122 } | |
123 } | |
124 }, | |
125 | |
126 trackStart: function(e) { | |
127 if (!this.swipeDisabled) { | |
128 e.preventTap(); | |
129 this.vertical = e.yDirection; | |
130 this.w = this.offsetWidth; | |
131 this.h = this.offsetHeight; | |
132 this.dragging = true; | |
133 this.classList.add('dragging'); | |
134 } | |
135 }, | |
136 | |
137 track: function(e) { | |
138 if (this.dragging) { | |
139 var s = this.style; | |
140 if (this.vertical) { | |
141 var y = e.dy; | |
142 s.opacity = (this.h - Math.abs(y)) / this.h; | |
143 s.transform = s.webkitTransform = 'translate3d(0, ' + y + 'px, 0)'; | |
144 } else { | |
145 var x = e.dx; | |
146 s.opacity = (this.w - Math.abs(x)) / this.w; | |
147 s.transform = s.webkitTransform = 'translate3d(' + x + 'px, 0, 0)'; | |
148 } | |
149 } | |
150 }, | |
151 | |
152 trackEnd: function(e) { | |
153 if (this.dragging) { | |
154 this.classList.remove('dragging'); | |
155 this.style.opacity = ''; | |
156 this.style.transform = this.style.webkitTransform = ''; | |
157 var cl = this.classList; | |
158 if (this.vertical) { | |
159 cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0); | |
160 cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0); | |
161 } else { | |
162 cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0); | |
163 cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0); | |
164 } | |
165 this.dragging = false; | |
166 } | |
167 }, | |
168 | |
169 transitionEnd: function() { | |
170 var cl = this.classList; | |
171 if (cl.contains('fade-out-right') || cl.contains('fade-out-left') || | |
172 cl.contains('fade-out-down') || cl.contains('fade-out-up')) { | |
173 this.dismiss(); | |
174 cl.remove('fade-out-right', 'fade-out-left', | |
175 'fade-out-down', 'fade-out-up'); | |
176 } else if (this.shouldDismiss) { | |
177 this.dismiss(); | |
178 } | |
179 this.shouldDismiss = false; | |
180 } | |
181 | |
182 }); | |
183 | |
184 })(); | |
185 | |
OLD | NEW |