| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | class Notification { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     constructor(elem) { | 
					
						
							|  |  |  |         this.elem = elem; | 
					
						
							|  |  |  |         this.type = elem.getAttribute('notification'); | 
					
						
							|  |  |  |         this.textElem = elem.querySelector('span'); | 
					
						
							|  |  |  |         this.autohide = this.elem.hasAttribute('data-autohide'); | 
					
						
							| 
									
										
										
										
											2017-08-27 21:31:34 +08:00
										 |  |  |         window.$events.listen(this.type, text => { | 
					
						
							| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  |             this.show(text); | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  |         elem.addEventListener('click', this.hide.bind(this)); | 
					
						
							|  |  |  |         if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent); | 
					
						
							| 
									
										
										
										
											2017-08-10 04:33:00 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  |         this.hideCleanup = this.hideCleanup.bind(this); | 
					
						
							| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     show(textToShow = '') { | 
					
						
							| 
									
										
										
										
											2017-08-10 04:33:00 +08:00
										 |  |  |         this.elem.removeEventListener('transitionend', this.hideCleanup); | 
					
						
							| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  |         this.textElem.textContent = textToShow; | 
					
						
							|  |  |  |         this.elem.style.display = 'block'; | 
					
						
							|  |  |  |         setTimeout(() => { | 
					
						
							|  |  |  |             this.elem.classList.add('showing'); | 
					
						
							|  |  |  |         }, 1); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |         if (this.autohide) setTimeout(this.hide.bind(this), 2000); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     hide() { | 
					
						
							|  |  |  |         this.elem.classList.remove('showing'); | 
					
						
							| 
									
										
										
										
											2017-08-10 04:33:00 +08:00
										 |  |  |         this.elem.addEventListener('transitionend', this.hideCleanup); | 
					
						
							|  |  |  |     } | 
					
						
							| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2017-08-10 04:33:00 +08:00
										 |  |  |     hideCleanup() { | 
					
						
							|  |  |  |         this.elem.style.display = 'none'; | 
					
						
							|  |  |  |         this.elem.removeEventListener('transitionend', this.hideCleanup); | 
					
						
							| 
									
										
										
										
											2017-08-07 04:08:03 +08:00
										 |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | module.exports = Notification; |