| 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 |