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