5 lines
6.5 KiB
JavaScript
5 lines
6.5 KiB
JavaScript
/**
|
|
* BSDialog5
|
|
* @version v0.2.1.068 (2023/11/14 2028)
|
|
*/
|
|
class BSDialog05{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"bsdia5_"}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);t.#l(o.ID,o.Title,o.Size,o.ShowFooter,o.Colour),new bootstrap.Modal(document.getElementById(t.#e+o.ID),{backdrop:o.EasyClose}).show(),t.#a(o.URL)?await t.UpdateBodyRemote(o.ID,o.URL):await t.Update({ID:o.ID,Body:o.Message})}async Prompt(e){const t=this,o="prompt"+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)}async Clear(){document.querySelectorAll(".modal").forEach((function(e){const t=bootstrap.Modal.getInstance(e);t&&t.hide()}))}async Close(e){const t=this;e.startsWith(t.#e)&&(e=e.substr(t.#e.length));const o=document.getElementById(t.#e+e),l=bootstrap.Modal.getInstance(o);l&&l.hide(),o&&o.parentNode.removeChild(o)}async Update(e){const t=this;let o=Object.assign(t.Options.UpdateModal,e);const l=t.Find(o.ID);null!==l&&(this.#n(o.Title)||(l.Title.innerHTML=o.Title),this.#n(o.Body)?this.#a(o.URL)&&await t.UpdateBodyRemote(o.ID,o.URL):t.#r(l.Body,o.Body),this.#n(o.Footer)||t.#r(l.Footer,o.Footer),this.#n(o.Size)||t.#d(o.ID,"modal-"+o.Size))}async UpdateBodyRemote(e,t){const o=this;o.Exists(e)&&await fetch(t,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((t=>{o.Update({ID:e,Body:t})})).catch((t=>{o.Update({ID:e,Body:"Error: "+t})}))}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-bs-dismiss='modal']"),Modal:t[0]}:null}#l(e,t,o,l,a){const s=this;let i=s.Find(e);if(null!==i)return;let n="";n+='<div class="modal modal-'+o+' fade" id="'+s.#e+e+'" tabindex="-1" aria-labelledby="'+s.#e+e+'" aria-hidden="true" style="display:none;">',n+=' <div class="modal-dialog">',n+=' <div class="modal-content">',n+=' <div class="modal-header">',n+=' <span class="modal-title fs-5" style="cursor: default; user-select: none;">'+t+"</span>",n+=' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="user-select: none;"></button>',n+=" </div>",n+=' <div class="modal-body">',n+='<div class="row mt-3 pb-3">',n+=' <div class="col-12 text-center">',n+=' <div class="spinner-border">',n+='\t <span class="visually-hidden">Loading...</span>',n+=" </div>",n+=" </div>",n+="</div>",n+=" </div>",!0===l&&(n+=' <div class="modal-footer">',n+=' <button type="button" class="btn btn-'+a+'" data-bs-dismiss="modal">Close</button>',n+=" </div>"),n+=" </div>",n+=" </div>",n+="</div>",s.#c(s.#t,n),i=s.Find(e),null!==i&&(document.getElementById(s.#e+e).addEventListener("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+='<button type="button" class="btn btn-'+e.Colour+'" data-prompt-value="'+e.Value+'">'+e.Label+"</button>"})),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+="<p>"+t.Message+"</p>"),s+='<div class="form-group row">',o.#n(t.Textbox.Label)||t.Textbox.LabelSize<=0?(s+='<div class="col-sm-12">',s+='<input type="text" class="form-control" id="textbox'+e+'" placeholder="'+t.Textbox.Placeholder+'" value="'+t.Textbox.Value+'">',s+="</div>"):(s+='<label for="textbox'+e+'" class="col-sm-'+t.Textbox.LabelSize+' col-form-label">'+t.Textbox.Label+"</label>",s+='<div class="col-sm-'+t.Textbox.BoxSize+'">',s+='<input type="text" class="form-control" id="textbox'+e+'" placeholder="'+t.Textbox.Placeholder+'" value="'+t.Textbox.Value+'">',s+="</div>"),s+="</div>";let i="";t.Buttons.forEach((function(e){i+='<button type="button" class="btn btn-'+e.Colour+'" data-prompt-value="'+e.Value+'">'+e.Label+"</button>"})),o.Update({ID:e,Body:s,Footer:i});const n=o.Find(e),r=n.Footer.querySelectorAll("button");r[0].addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault();const a=n.Body.querySelectorAll("input")[0].value;await o.Close(e),l(a)})),r[1].addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault(),await o.Close(e),l("")})),n.Close.forEach((async function(t){t.addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault(),await 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))}#a(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){for(let e=0;e<o.#o.length;e++)l.Modal.classList.remove(o.#o[e]);l.Modal.classList.add(t)}}#u(e){const t=this,o=t.Find(e);if(null===o)return;let l=0;for(let e=0;e<t.#o.length;e++)if(o.Modal.classList.contains(t.#o[e])){o.Modal.classList.remove(t.#o[e]),l=e;break}l++,l>t.#o.length-1&&(l=0),o.Modal.classList.add(t.#o[l])}}var BSDialog5=new BSDialog05; |