Use modernized waitMe plugin (#3213)

package.json

@@ -50,7 +50,7 @@
     "nprogress": "0.2.0",
     "qrious": "4.0.2",
     "select2": "4.0.13",
-    "waitme": "1.19.0"
+    "modernized-waitme": "1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.21",

scripts/js/utils.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false, apiUrl: false, apiFailure: false, updateFtlInfo: false, NProgress:false */
+/* global moment:false, apiUrl: false, apiFailure: false, updateFtlInfo: false, NProgress:false, WaitMe:false */
 
 $(function () {
   // CSRF protection for AJAX requests, this has to be configured globally
@@ -635,6 +635,7 @@ function listAlert(type, items, data) {
   );
 }
 
+let waitMe = null;
 // Callback function for the loading overlay timeout
 function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
   // Try to ping FTL to see if it finished restarting
@@ -650,7 +651,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
       if (reloadAfterTimeout) {
         location.reload();
       } else {
-        $(".wrapper").waitMe("hide");
+        waitMe.hideAll();
       }
     })
     .fail(function () {
@@ -661,7 +662,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
 
 function loadingOverlay(reloadAfterTimeout = false) {
   NProgress.start();
-  $(".wrapper").waitMe({
+  waitMe = new WaitMe(".wrapper", {
     effect: "bounce",
     text: "Pi-hole is currently applying your changes...",
     bg: "rgba(0,0,0,0.7)",

scripts/lua/header.lp

@@ -99,7 +99,7 @@ is_authenticated = mg.request_info.is_authenticated
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.css')?>">
 <? end ?>
-    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe-js/waitMe.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/select2/select2.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/adminLTE/AdminLTE.min.css')?>">
 
@@ -119,6 +119,6 @@ is_authenticated = mg.request_info.is_authenticated
     <script defer src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
-    <script defer src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/waitMe-js/modernized-waitme-min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>

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=`<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);

vendor/waitMe/waitMe.min.js

@@ -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('<div class="waitMe" data-waitme_id="'+w+'"></div>');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<e){if("img"===a.effect)q='<img src="'+a.source+'">';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+('<div class="waitMe_progress_elem'+d+'"><div style="'+t+":"+c+'"></div></div>'):q+('<div class="waitMe_progress_elem'+d+'" style="'+t+":"+c+'"></div>');g=b('<div class="waitMe_progress '+
-a.effect+'" style="'+u+'">'+q+"</div>")}a.text&&(c=b.isArray(a.color)?a.color[0]:a.color,z=b('<div class="waitMe_text" style="color:'+c+";"+(""!=a.fontSize?"font-size:"+a.fontSize:"")+'">'+a.text+"</div>"));var k=f.find("> .waitMe");k&&k.remove();c=b('<div class="waitMe_content '+a.textPos+'"></div>');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<c&&("stretch"==a.effect?(g.css({height:a.maxSize+"px",width:a.maxSize+"px"}),g.find("> 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<a.waitTime&&setTimeout(function(){y()},a.waitTime);k.on("destroyed",function(){if(a.onClose&&b.isFunction(a.onClose))a.onClose(f);k.trigger("close",{el:f})});b.event.special.destroyed={remove:function(a){a.handler&&a.handler()}};return k},hide:function(){y()}};if(n[p])return n[p].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof p||!p)return n.init.apply(this,arguments)})};b(window).on("load",function(){b("body.waitMe_body").addClass("hideMe");setTimeout(function(){b("body.waitMe_body").find(".waitMe_container:not([data-waitme_id])").remove();
-b("body.waitMe_body").removeClass("waitMe_body hideMe")},200)})})(jQuery);