1 line
3.6 KiB
JavaScript
1 line
3.6 KiB
JavaScript
class WaitMe{constructor(t,e={}){this.elem="string"==typeof t?document.querySelector(t):t,this.elemClass="waitMe",this.currentID=Date.now(),this.options=Object.assign({effect:"bounce",text:"",bg:"rgba(255,255,255,0.7)",color:"#000",maxSize:"",waitTime:-1,textPos:"vertical",fontSize:"",source:"",onClose:()=>{}},e),this.init()}init(){this.waitMeObj=document.createElement("div"),this.waitMeObj.className=`${this.elemClass}`,this.waitMeObj.dataset.waitmeId=this.currentID;const t=this.getEffectElemCount(),e=this.createEffectObject(t),i=this.createWaitMeText(),s=document.createElement("div");s.className=`${this.elemClass}_content ${this.options.textPos}`,e&&s.appendChild(e),i&&s.appendChild(i),this.waitMeObj.appendChild(s),"HTML"===this.elem.tagName&&(this.elem=document.body),this.elem.classList.add(`${this.elemClass}_container`),this.elem.dataset.waitmeId=this.currentID,this.elem.appendChild(this.waitMeObj),this.setStyles(),this.handlePosition(),this.options.waitTime>0&&setTimeout((()=>this.hide()),this.options.waitTime)}getEffectElemCount(){return{none:0,bounce:3,rotateplane:1,stretch:5,orbit:2,roundBounce:12,win8:5,win8_linear:5,ios:12,facebook:3,rotation:1,timer:2,pulse:1,progressBar:1,bouncePulse:3,img:1}[this.options.effect]||0}createEffectObject(t){if(0===t)return null;const e=document.createElement("div");e.className=`${this.elemClass}_progress ${this.options.effect}`;let i="";if("img"===this.options.effect)i=`<img src="${this.options.source}">`;else for(let e=1;e<=t;++e){const t=Array.isArray(this.options.color)?this.options.color[e]||"#000":this.options.color;i+=`<div class="${this.elemClass}_progress_elem${e}" style="${this.getSpecificAttr()}:${t}"></div>`}return e.innerHTML=i,e}createWaitMeText(){if(!this.options.text)return null;const t=document.createElement("div");return t.className=`${this.elemClass}_text`,t.style.color=Array.isArray(this.options.color)?this.options.color[0]:this.options.color,this.options.fontSize&&(t.style.fontSize=this.options.fontSize),t.textContent=this.options.text,t}setStyles(){if(this.waitMeObj.style.background=this.options.bg,this.options.maxSize&&"none"!==this.options.effect){const t=this.waitMeObj.querySelector(`.${this.elemClass}_progress`);if(t){const e=t.offsetHeight;if("img"===this.options.effect)t.style.height=`${this.options.maxSize}px`,t.querySelector("img").style.maxHeight="100%";else if(this.options.maxSize<e){const i=this.options.maxSize/e-.2;let s="-50%";t.style.transform=`scale(${i}) translateX(${s})`,t.style.whiteSpace="nowrap"}}}}handlePosition(){const t=this.waitMeObj.querySelector(`.${this.elemClass}_content`);if(t.style.marginTop=`-${t.offsetHeight/2}px`,this.elem.offsetHeight>window.innerHeight){const e=e=>{t.style.top="auto",t.style.transform=`translateY(${e}px) translateZ(0)`},i=()=>{const i=window.pageYOffset,s=this.elem.offsetTop,o=window.innerHeight,n=this.elem.offsetHeight,a=t.offsetHeight;let l=i-s+o/2;l=Math.max(0,Math.min(l,n-a)),e(l)};i(),window.addEventListener("scroll",i)}}getSpecificAttr(){return["rotation","pulse"].includes(this.options.effect)?"border-color":"background-color"}hide(){this.elem.classList.remove(`${this.elemClass}_container`),this.elem.removeAttribute("data-waitme_id"),this.waitMeObj.remove(),"function"==typeof this.options.onClose&&this.options.onClose(this.elem)}static hideAll(){document.body.classList.add("hideMe"),setTimeout((()=>{document.querySelectorAll(".waitMe_container:not([data-waitme_id])").forEach((t=>t.remove())),document.body.classList.remove("waitMe_body","hideMe")}),200)}}window.addEventListener("load",WaitMe.hideAll),"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=WaitMe); |