redscorpion-utils/lib/message/index.js

A good JavaScript tools

const message={background:'',outside:'',inside:'',insideSetTime:'',body:'',time:0,styleMessageBoxOutside:'position:fixed;top:40px;left:50%;transform:translate(-50%, -50%);z-index:2000;',styleMessageBoxInside:'margin-top:10px;color:white;min-width:120px;padding:6px 16px;box-sizing:border-box;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.2);font-size:13px;',styleDisplay:'justify-content:center;align-items:center;display:flex;display:-webkit-flex;',run(msg='success',type='success',time=1500){this.time=time;this.background=this.backgroundCheck(type);this.body=document.body;const id=`inside_box${Date.now()}`;let outsideShow=document.getElementById('message_box_show');if(outsideShow!=null){this.inside=document.createElement('div');this.inside.setAttribute('style',this.styleMessageBoxInside+this.styleDisplay);this.inside.setAttribute('id',id);this.inside.style.backgroundColor=this.background;this.inside.innerHTML=`<span>${ msg }</span>`;outsideShow.appendChild(this.inside)}else{this.outside=document.createElement('div');this.outside.setAttribute('id','message_box_outside');this.outside.setAttribute('style',this.styleMessageBoxOutside+this.styleDisplay);outsideShow=document.createElement('div');outsideShow.setAttribute('id','message_box_show');this.inside=document.createElement('div');this.inside.setAttribute('style',this.styleMessageBoxInside+this.styleDisplay);this.inside.setAttribute('id',id);this.inside.style.backgroundColor=this.background;this.inside.innerHTML=`<span>${ msg }</span>`;outsideShow.appendChild(this.inside);this.outside.appendChild(outsideShow);this.body.appendChild(this.outside)}this[id]=this.insideTime(this.inside,outsideShow);this.boxShowTime(this.inside,id,outsideShow)},boxShowTime(inside,insideSetTime,outsideShow){inside.addEventListener('mouseleave',()=>{this[insideSetTime]=this.insideTime(inside,outsideShow)});inside.addEventListener('mouseenter',()=>{clearTimeout(this[insideSetTime])})},insideTime(inside,outsideShow){const insideSetTime=setTimeout(()=>{outsideShow.removeChild(inside)},this.time);return insideSetTime},backgroundCheck(type){if(type==='info'){return '#909399'}if(type==='primary'){return '#2d8cf0'}if(type==='success'){return '#19be6b'}if(type==='warning'){return '#ff9900'}if(type==='error'){return '#ed4014'}}};export const info=(msg,time)=>message.run(msg,'info',time);export const primary=(msg,time)=>message.run(msg,'primary',time);export const success=(msg,time)=>message.run(msg,'success',time);export const warning=(msg,time)=>message.run(msg,'warning',time);export const error=(msg,time)=>message.run(msg,'error',time);export default{info,primary,success,warning,error};