Vanilla JS Notify (toast)

N2.js

class N2 {

// based on Rick Hopkins MooTools Notify	
//<button onclick="n2 = new N2({title:'My Title',content:'My body'})">My N2 Notify</button>
//<button onclick="n2 = new N2({text:'MyCombined Title::My combined body',classes:['inlineNotice']})">My N2 text Notify</button>
//<button onclick="n2 = new N2({text:'MyCombined Title::My combined body',classes:['notify-warn']})">My N2 text Warn</button>
//<button onclick="n2 = new N2({text:'MyCombined Title::My combined body',classes:['notify-alert']})">My N2 text Alert</button>

	constructor (opts) {
	        
		this.id='Notify_' + Math.random(0, 10000);
		this.text = false;
        this.title = 'Alert';
        this.content = 'Message';
        this.classes = '';
		this.delay = 5000;
  		this.cstyle = `		               
.notify { position:fixed; top:15px; right:15px; width:250px; color:#FFF;z-index:10000;padding:.5em; background:rgba(0,0,0,.8);border-radius:.5em;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.notify div.notify-title { font-weight:bold; padding:8px 8px 0 8px;}
.notify div.notify-text { font-size:smaller; padding:0 8px 8px 8px;  }
.notify-close {position:absolute;top:2px;right:2px;height:auto;width:auto;background:transparent;border:0;border-radius:50%;color:#fff;padding:4px 8px;text-align:right;}
.notify-close:hover {color:#000;background:#fff}
.notify-notice {color:#669900}
.notify-warn {color:#FF0000}
.notify-highlight {background:#F5F5F5}
.notify-alert {color:rgb(243,102,33)}
.inlineNotice {color:#669900}.inlineWarn {color:#FF0000}.inlineHighlight {background-color:#F5F5F5}
`
;
		this.setOptions(opts);
		this.createDiv(); 
	
	}

	setOptions(opts){
		if (!opts.text && !opts.content) return false;
		if(opts.content!=undefined) this.content = opts.content; 
		if(opts.title!=undefined) this.title = opts.title;
		if(opts.classes!=undefined) this.classes = opts.classes; 
		if(opts.text!=undefined) {
			this.text = opts.text.split('::');
			if (this.text.length > 1){
				this.title=this.text[0];
				this.content=this.text[1];
			} else { this.title = this.text[0]; }
		}
		console.log('body:' + this.content);
		console.log('title:' + this.title);
		console.log('text:' + this.text);
	}

// create the banner
	createDiv(){
		var bodytag = document.getElementsByTagName('body')[0];
	// check style exists
		if(document.getElementById('Notifystyle')==undefined) {
		  var head = document.head;
			var style = document.createElement('style');
			style.setAttribute('id', 'Notifystyle');
			style.innerHTML = this.cstyle;
			head.appendChild(style);
		}
	// add container
		var div = document.createElement('div');
		div.setAttribute('role','alert');
		div.setAttribute('aria-live','polite');
		div.setAttribute('class','notify');
		div.setAttribute('id',this.id);
				
		var titlediv = document.createElement('div');
		
		var titleclass= 'notify-title ' + this.classes;
		titlediv.setAttribute('class',titleclass);
		titlediv.innerHTML = this.title;
		var n2id = this.id;	
		var closebutton = document.createElement('button');
		closebutton.setAttribute('class','notify-close');
		closebutton.addEventListener("click", function(){ n2.closeid(n2id); });
		closebutton.innerHTML = 'x';
		
		titlediv.appendChild(closebutton);
		
		div.appendChild(titlediv);
		
		var qfbody = document.createElement('div');
		qfbody.setAttribute('class','notify-text');
		qfbody.innerHTML = this.content;
		div.appendChild(qfbody);

		console.log(this.delay);
		setTimeout(function(){	n2.closeid(n2id); },this.delay)
		
	// get the other notify boxes, and move them dow
		let msgs = document.getElementsByClassName("notify");
		for(let i = 0; i < msgs.length; i++) {
			 var mid = msgs[i].id;
			 var midheight = msgs[i].offsetHeight;
			 var midrect = msgs[i].getBoundingClientRect();
			if (msgs[i].id != this.id) { 
				msgs[i].style['top'] = midrect.top + midheight + 10; 
			}
		}
	// insert
		bodytag.insertBefore(div,bodytag.firstChild); 

	}	
	// close by id
	closeid(id) {
		var element = document.getElementById(id);
		if(element!=undefined) element.parentNode.removeChild(element);
	}
		
	close() {
		var element = document.getElementById(this.id);
		if(element!=undefined) element.parentNode.removeChild(element);
	}
}