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      eventDelegates: {
56        trackstart: 'trackStart',
57        track: 'track',
58        trackend: 'trackEnd',
59        transitionend: 'transitionEnd'
60      },
61
62      narrowModeChanged: function() {
63        this.classList.toggle('fit-bottom', this.narrowMode);
64      },
65
66      openedChanged: function() {
67        if (this.opened) {
68          this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duration);
69        } else {
70          this.dismissJob && this.dismissJob.stop();
71          this.dismiss();
72        }
73      },
74
75      /**
76       * Toggle the opened state of the toast.
77       * @method toggle
78       */
79      toggle: function() {
80        this.opened = !this.opened;
81      },
82
83      /**
84       * Show the toast for the specified duration
85       * @method show
86       */
87      show: function() {
88        if (currentToast) {
89          currentToast.dismiss();
90        }
91        currentToast = this;
92        this.opened = true;
93      },
94
95      /**
96       * Dismiss the toast and hide it.
97       * @method dismiss
98       */
99      dismiss: function() {
100        if (this.dragging) {
101          this.shouldDismiss = true;
102        } else {
103          this.opened = false;
104          if (currentToast === this) {
105            currentToast = null;
106          }
107        }
108      },
109
110      trackStart: function(e) {
111        if (!this.swipeDisabled) {
112          e.preventTap();
113          this.vertical = e.yDirection;
114          this.w = this.offsetWidth;
115          this.h = this.offsetHeight;
116          this.dragging = true;
117          this.classList.add('dragging');
118        }
119      },
120
121      track: function(e) {
122        if (this.dragging) {
123          var s = this.style;
124          if (this.vertical) {
125            var y = e.dy;
126            s.opacity = (this.h - Math.abs(y)) / this.h;
127            s.webkitTransform = s.transform =  'translate3d(0, ' + y + 'px, 0)';
128          } else {
129            var x = e.dx;
130            s.opacity = (this.w - Math.abs(x)) / this.w;
131            s.webkitTransform = s.transform = 'translate3d(' + x + 'px, 0, 0)';
132          }
133        }
134      },
135
136      trackEnd: function(e) {
137        if (this.dragging) {
138          this.classList.remove('dragging');
139          this.style.opacity = null;
140          this.style.webkitTransform = this.style.transform = null;
141          var cl = this.classList;
142          if (this.vertical) {
143            cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0);
144            cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0);
145          } else {
146            cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0);
147            cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0);
148          }
149          this.dragging = false;
150        }
151      },
152
153      transitionEnd: function() {
154        var cl = this.classList;
155        if (cl.contains('fade-out-right') || cl.contains('fade-out-left') ||
156            cl.contains('fade-out-down') || cl.contains('fade-out-up')) {
157          this.dismiss();
158          cl.remove('fade-out-right', 'fade-out-left',
159              'fade-out-down', 'fade-out-up');
160        } else if (this.shouldDismiss) {
161          this.dismiss();
162        }
163        this.shouldDismiss = false;
164      }
165
166    });
167
168  })();
169
170