bsdialog4/bsdialog4.min.js

/**
 * BSDialog4
 * @version v0.1.4.031 (2023/11/03 22:42)
 */
var BSDialog={Show:async function(options){const a=this,_options=Object.assign(a.Options.ShowModal,options);if(a.id=_options.ID,a.pfx="bsdia4_",a.body=document.getElementsByTagName("body")[0],a.addBackdrop(),a.addModal(_options.ID,_options.Title,_options.Size,_options.ShowFooter,_options.EasyClose,_options.Colour),null==_options.URL)await a.Update({ID:_options.ID,Body:_options.Message});else if(a.isNullOrWhitespace(_options.URL))await a.Update({ID:_options.ID,Body:_options.URL});else if(_options.URL.startsWith("http://")||_options.URL.startsWith("https://")||_options.URL.startsWith("/")){let response=await a.retrieveURL(_options.URL);await a.Update({ID:_options.ID,Body:response})}else await a.Update({ID:_options.ID,Body:_options.URL})},Prompt:async function(options){const a=this;let id=Math.floor(1e4*Math.random())+1e3;const _options=Object.assign(a.Options.ShowPrompt,options);switch(_options.Type){case"textbox":return await a.showTextboxPrompt(id,_options);case"button":default:return await a.showButtonPrompt(id,_options)}},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(e){e.parentNode.removeChild(e)})),this.removeBackdrop()},Close:function(id){let modal=this.Find(id);null!==modal&&(modal.Modal.parentNode.removeChild(modal.Modal),modal=this.Find(id),null===modal&&this.removeBackdrop())},Update:async function(options){const a=this;let _options=Object.assign(a.Options.UpdateModal,options);const modal=a.Find(_options.ID);if(null!==modal){if(this.isNullOrWhitespace(_options.Title)||(modal.Title.innerHTML=_options.Title),this.isNullOrWhitespace(_options.Body)||a.html(modal.Body,_options.Body),this.isNullOrWhitespace(_options.BodyURL)||_options.BodyURL.startsWith("http://")||_options.BodyURL.startsWith("https://")||_options.BodyURL.startsWith("/")||(_options.BodyURL=null),!this.isNullOrWhitespace(_options.BodyURL)){let response=await a.retrieveURL(_options.BodyURL);await a.Update({ID:_options.ID,Body:response})}this.isNullOrWhitespace(_options.Footer)||a.html(modal.Footer,_options.Footer),this.isNullOrWhitespace(_options.Size)||modal.Modal.querySelectorAll(".modal-dialog").forEach((function(e){e.classList.forEach((function(e2){"modal-dialog"!=e2&&e2.startsWith("modal-")&&e.classList.remove(e2)})),e.classList.add("modal-"+_options.Size)}))}},Exists:function(id){return null!==this.Find(id)},Find:function(id){const a=this,modal=a.body.querySelectorAll("#"+a.pfx+id+".modal");return modal?modal.length<=0?null:{Title:modal[0].querySelectorAll(".modal-title")[0],Header:modal[0].querySelectorAll(".modal-header")[0],Body:modal[0].querySelectorAll(".modal-body")[0],Footer:modal[0].querySelectorAll(".modal-footer")[0],Close:modal[0].querySelectorAll("[data-dismiss='modal']"),Modal:modal[0]}:null},Options:{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,BodyURL:null,Footer:null,Size:null},ShowToast:{ID:null,Title:"",Message:"",Size:"md"}},addBackdrop:function(){const a=this;a.body.querySelectorAll(".modal-backdrop").length>0||(a.appendHtml(a.body,'<div class="modal-backdrop fade show"></div>'),a.body.classList.add("modal-open"),a.body.style.overflow="hidden")},addModal:function(id,title,size,showFooter,easyClose,closeColour){const a=this;let modal=a.Find(id);if(null!==modal)return;let html="";if(html+='<div class="modal fade show d-block" id="'+a.pfx+id+'" tabindex="-1">',html+='  <div class="modal-dialog modal-'+size+'">',html+='    <div class="modal-content">',html+='      <div class="modal-header">',html+='        <span class="modal-title font-weight-bold" style="cursor: default; user-select: none;" aria-label="Title">'+title+"</span>",html+='        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="user-select: none;">',html+='          <span aria-hidden="true">&times;</span>',html+="        </button>",html+="      </div>",html+='      <div class="modal-body">',html+='<div class="row mt-3 pb-3">',html+='  <div class="col-12 text-center">',html+='    <div class="spinner-border" role="status">',html+='\t     <span class="sr-only">Loading...</span>',html+="    </div>",html+="  </div>",html+="</div>",html+="      </div>",!0===showFooter&&(html+='      <div class="modal-footer">',html+='        <button type="button" class="btn btn-'+closeColour+'" data-dismiss="modal">Close</button>',html+="      </div>"),html+="    </div>",html+="  </div>",html+="</div>",a.appendHtml(a.body,html),modal=a.Find(id),null!==modal){if(!0===easyClose){modal.Modal.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),a.Close(id)}));const modalContent=undefined;modal.Modal.querySelectorAll(".modal-content")[0].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault()}))}modal.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),a.Close(id)}))})),modal.Title.addEventListener("dblclick",(function(e){e.stopPropagation(),e.preventDefault(),a.toggleSize()}))}},showButtonPrompt:async function(id,options){const a=this;return await new Promise(async(resolve,reject)=>{await a.Show({ID:id,Title:options.Title,Message:options.Message,Size:options.Size,EasyClose:options.EasyClose});let html="";options.Buttons.forEach((function(e){html+='<button type="button" class="btn btn-'+e.Colour+'" data-prompt-value="'+e.Value+'">'+e.Label+"</button>"})),a.Update({ID:id,Footer:html});const modal=a.Find(id);modal.Footer.querySelectorAll("button").forEach((function(button){button.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault();const value=button.getAttribute("data-prompt-value");a.Close(id),resolve(value)}))})),modal.Close.forEach((function(sender){sender.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),a.Close(id),resolve("")}))}))})},showTextboxPrompt:async function(id,options){const a=this;return await new Promise(async(resolve,reject)=>{options.Buttons=[{Label:"OK",Value:"",Colour:"primary"},{Label:"Cancel",Value:"",Colour:"secondary"}],await a.Show({ID:id,Title:options.Title,Message:options.Message,Size:options.Size,EasyClose:options.EasyClose});let body="";a.isNullOrWhitespace(options.Message)||(body+="<p>"+options.Message+"</p>"),body+='<div class="form-group row">',a.isNullOrWhitespace(options.Textbox.Label)||options.Textbox.LabelSize<=0?(body+='<div class="col-sm-12">',body+='<input type="text" class="form-control" id="textbox'+id+'" placeholder="'+options.Textbox.Placeholder+'" value="'+options.Textbox.Value+'">',body+="</div>"):(body+='<label for="textbox'+id+'" class="col-sm-'+options.Textbox.LabelSize+' col-form-label">'+options.Textbox.Label+"</label>",body+='<div class="col-sm-'+options.Textbox.BoxSize+'">',body+='<input type="text" class="form-control" id="textbox'+id+'" placeholder="'+options.Textbox.Placeholder+'" value="'+options.Textbox.Value+'">',body+="</div>"),body+="</div>";let footer="";options.Buttons.forEach((function(e){footer+='<button type="button" class="btn btn-'+e.Colour+'" data-prompt-value="'+e.Value+'">'+e.Label+"</button>"})),a.Update({ID:id,Body:body,Footer:footer});const modal=a.Find(id),buttons=modal.Footer.querySelectorAll("button");buttons[0].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault();const value=modal.Body.querySelectorAll("input")[0].value;a.Close(id),resolve(value)})),buttons[1].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),a.Close(id),resolve("")})),modal.Close.forEach((function(sender){sender.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),a.Close(id),resolve("")}))}))})},appendHtml:function(el,html){let node=document.createElement("template");node.innerHTML=html,node=node.content.firstChild,el.appendChild(node)},html:function(el,newHtml){jQuery?jQuery(el).html(newHtml):el.innerHTML=newHtml},isNullOrWhitespace:function(e){return void 0===e||(null==e||(0==e||e.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;if(this.body.querySelectorAll(".modal").length>0)return;let backdrop=this.body.querySelectorAll(".modal-backdrop")[0];backdrop.parentNode.removeChild(backdrop),this.body.classList.remove("modal-open"),this.body.style.overflow=null},retrieveURL:async function(url){return await new Promise(async resolve=>{await fetch(url,{cache:"no-cache",credentials:"same-origin"}).then(data=>data.text()).then(data=>{resolve(data)}).catch(error=>{resolve("Error: "+error)})})},toggleSize:function(){const a=this;let modal=a.Find(a.id);if(null===modal)return;let modalDialog=modal.Modal.querySelectorAll(".modal-dialog")[0];modalDialog.classList.contains("modal-sm")?a.Update({ID:a.id,Size:"md"}):modalDialog.classList.contains("modal-md")?a.Update({ID:a.id,Size:"lg"}):modalDialog.classList.contains("modal-lg")?a.Update({ID:a.id,Size:"xl"}):modalDialog.classList.contains("modal-xl")?a.Update({ID:a.id,Size:"xxl"}):modalDialog.classList.contains("modal-xxl")?a.Update({ID:a.id,Size:"sm"}):a.Update({ID:a.id,Size:"md"})},Create:async function(id,title,url,size){await this.Show({ID:id,Title:title,Message:url,URL:url,Size:size,Colour:"secondary"})},UpdateTitle:function(id,title){this.Update({ID:id,Title:title})},UpdateSize:function(id,size){this.Update({ID:id,Size:size})},UpdateBody:function(id,content){this.Update({ID:id,Body:content})},UpdateFooter:function(id,content){this.Update({ID:id,Footer:content})},Toast:async function(options){const a=this,_options=Object.assign(a.Options.ShowToast,options);await this.Show({ID:_options.ID,Title:_options.Title,Message:_options.Message,URL:null,Size:_options.Size,Colour:"secondary",ShowFooter:!1})},ShowToast:function(id,title,message,size){this.Toast({ID:id,Title:title,Message:message,Size:size})}};