5 lines
7.9 KiB
JavaScript
5 lines
7.9 KiB
JavaScript
/**
|
|
* BSDialog5
|
|
* @version v0.2.1.005 (2023/11/14 2028)
|
|
*/
|
|
var BSDialog5={Default:function(){return{ShowOptions:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0,EasyClose:!0},PromptOptions:{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}},UpdateOptions:{ID:null,Title:null,Body:null,BodyURL:null,Footer:null,Size:null}}},Show:async function(t){const e=this,o=Object.assign(e.Default().ShowOptions,t);e.id=o.ID,e.pfx="bsdia5_",e.addModal(o.ID,o.Title,o.Size,o.ShowFooter,o.Colour),new bootstrap.Modal(document.getElementById(e.pfx+o.ID),{backdrop:o.EasyClose}).show(),null==o.URL?await e.Update({ID:o.ID,Body:o.Message}):e.isNullOrWhitespace(o.URL)?await e.Update({ID:o.ID,Body:URL}):o.URL.startsWith("http://")||o.URL.startsWith("https://")||o.URL.startsWith("/")?await e.UpdateBodyRemote(o.ID,o.URL):await e.Update({ID:o.ID,Body:URL})},Prompt:async function(t){const e=this,o="prompt"+Math.floor(1e4*Math.random())+1e3,l=Object.assign(e.Default().PromptOptions,t);return"textbox"===l.Type?await e.showTextboxPrompt(o,l):await e.showButtonPrompt(o,l)},Clear:function(){this.GetBody().querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let e=this.Find(t);null!==e&&(e.Modal.parentNode.removeChild(e.Modal),e=this.Find(t),null===e&&this.removeBackdrop())},Update:async function(t){const e=this;let o=Object.assign(e.Default().UpdateOptions,t);const l=e.Find(o.ID);null!==l&&(this.isNullOrWhitespace(o.Title)||(l.Title.innerHTML=o.Title),this.isNullOrWhitespace(o.Body)||e.html(l.Body,o.Body),this.isNullOrWhitespace(o.BodyURL)||o.BodyURL.startsWith("http://")||o.BodyURL.startsWith("https://")||o.BodyURL.startsWith("/")||(o.BodyURL=null),this.isNullOrWhitespace(o.BodyURL)||await e.UpdateBodyRemote(o.ID,o.BodyURL),this.isNullOrWhitespace(o.Footer)||e.html(l.Footer,o.Footer),this.isNullOrWhitespace(o.Size)||(l.Modal.classList.remove("modal-sm"),l.Modal.classList.remove("modal-md"),l.Modal.classList.remove("modal-lg"),l.Modal.classList.remove("modal-xl"),l.Modal.classList.add("modal-"+o.Size)))},UpdateBodyRemote:async function(t,e){const o=this;o.Exists(t)&&await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((e=>{o.Update({ID:t,Body:e})})).catch((e=>{o.Update({ID:t,Body:"Error: "+e})}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){const e=this.GetBody().querySelectorAll("#"+this.pfx+t+".modal");return e?e.length<=0?null:{Title:e[0].querySelectorAll(".modal-title")[0],Header:e[0].querySelectorAll(".modal-header")[0],Body:e[0].querySelectorAll(".modal-body")[0],Footer:e[0].querySelectorAll(".modal-footer")[0],Close:e[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:e[0]}:null},GetBody:function(){return document.getElementsByTagName("body")[0]},addModal:function(t,e,o,l,a){const s=this;let i=s.Find(t);if(null!==i)return;let d="";d+='<div class="modal modal-'+o+' fade" id="'+s.pfx+t+'" tabindex="-1" aria-labelledby="'+s.pfx+t+'" aria-hidden="true" style="display:none;">',d+=' <div class="modal-dialog">',d+=' <div class="modal-content">',d+=' <div class="modal-header">',d+=' <span class="modal-title fs-5" style="cursor: default; user-select: none;">'+e+"</span>",d+=' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="user-select: none;"></button>',d+=" </div>",d+=' <div class="modal-body">',d+='<div class="row mt-3 pb-3">',d+=' <div class="col-12 text-center">',d+=' <div class="spinner-border">',d+='\t <span class="visually-hidden">Loading...</span>',d+=" </div>",d+=" </div>",d+="</div>",d+=" </div>",!0===l&&(d+=' <div class="modal-footer">',d+=' <button type="button" class="btn btn-'+a+'" data-bs-dismiss="modal">Close</button>',d+=" </div>"),d+=" </div>",d+=" </div>",d+="</div>",s.appendHtml(s.GetBody(),d),i=s.Find(t),null!==i&&(document.getElementById(s.pfx+t).addEventListener("hidden.bs.modal",(function(e){s.Close(t)})),i.Title.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault(),s.toggleSize()})))},showButtonPrompt:async function(t,e){const o=this;return await new Promise((async(l,a)=>{await o.Show({ID:t,Title:e.Title,Message:e.Message,Size:e.Size,EasyClose:e.EasyClose});let s="";e.Buttons.forEach((function(t){s+='<button type="button" class="btn btn-'+t.Colour+'" data-prompt-value="'+t.Value+'">'+t.Label+"</button>"})),o.Update({ID:t,Footer:s});const i=o.Find(t);i.Footer.querySelectorAll("button").forEach((function(e){e.addEventListener("click",(function(a){a.stopPropagation(),a.preventDefault();const s=e.getAttribute("data-prompt-value");o.Close(t),l(s)}))})),i.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")}))}))}))},showTextboxPrompt:async function(t,e){const o=this;return await new Promise((async(l,a)=>{e.Buttons=[{Label:"OK",Value:"",Colour:"primary"},{Label:"Cancel",Value:"",Colour:"secondary"}],await o.Show({ID:t,Title:e.Title,Message:e.Message,Size:e.Size,EasyClose:e.EasyClose});let s="";o.isNullOrWhitespace(e.Message)||(s+="<p>"+e.Message+"</p>"),s+='<div class="form-group row">',o.isNullOrWhitespace(e.Textbox.Label)||e.Textbox.LabelSize<=0?(s+='<div class="col-sm-12">',s+='<input type="text" class="form-control" id="textbox'+t+'" placeholder="'+e.Textbox.Placeholder+'" value="'+e.Textbox.Value+'">',s+="</div>"):(s+='<label for="textbox'+t+'" class="col-sm-'+e.Textbox.LabelSize+' col-form-label">'+e.Textbox.Label+"</label>",s+='<div class="col-sm-'+e.Textbox.BoxSize+'">',s+='<input type="text" class="form-control" id="textbox'+t+'" placeholder="'+e.Textbox.Placeholder+'" value="'+e.Textbox.Value+'">',s+="</div>"),s+="</div>";let i="";e.Buttons.forEach((function(t){i+='<button type="button" class="btn btn-'+t.Colour+'" data-prompt-value="'+t.Value+'">'+t.Label+"</button>"})),o.Update({ID:t,Body:s,Footer:i});const d=o.Find(t),n=d.Footer.querySelectorAll("button");n[0].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault();const a=d.Body.querySelectorAll("input")[0].value;o.Close(t),l(a)})),n[1].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")})),d.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")}))}))}))},appendHtml:function(t,e){let o=document.createElement("template");o.innerHTML=e,o=o.content.firstChild,t.appendChild(o)},html:function(t,e){jQuery?jQuery(t).html(e):t.innerHTML=e},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){const t=this;if(t.GetBody().querySelectorAll(".modal-backdrop").length<=0)return;if(t.GetBody().querySelectorAll(".modal").length>0)return;let e=t.GetBody().querySelectorAll(".modal-backdrop")[0];e.parentNode.removeChild(e),t.GetBody().classList.remove("modal-open"),t.GetBody().style.overflow=null},toggleSize:function(){let t=this.Find(this.id);null!==t&&(t.Modal.classList.contains("modal-sm")?(t.Modal.classList.remove("modal-sm"),t.Modal.classList.add("modal-md")):t.Modal.classList.contains("modal-md")?(t.Modal.classList.remove("modal-md"),t.Modal.classList.add("modal-lg")):t.Modal.classList.contains("modal-lg")?(t.Modal.classList.remove("modal-lg"),t.Modal.classList.add("modal-xl")):t.Modal.classList.contains("modal-xl")?(t.Modal.classList.remove("modal-xl"),t.Modal.classList.add("modal-xxl")):t.Modal.classList.contains("modal-xxl")?(t.Modal.classList.remove("modal-xxl"),t.Modal.classList.add("modal-sm")):(t.Modal.classList.remove("modal-sm"),t.Modal.classList.remove("modal-md"),t.Modal.classList.remove("modal-lg"),t.Modal.classList.remove("modal-xl"),t.Modal.classList.remove("modal-xxl"),t.Modal.classList.add("modal-md")))}}; |