5 lines
7.1 KiB
JavaScript
5 lines
7.1 KiB
JavaScript
/**
|
|
* BSDialog5
|
|
* @version v0.2.2.003 (2024/01/22 2037)
|
|
*/
|
|
class BSDialog05{constructor(){}get#e(){return"bsdia5_"}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({ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0,EasyClose:!0,IsMovable:!0},e);t.#o(l.ID,l.Title,l.Size,l.ShowFooter,l.IsMovable,l.Colour),new bootstrap.Modal(document.getElementById(t.#e+l.ID),{backdrop:l.EasyClose}).show(),t.#s(l.URL)?await t.UpdateBodyRemote(l.ID,l.URL):await t.Update({ID:l.ID,Body:l.Message})}async Prompt(e){const t=this,l="prompt"+Math.floor(1e4*Math.random())+1e3,o=Object.assign({Type:"button",Title:"",Message:"",Size:"md",EasyClose:!0,IsMovable:!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}},e);return"textbox"===o.Type?await t.#a(l,o):await t.#i(l,o)}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 l=document.getElementById(t.#e+e),o=bootstrap.Modal.getInstance(l);o&&o.hide(),l&&l.parentNode.removeChild(l)}async Update(e){const t=this;let l=Object.assign({ID:null,Title:null,Body:null,URL:null,Footer:null,Size:null},e);const o=t.Find(l.ID);null!==o&&(this.#n(l.Title)||(o.Title.innerHTML=l.Title),this.#n(l.Body)?this.#s(l.URL)&&await t.UpdateBodyRemote(l.ID,l.URL):t.#r(o.Body,l.Body),this.#n(l.Footer)||t.#r(o.Footer,l.Footer),this.#n(l.Size)||t.#d(l.ID,"modal-"+l.Size))}async UpdateBodyRemote(e,t){const l=this;l.Exists(e)&&await fetch(t,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((t=>{l.Update({ID:e,Body:t})})).catch((t=>{l.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}#o(e,t,l,o,s,a){const i=this;let n=i.Find(e);if(null!==n)return;let r="";if(r+='<div class="modal modal-'+l+' fade" id="'+i.#e+e+'" tabindex="-1" aria-labelledby="'+i.#e+e+'" aria-hidden="true" style="display:none;">',r+=' <div class="modal-dialog">',r+=' <div class="modal-content">',r+=' <div class="modal-header">',r+=' <span class="modal-title fs-5" style="cursor: default; user-select: none;">'+t+"</span>",r+=' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="user-select: none;"></button>',r+=" </div>",r+=' <div class="modal-body">',r+='<div class="row mt-3 pb-3">',r+=' <div class="col-12 text-center">',r+=' <div class="spinner-border">',r+='\t <span class="visually-hidden">Loading...</span>',r+=" </div>",r+=" </div>",r+="</div>",r+=" </div>",!0===o&&(r+=' <div class="modal-footer">',r+=' <button type="button" class="btn btn-'+a+'" data-bs-dismiss="modal">Close</button>',r+=" </div>"),r+=" </div>",r+=" </div>",r+="</div>",i.#c(i.#t,r),n=i.Find(e),null!==n&&(document.getElementById(i.#e+e).addEventListener("hidden.bs.modal",(function(t){i.Close(e)})),n.Title.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault(),i.#u(e)})),s)){const e=n.Modal.querySelectorAll(".modal-dialog")[0];let t=!1,l={X:0,Y:0},o={X:0,Y:0};n.Title.addEventListener("mousedown",(function(s){1!=s.buttons||t||(o={X:s.clientX,Y:s.clientY},l={X:i.#n(e.style.left)?0:parseInt(e.style.left.replace("px","")),Y:i.#n(e.style.top)?0:parseInt(e.style.top.replace("px",""))},t=!0,n.Title.style.cursor="move",s.preventDefault())})),document.addEventListener("mouseup",(function(e){t&&(t=!1,n.Title.style.cursor="default")})),document.addEventListener("mousemove",(function(s){1==s.buttons&&t&&(e.style.left=s.clientX-o.X+l.X+"px",e.style.top=s.clientY-o.Y+l.Y+"px")}))}}async#i(e,t){const l=this;return await new Promise((async(o,s)=>{await l.Show({ID:e,Title:t.Title,Message:t.Message,Size:t.Size,EasyClose:t.EasyClose,IsMovable:t.IsMovable});let a="";t.Buttons.forEach((function(e){a+='<button type="button" class="btn btn-'+e.Colour+'" data-prompt-value="'+e.Value+'">'+e.Label+"</button>"})),l.Update({ID:e,Footer:a});const i=l.Find(e);i.Footer.querySelectorAll("button").forEach((function(t){t.addEventListener("click",(function(s){s.stopPropagation(),s.preventDefault();const a=t.getAttribute("data-prompt-value");l.Close(e),o(a)}))})),i.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),l.Close(e),o("")}))}))}))}async#a(e,t){const l=this;return await new Promise((async(o,s)=>{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,IsMovable:t.IsMovable});let a="";l.#n(t.Message)||(a+="<p>"+t.Message+"</p>"),a+='<div class="form-group row">',l.#n(t.Textbox.Label)||t.Textbox.LabelSize<=0?(a+='<div class="col-sm-12">',a+='<input type="text" class="form-control" id="textbox'+e+'" placeholder="'+t.Textbox.Placeholder+'" value="'+t.Textbox.Value+'">',a+="</div>"):(a+='<label for="textbox'+e+'" class="col-sm-'+t.Textbox.LabelSize+' col-form-label">'+t.Textbox.Label+"</label>",a+='<div class="col-sm-'+t.Textbox.BoxSize+'">',a+='<input type="text" class="form-control" id="textbox'+e+'" placeholder="'+t.Textbox.Placeholder+'" value="'+t.Textbox.Value+'">',a+="</div>"),a+="</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>"})),l.Update({ID:e,Body:a,Footer:i});const n=l.Find(e),r=n.Footer.querySelectorAll("button");r[0].addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault();const s=n.Body.querySelectorAll("input")[0].value;await l.Close(e),o(s)})),r[1].addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault(),await l.Close(e),o("")})),n.Close.forEach((async function(t){t.addEventListener("click",(async function(t){t.stopPropagation(),t.preventDefault(),await 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))}#s(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){for(let e=0;e<l.#l.length;e++)o.Modal.classList.remove(l.#l[e]);o.Modal.classList.add(t)}}#u(e){const t=this,l=t.Find(e);if(null===l)return;let o=0;for(let e=0;e<t.#l.length;e++)if(l.Modal.classList.contains(t.#l[e])){l.Modal.classList.remove(t.#l[e]),o=e;break}o++,o>t.#l.length-1&&(o=0),l.Modal.classList.add(t.#l[o])}}var BSDialog5=new BSDialog05; |