From ecd6dd156d5c460516b3f2328bec0a4ee4e31fb9 Mon Sep 17 00:00:00 2001 From: Ray Date: Fri, 8 Dec 2023 22:19:39 +0000 Subject: [PATCH] Added Pop() to close top-most modal Fixed stacking modal causes scrolling and focus failure --- bsdialog4.js | 50 +++++++++++++++++++++++------------------------- bsdialog4.min.js | 4 ++-- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/bsdialog4.js b/bsdialog4.js index 95f1a55..146f8ed 100644 --- a/bsdialog4.js +++ b/bsdialog4.js @@ -1,6 +1,6 @@ /** * BSDialog4 - * @version v0.1.5.038 (2023/11/18 19:40) + * @version v0.1.6.015 (2023/12/08 22:04) */ class BSDialog4 { constructor() { @@ -102,15 +102,15 @@ class BSDialog4 { } } - Clear() { + async Clear() { const a = this; - document.querySelectorAll('.modal').forEach(function(e) { - $(e).modal('hide'); + document.querySelectorAll('.modal').forEach(async function(e) { + await a.Close(e.getAttribute("id")); }); } - Close(id) { + async Close(id) { const a = this; if (id.toString().startsWith(a.#prefix)) { @@ -120,10 +120,28 @@ class BSDialog4 { const node = document.getElementById(a.#prefix + id); if (node) { - $(node).modal('hide'); + await $(node).modal('hide'); node.parentNode.removeChild(node); } + + if (document.querySelectorAll('.modal').length > 0) { + if (!a.#body.classList.contains("modal-open")) { + a.#body.classList.add("modal-open"); + + a.#body.style.paddingRight = "17px"; + } + } + } + + async Pop() { + const a = this; + + if (document.querySelectorAll('.modal').length > 0) { + const id = document.querySelectorAll('.modal')[0].getAttribute("id"); + + await a.Close(id); + } } async Update(options) { @@ -419,26 +437,6 @@ class BSDialog4 { return (e.trim().length <= 0); } - #removeBackdrop() { - const a = this; - - if (a.#body.querySelectorAll(".modal-backdrop").length <= 0) { - return; - } - - if (a.#body.querySelectorAll(".modal").length > 0) { - return; - } - - a.#body.querySelectorAll(".modal-backdrop").forEach(function(e){ - e.parentNode.removeChild(e); - }); - - // unlock background - a.#body.classList.remove("modal-open"); - a.#body.style.overflow = null; - } - async #retrieveURL(url) { return await new Promise(async (resolve) => { await fetch(url, { diff --git a/bsdialog4.min.js b/bsdialog4.min.js index 8efb97b..1c73da9 100644 --- a/bsdialog4.min.js +++ b/bsdialog4.min.js @@ -1,5 +1,5 @@ /** * BSDialog4 - * @version v0.1.5.038 (2023/11/18 19:40) + * @version v0.1.6.015 (2023/12/08 22:04) */ -class BSDialog4{constructor(){}get Options(){return{ShowModal:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0,EasyClose:!0},ShowPrompt:{Type:"button",Title:"",Message:"",Size:"md",EasyClose:!0,Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}],Textbox:{Label:"",LabelSize:4,Placeholder:"",Value:"",BoxSize:8}},UpdateModal:{ID:null,Title:null,Body:null,URL:null,Footer:null,Size:null}}}get#e(){return"bsdia4_"}get#t(){return document.getElementsByTagName("body")[0]}get#o(){return["modal-sm","modal-md","modal-lg","modal-xl","modal-xxl"]}async Show(e){const t=this,o=Object.assign(t.Options.ShowModal,e);if(t.addModal(o.ID,o.Title,o.Size,o.ShowFooter,o.Colour),$("#"+t.#e+o.ID).modal({backdrop:o.EasyClose,show:!0}),t.#l(o.URL)){const e=await t.#a(o.URL);await t.Update({ID:o.ID,Body:e})}else await t.Update({ID:o.ID,Body:o.Message})}async Prompt(e){const t=this,o=Math.floor(1e4*Math.random())+1e3,l=Object.assign(t.Options.ShowPrompt,e);return"textbox"===l.Type?await t.#s(o,l):await t.#i(o,l)}Clear(){document.querySelectorAll(".modal").forEach((function(e){$(e).modal("hide")}))}Close(e){const t=this;e.toString().startsWith(t.#e)&&(e=e.toString().substr(t.#e.length));const o=document.getElementById(t.#e+e);o&&($(o).modal("hide"),o.parentNode.removeChild(o))}async Update(e){const t=this;let o=Object.assign(t.Options.UpdateModal,e);const l=t.Find(o.ID);if(null!==l){if(t.#n(o.Title)||(l.Title.innerHTML=o.Title),t.#n(o.Body)||t.#r(l.Body,o.Body),this.#n(o.Body)){if(this.#l(o.URL)){const e=await t.#a(o.URL);await t.Update({ID:o.ID,Body:e})}}else t.#r(l.Body,o.Body);t.#n(o.Footer)||t.#r(l.Footer,o.Footer),t.#n(o.Size)||t.#d(o.ID,"modal-"+o.Size)}}Exists(e){return null!==this.Find(e)}Find(e){const t=this.#t.querySelectorAll("#"+this.#e+e+".modal");return t?t.length<=0?null:{Title:t[0].querySelectorAll(".modal-title")[0],Header:t[0].querySelectorAll(".modal-header")[0],Body:t[0].querySelectorAll(".modal-body")[0],Footer:t[0].querySelectorAll(".modal-footer")[0],Close:t[0].querySelectorAll("[data-dismiss='modal']"),Modal:t[0]}:null}addModal(e,t,o,l,a){const s=this;let i=s.Find(e);if(null!==i)return;let n="";n+='",s.#c(s.#t,n),i=s.Find(e),null!==i&&($("#"+s.#e+e).on("hidden.bs.modal",(function(t){s.Close(e)})),i.Title.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault(),s.#u(e)})))}async#i(e,t){const o=this;return await new Promise((async(l,a)=>{await o.Show({ID:e,Title:t.Title,Message:t.Message,Size:t.Size,EasyClose:t.EasyClose});let s="";t.Buttons.forEach((function(e){s+='"})),o.Update({ID:e,Footer:s});const i=o.Find(e);i.Footer.querySelectorAll("button").forEach((function(t){t.addEventListener("click",(function(a){a.stopPropagation(),a.preventDefault();const s=t.getAttribute("data-prompt-value");o.Close(e),l(s)}))})),i.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),o.Close(e),l("")}))}))}))}async#s(e,t){const o=this;return await new Promise((async(l,a)=>{t.Buttons=[{Label:"OK",Value:"",Colour:"primary"},{Label:"Cancel",Value:"",Colour:"secondary"}],await o.Show({ID:e,Title:t.Title,Message:t.Message,Size:t.Size,EasyClose:t.EasyClose});let s="";o.#n(t.Message)||(s+="

"+t.Message+"

"),s+='
',o.#n(t.Textbox.Label)||t.Textbox.LabelSize<=0?(s+='
',s+='',s+="
"):(s+='",s+='
',s+='',s+="
"),s+="
";let i="";t.Buttons.forEach((function(e){i+='"})),o.Update({ID:e,Body:s,Footer:i});const n=o.Find(e),r=n.Footer.querySelectorAll("button");r[0].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault();const a=n.Body.querySelectorAll("input")[0].value;o.Close(e),l(a)})),r[1].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),o.Close(e),l("")})),n.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),o.Close(e),l("")}))}))}))}#c(e,t){let o=document.createElement("template");o.innerHTML=t,o=o.content.firstChild,e.appendChild(o)}#r(e,t){jQuery?jQuery(e).html(t):e.innerHTML=t}#n(e){return void 0===e||(null==e||(0==e||e.trim().length<=0))}#p(){const e=this;e.#t.querySelectorAll(".modal-backdrop").length<=0||e.#t.querySelectorAll(".modal").length>0||(e.#t.querySelectorAll(".modal-backdrop").forEach((function(e){e.parentNode.removeChild(e)})),e.#t.classList.remove("modal-open"),e.#t.style.overflow=null)}async#a(e){return await new Promise((async t=>{await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((e=>{t(e)})).catch((e=>{t("Error: "+e)}))}))}#l(e){return!this.#n(e)&&!!(e.startsWith("http://")||e.startsWith("https://")||e.startsWith("/"))}#d(e,t){const o=this,l=o.Find(e);if(null===l)return;let a=l.Modal.querySelectorAll(".modal-dialog")[0];for(let e=0;et.#o.length-1&&(a=0),l.classList.add(t.#o[a])}}var BSDialog=new BSDialog4; \ No newline at end of file +class BSDialog4{constructor(){}get Options(){return{ShowModal:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0,EasyClose:!0},ShowPrompt:{Type:"button",Title:"",Message:"",Size:"md",EasyClose:!0,Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}],Textbox:{Label:"",LabelSize:4,Placeholder:"",Value:"",BoxSize:8}},UpdateModal:{ID:null,Title:null,Body:null,URL:null,Footer:null,Size:null}}}get#e(){return"bsdia4_"}get#t(){return document.getElementsByTagName("body")[0]}get#l(){return["modal-sm","modal-md","modal-lg","modal-xl","modal-xxl"]}async Show(e){const t=this,l=Object.assign(t.Options.ShowModal,e);if(t.addModal(l.ID,l.Title,l.Size,l.ShowFooter,l.Colour),$("#"+t.#e+l.ID).modal({backdrop:l.EasyClose,show:!0}),t.#o(l.URL)){const e=await t.#a(l.URL);await t.Update({ID:l.ID,Body:e})}else await t.Update({ID:l.ID,Body:l.Message})}async Prompt(e){const t=this,l=Math.floor(1e4*Math.random())+1e3,o=Object.assign(t.Options.ShowPrompt,e);return"textbox"===o.Type?await t.#s(l,o):await t.#i(l,o)}async Clear(){const e=this;document.querySelectorAll(".modal").forEach((async function(t){await e.Close(t.getAttribute("id"))}))}async Close(e){const t=this;e.toString().startsWith(t.#e)&&(e=e.toString().substr(t.#e.length));const l=document.getElementById(t.#e+e);l&&(await $(l).modal("hide"),l.parentNode.removeChild(l)),document.querySelectorAll(".modal").length>0&&(t.#t.classList.contains("modal-open")||(t.#t.classList.add("modal-open"),t.#t.style.paddingRight="17px"))}async Pop(){const e=this;if(document.querySelectorAll(".modal").length>0){const t=document.querySelectorAll(".modal")[0].getAttribute("id");await e.Close(t)}}async Update(e){const t=this;let l=Object.assign(t.Options.UpdateModal,e);const o=t.Find(l.ID);if(null!==o){if(t.#n(l.Title)||(o.Title.innerHTML=l.Title),t.#n(l.Body)||t.#r(o.Body,l.Body),this.#n(l.Body)){if(this.#o(l.URL)){const e=await t.#a(l.URL);await t.Update({ID:l.ID,Body:e})}}else t.#r(o.Body,l.Body);t.#n(l.Footer)||t.#r(o.Footer,l.Footer),t.#n(l.Size)||t.#d(l.ID,"modal-"+l.Size)}}Exists(e){return null!==this.Find(e)}Find(e){const t=this.#t.querySelectorAll("#"+this.#e+e+".modal");return t?t.length<=0?null:{Title:t[0].querySelectorAll(".modal-title")[0],Header:t[0].querySelectorAll(".modal-header")[0],Body:t[0].querySelectorAll(".modal-body")[0],Footer:t[0].querySelectorAll(".modal-footer")[0],Close:t[0].querySelectorAll("[data-dismiss='modal']"),Modal:t[0]}:null}addModal(e,t,l,o,a){const s=this;let i=s.Find(e);if(null!==i)return;let n="";n+='",s.#c(s.#t,n),i=s.Find(e),null!==i&&($("#"+s.#e+e).on("hidden.bs.modal",(function(t){s.Close(e)})),i.Title.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault(),s.#u(e)})))}async#i(e,t){const l=this;return await new Promise((async(o,a)=>{await l.Show({ID:e,Title:t.Title,Message:t.Message,Size:t.Size,EasyClose:t.EasyClose});let s="";t.Buttons.forEach((function(e){s+='"})),l.Update({ID:e,Footer:s});const i=l.Find(e);i.Footer.querySelectorAll("button").forEach((function(t){t.addEventListener("click",(function(a){a.stopPropagation(),a.preventDefault();const s=t.getAttribute("data-prompt-value");l.Close(e),o(s)}))})),i.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),l.Close(e),o("")}))}))}))}async#s(e,t){const l=this;return await new Promise((async(o,a)=>{t.Buttons=[{Label:"OK",Value:"",Colour:"primary"},{Label:"Cancel",Value:"",Colour:"secondary"}],await l.Show({ID:e,Title:t.Title,Message:t.Message,Size:t.Size,EasyClose:t.EasyClose});let s="";l.#n(t.Message)||(s+="

"+t.Message+"

"),s+='
',l.#n(t.Textbox.Label)||t.Textbox.LabelSize<=0?(s+='
',s+='',s+="
"):(s+='",s+='
',s+='',s+="
"),s+="
";let i="";t.Buttons.forEach((function(e){i+='"})),l.Update({ID:e,Body:s,Footer:i});const n=l.Find(e),r=n.Footer.querySelectorAll("button");r[0].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault();const a=n.Body.querySelectorAll("input")[0].value;l.Close(e),o(a)})),r[1].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),l.Close(e),o("")})),n.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),l.Close(e),o("")}))}))}))}#c(e,t){let l=document.createElement("template");l.innerHTML=t,l=l.content.firstChild,e.appendChild(l)}#r(e,t){jQuery?jQuery(e).html(t):e.innerHTML=t}#n(e){return void 0===e||(null==e||(0==e||e.trim().length<=0))}async#a(e){return await new Promise((async t=>{await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((e=>{t(e)})).catch((e=>{t("Error: "+e)}))}))}#o(e){return!this.#n(e)&&!!(e.startsWith("http://")||e.startsWith("https://")||e.startsWith("/"))}#d(e,t){const l=this,o=l.Find(e);if(null===o)return;let a=o.Modal.querySelectorAll(".modal-dialog")[0];for(let e=0;et.#l.length-1&&(a=0),o.classList.add(t.#l[a])}}var BSDialog=new BSDialog4; \ No newline at end of file -- 2.45.2