diff --git a/package.json b/package.json index e779385df..addef3cc3 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "nprogress": "0.2.0", "qrious": "4.0.2", "select2": "4.0.13", - "waitme": "1.19.0" + "waitme-js": "1.0.0" }, "devDependencies": { "autoprefixer": "^10.4.20", diff --git a/scripts/js/utils.js b/scripts/js/utils.js index d83cdf2c5..7836a6b4c 100644 --- a/scripts/js/utils.js +++ b/scripts/js/utils.js @@ -657,7 +657,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) { if (reloadAfterTimeout) { location.reload(); } else { - $(".wrapper").waitMe("hide"); + WaitMe.hideAll(); } }) .fail(function () { @@ -668,7 +668,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) { function loadingOverlay(reloadAfterTimeout = false) { NProgress.start(); - $(".wrapper").waitMe({ + new WaitMe(".wrapper", { effect: "bounce", text: "Pi-hole is currently applying your changes...", bg: "rgba(0,0,0,0.7)", diff --git a/scripts/lua/header.lp b/scripts/lua/header.lp index 3b5379c8a..3c47b50cf 100644 --- a/scripts/lua/header.lp +++ b/scripts/lua/header.lp @@ -121,5 +121,5 @@ if startsWith(scriptname, 'groups') then - - + + diff --git a/vendor/waitMe-js/modernized-waitme-min.js b/vendor/waitMe-js/modernized-waitme-min.js new file mode 100644 index 000000000..40658abdc --- /dev/null +++ b/vendor/waitMe-js/modernized-waitme-min.js @@ -0,0 +1 @@ +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=``;else for(let e=1;e<=t;++e){const t=Array.isArray(this.options.color)?this.options.color[e]||"#000":this.options.color;i+=`
`}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.maxSizewindow.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); \ No newline at end of file diff --git a/vendor/waitMe/waitMe.min.css b/vendor/waitMe-js/waitMe.min.css similarity index 100% rename from vendor/waitMe/waitMe.min.css rename to vendor/waitMe-js/waitMe.min.css diff --git a/vendor/waitMe/waitMe.min.js b/vendor/waitMe/waitMe.min.js deleted file mode 100644 index fdb67289e..000000000 --- a/vendor/waitMe/waitMe.min.js +++ /dev/null @@ -1,13 +0,0 @@ -/* -waitMe - 1.19 [31.10.17] -Author: vadimsva -Github: https://github.com/vadimsva/waitMe -*/ -(function(b){b.fn.waitMe=function(p){return this.each(function(){function y(){var a=f.attr("data-waitme_id");f.removeClass("waitMe_container").removeAttr("data-waitme_id");f.find('.waitMe[data-waitme_id="'+a+'"]').remove()}var f=b(this),z,g,e,r=!1,t="background-color",u="",q="",v,a,w,n={init:function(){function n(a){l.css({top:"auto",transform:"translateY("+a+"px) translateZ(0)"})}a=b.extend({effect:"bounce",text:"",bg:"rgba(255,255,255,0.7)",color:"#000",maxSize:"",waitTime:-1,textPos:"vertical", -fontSize:"",source:"",onClose:function(){}},p);w=(new Date).getMilliseconds();v=b('
');switch(a.effect){case "none":e=0;break;case "bounce":e=3;break;case "rotateplane":e=1;break;case "stretch":e=5;break;case "orbit":e=2;r=!0;break;case "roundBounce":e=12;break;case "win8":e=5;r=!0;break;case "win8_linear":e=5;r=!0;break;case "ios":e=12;break;case "facebook":e=3;break;case "rotation":e=1;t="border-color";break;case "timer":e=2;var c=b.isArray(a.color)? -a.color[0]:a.color;u="border-color:"+c;break;case "pulse":e=1;t="border-color";break;case "progressBar":e=1;break;case "bouncePulse":e=3;break;case "img":e=1}""!==u&&(u+=";");if(0';else for(var d=1;d<=e;++d)b.isArray(a.color)?(c=a.color[d],void 0==c&&(c="#000")):c=a.color,q=r?q+('
'):q+('
');g=b('
'+q+"
")}a.text&&(c=b.isArray(a.color)?a.color[0]:a.color,z=b('
'+a.text+"
"));var k=f.find("> .waitMe");k&&k.remove();c=b('
');c.append(g,z);v.append(c);"HTML"==f[0].tagName&&(f=b("body"));f.addClass("waitMe_container").attr("data-waitme_id",w).append(v);k=f.find("> .waitMe");var l=f.find(".waitMe_content");k.css({background:a.bg}); -""!==a.maxSize&&"none"!=a.effect&&(c=g.outerHeight(),g.outerWidth(),"img"===a.effect?(g.css({height:a.maxSize+"px"}),g.find(">img").css({maxHeight:"100%"}),l.css({marginTop:-l.outerHeight()/2+"px"})):a.maxSize div").css({margin:"0 5%"})):(c=a.maxSize/c-.2,d="-50%","roundBounce"==a.effect?(d="-75%",a.text&&(d="75%")):"win8"==a.effect||"timer"==a.effect||"orbit"==a.effect?(d="-20%",a.text&&(d="20%")):"ios"==a.effect&& -(d="-15%",a.text&&(d="15%")),"rotation"==a.effect&&a.text&&(d="75%"),g.css({transform:"scale("+c+") translateX("+d+")",whiteSpace:"nowrap"}))));l.css({marginTop:-l.outerHeight()/2+"px"});if(f.outerHeight()>b(window).height()){c=b(window).scrollTop();var h=l.outerHeight(),m=f.offset().top,x=f.outerHeight();d=c-m+b(window).height()/2;0>d&&(d=Math.abs(d));0<=d-h&&d+h<=x?m-c>b(window).height()/2&&(d=h):d=c>m+x-h?c-m-h:c-m+h;n(d);b(document).scroll(function(){var a=b(window).scrollTop()-m+b(window).height()/ -2;0<=a-h&&a+h<=x&&n(a)})}0