Rework to simplify and minimise jQuery dependency #1
@ -1,65 +0,0 @@
|
||||
.bsdia5-backdrop {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
z-index:1024;
|
||||
background-color:#000000;
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
.bsdia5 {
|
||||
position: fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
z-index:1024;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bsdia5-body {
|
||||
border-radius:5px;
|
||||
background-color:#ffffff;
|
||||
margin:2em auto;
|
||||
}
|
||||
|
||||
.bsdia5-sm > .bsdia5-body {
|
||||
width:30%;
|
||||
}
|
||||
.bsdia5-md > .bsdia5-body {
|
||||
width:50%;
|
||||
}
|
||||
.bsdia5-lg > .bsdia5-body {
|
||||
width:75%;
|
||||
}
|
||||
.bsdia5-xl > .bsdia5-body {
|
||||
width:90%;
|
||||
}
|
||||
|
||||
.bsdia5-header {
|
||||
display:block;
|
||||
padding:0 0 0 1em;
|
||||
border-style:solid;
|
||||
border-width:0 0 1px 0;
|
||||
border-color:#efefef;
|
||||
}
|
||||
.bsdia5-header strong {
|
||||
cursor:default;
|
||||
font-size:1.2em;
|
||||
line-height:3em;
|
||||
}
|
||||
.bsdia5-header button {
|
||||
background-color:transparent;
|
||||
border:none;
|
||||
padding:1em;
|
||||
float:right;
|
||||
}
|
||||
|
||||
.bsdia5-content {
|
||||
padding:1em 1em 2em 1em;
|
||||
}
|
||||
.bsdia5-content .text-center {
|
||||
text-align:center;
|
||||
}
|
||||
406
bsdialog5.js
406
bsdialog5.js
@ -1,296 +1,246 @@
|
||||
/**
|
||||
* BSDialog5
|
||||
* @version v0.1.0.001 (2022/10/15 1713)
|
||||
* @version v0.1.1.063 (2023/07/275 1713)
|
||||
*/
|
||||
var BSDialog5 = {
|
||||
Create: function (id, title, url, size) {
|
||||
Create: async function (id, title, url, size) {
|
||||
var a = this;
|
||||
|
||||
a.id = id;
|
||||
a.title = title;
|
||||
a.url = url;
|
||||
a.size = a.sanitiseSize(size);
|
||||
a.pfx = "bsdia5_";
|
||||
a.body = document.getElementsByTagName("body")[0];
|
||||
|
||||
a.addBackdrop(a.id);
|
||||
a.addModal(a.id);
|
||||
a.addBackdrop();
|
||||
a.addModal(id, title, size);
|
||||
|
||||
if (a.isNullOrWhitespace(a.url)) {
|
||||
a.Update(a.id, "No URL specified");
|
||||
if (a.isNullOrWhitespace(url)) {
|
||||
a.UpdateBody(id, "");
|
||||
} else {
|
||||
a.Update(a.id, null);
|
||||
|
||||
fetch(a.url, {
|
||||
cache: 'no-cache',
|
||||
credentials: 'same-origin'
|
||||
}).then(data => data.text()).then(data => {
|
||||
a.Update(a.id, data);
|
||||
}).catch((error) => {
|
||||
a.Update(a.id, "Error: " + error);
|
||||
}).then(function(){
|
||||
// do nothing
|
||||
});
|
||||
await a.UpdateBodyRemote(id, url);
|
||||
}
|
||||
},
|
||||
Clear: function () {
|
||||
var a = this;
|
||||
this.body.querySelectorAll(".modal").forEach(function(e) {
|
||||
e.parentNode.removeChild(e);
|
||||
});
|
||||
|
||||
// remove all backdrop
|
||||
var result = document.body.querySelectorAll(".bsdia5-backdrop");
|
||||
for (var i=0; i< result.length; i++)
|
||||
{
|
||||
result[i].parentNode.removeChild(result[i]);
|
||||
}
|
||||
|
||||
// remove all dialog
|
||||
result = document.body.querySelectorAll(".bsdia5");
|
||||
for (var i=0; i< result.length; i++)
|
||||
{
|
||||
result[i].parentNode.removeChild(result[i]);
|
||||
}
|
||||
|
||||
// lock background
|
||||
document.getElementsByTagName("body")[0].style.overflow = "auto";
|
||||
this.removeBackdrop();
|
||||
},
|
||||
Close: function (id) {
|
||||
let model = this.Find(id);
|
||||
if (model === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
modal.Modal.forEach(function(e) {
|
||||
e.parentNode.removeChild(e);
|
||||
});
|
||||
|
||||
model = this.Find(id);
|
||||
if (model !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.removeBackdrop();
|
||||
},
|
||||
UpdateTitle: function (id, title) {
|
||||
let model = this.Find(id);
|
||||
if (model === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
model.Title.forEach(function(e) {
|
||||
e.innerHTML = title;
|
||||
});
|
||||
},
|
||||
UpdateSize: function (id, size) {
|
||||
let model = this.Find(id);
|
||||
if (model === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
model.Modal.forEach(function(e) {
|
||||
e.classList.remove("modal-sm");
|
||||
e.classList.remove("modal-md");
|
||||
e.classList.remove("modal-lg");
|
||||
e.classList.remove("modal-xl");
|
||||
e.classList.add("modal-" + size);
|
||||
});
|
||||
},
|
||||
UpdateBody: function (id, content) {
|
||||
var a = this;
|
||||
|
||||
// remove modal
|
||||
var modal = a.getModal(id);
|
||||
if (modal !== null)
|
||||
{
|
||||
modal.parentNode.removeChild(modal);
|
||||
let model = a.Find(id);
|
||||
if (model === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// remove backdrop
|
||||
var backdrop = a.getBackdrop(id);
|
||||
if (backdrop !== null)
|
||||
{
|
||||
backdrop.parentNode.removeChild(backdrop);
|
||||
model.Body.forEach(function(e) {
|
||||
a.html(e, content);
|
||||
});
|
||||
},
|
||||
UpdateBodyRemote: async function (id, url) {
|
||||
var a = this;
|
||||
|
||||
if (!a.Exists(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// lock background
|
||||
document.getElementsByTagName("body")[0].style.overflow = "auto";
|
||||
await fetch(url, {
|
||||
cache: 'no-cache',
|
||||
credentials: 'same-origin'
|
||||
}).then(data => data.text()).then(data => {
|
||||
a.UpdateBody(id, data);
|
||||
}).catch((error) => {
|
||||
a.UpdateBody(id, "Error: " + error);
|
||||
});
|
||||
},
|
||||
Exists: function (id) {
|
||||
return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0);
|
||||
return (this.Find(id) !== null);
|
||||
},
|
||||
Find: function (id) {
|
||||
let modal = this.body.querySelectorAll("#" + this.pfx + id + ".modal");
|
||||
if (!modal) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (modal.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
Title: modal[0].querySelectorAll(".modal-title"),
|
||||
Body: modal[0].querySelectorAll(".modal-body"),
|
||||
Footer: modal[0].querySelectorAll(".modal-footer"),
|
||||
Close: modal[0].querySelectorAll("[data-bs-dismiss='modal']"),
|
||||
Modal: modal
|
||||
};
|
||||
},
|
||||
ShowToast: function (id, title, message, size) {
|
||||
var a = this;
|
||||
|
||||
a.id = id;
|
||||
a.title = title;
|
||||
a.size = a.sanitiseSize(size);
|
||||
|
||||
a.addBackdrop(a.id);
|
||||
a.addModal(a.id);
|
||||
|
||||
a.Update(a.id, message);
|
||||
this.Create(id, title, null, size);
|
||||
this.UpdateBody(id, message);
|
||||
},
|
||||
ToggleSize: function (id) {
|
||||
var a = this;
|
||||
|
||||
var modal = a.getModal(id);
|
||||
if (modal == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (modal.classList.contains("bsdia5-md")) {
|
||||
modal.classList.remove("bsdia5-md");
|
||||
modal.classList.add("bsdia5-lg");
|
||||
} else if (modal.classList.contains("bsdia5-lg")) {
|
||||
modal.classList.remove("bsdia5-lg");
|
||||
modal.classList.add("bsdia5-xl");
|
||||
} else if (modal.classList.contains("bsdia5-xl")) {
|
||||
modal.classList.remove("bsdia5-xl");
|
||||
modal.classList.add("bsdia5-sm");
|
||||
} else if (modal.classList.contains("bsdia5-sm")) {
|
||||
modal.classList.remove("bsdia5-sm");
|
||||
modal.classList.add("bsdia5-md");
|
||||
}
|
||||
},
|
||||
Update: function (id, html) {
|
||||
var a = this;
|
||||
|
||||
var content = a.getModalContent(id);
|
||||
if (content === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (html === null) {
|
||||
// $(content).html('<span class="text-center">Loading...</span>');
|
||||
$(content).html('<div class="row mt-3 pb-3"><div class="col-12 text-center"><div class="spinner-border"><span class="visually-hidden">Loading...</span></div></div></div>');
|
||||
} else {
|
||||
$(content).html(html);
|
||||
}
|
||||
},
|
||||
UpdateTitle: function (id, text) {
|
||||
var a = this;
|
||||
|
||||
var header = a.getModalHeader(id);
|
||||
if (header === null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var result = header.querySelectorAll("strong");
|
||||
if (result.length <= 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
result[0].innerHTML = text;
|
||||
},
|
||||
addBackdrop: function (id) {
|
||||
var a = this;
|
||||
addBackdrop: function () {
|
||||
let a = this;
|
||||
|
||||
// don't allow duplicates
|
||||
if (a.hasBackdrop(id)) {
|
||||
if (a.body.querySelectorAll(".modal-backdrop").length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
a.appendToBody('<div id="bsdia5-bck' + id + '" class="bsdia5-backdrop"></div>');
|
||||
a.appendHtml(a.body, '<div class="modal-backdrop fade show"></div>');
|
||||
|
||||
// lock background
|
||||
document.getElementsByTagName("body")[0].style.overflow = "hidden";
|
||||
a.body.classList.add("modal-open");
|
||||
a.body.style.overflow = "hidden";
|
||||
|
||||
// close
|
||||
var backdropElList = document.body.querySelectorAll("#bsdia5-bck" + id);
|
||||
if (backdropElList.length > 0) {
|
||||
backdropElList[0].addEventListener("click", function(){
|
||||
let backdrop = a.body.querySelectorAll(".modal-backdrop")[0];
|
||||
backdrop.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
a.Clear();
|
||||
});
|
||||
}
|
||||
},
|
||||
addModal: function (id) {
|
||||
addModal: function (id, title, size) {
|
||||
var a = this;
|
||||
|
||||
// don't allow duplicates
|
||||
if (a.hasModal(id)) {
|
||||
let modal = a.Find(id);
|
||||
if (modal !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var html = "";
|
||||
html += '<div class="bsdia5 bsdia5-' + a.size + '" id="bsdia5-dlg' + id + '">';
|
||||
html += ' <div class="bsdia5-body">';
|
||||
html += ' <div>';
|
||||
html += ' <div class="bsdia5-header">';
|
||||
html += ' <strong>' + a.title + '</strong>';
|
||||
html += ' <button type="button" data-action="close">×</button>';
|
||||
html += ' <button type="button" data-action="restore">−</button>';
|
||||
let html = "";
|
||||
html += '<div class="modal modal-' + size + ' fade show d-block" id="' + a.pfx + id + '" tabindex="-1" aria-modal="true" role="dialog">';
|
||||
html += ' <div class="modal-dialog">';
|
||||
html += ' <div class="modal-content">';
|
||||
html += ' <div class="modal-header">';
|
||||
html += ' <span class="modal-title fs-5">' + title + '</span>';
|
||||
html += ' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
|
||||
html += ' </div>';
|
||||
html += ' <div class="bsdia5-content"></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">';
|
||||
html += ' <span class="visually-hidden">Loading...</span>';
|
||||
html += ' </div>';
|
||||
html += ' </div>';
|
||||
html += '</div>';
|
||||
|
||||
a.appendToBody(html);
|
||||
html += ' </div>';
|
||||
html += ' <div class="modal-footer">';
|
||||
html += ' <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>';
|
||||
html += ' </div>';
|
||||
html += ' </div>';
|
||||
html += ' </div>';
|
||||
html += '</div>';
|
||||
|
||||
var dialog = a.getModal(id);
|
||||
if (dialog === null) {
|
||||
a.appendHtml(a.body, html);
|
||||
|
||||
modal = a.Find(id);
|
||||
if (modal === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// close backdrop
|
||||
dialog.addEventListener("click", function(e){
|
||||
if (this === (window.event || e).target) {
|
||||
a.Clear();
|
||||
}
|
||||
});
|
||||
// modal.addEventListener("click", function(e){
|
||||
// e.stopPropagation();
|
||||
// e.preventDefault();
|
||||
|
||||
// Resize
|
||||
var result = dialog.querySelectorAll("button[data-action='restore']");
|
||||
if (result.length > 0) {
|
||||
result[0].addEventListener("click", function(e){
|
||||
a.ToggleSize(id);
|
||||
// a.Close(id);
|
||||
// });
|
||||
|
||||
modal.Close.forEach(function(e){
|
||||
e.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
a.Close(id);
|
||||
});
|
||||
});
|
||||
},
|
||||
removeBackdrop: function () {
|
||||
if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// close
|
||||
var result = dialog.querySelectorAll("button[data-action='close']");
|
||||
if (result.length > 0) {
|
||||
result[0].addEventListener("click", function(e){
|
||||
a.Clear();
|
||||
});
|
||||
}
|
||||
let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
|
||||
backdrop.parentNode.removeChild(backdrop);
|
||||
|
||||
// unlock background
|
||||
this.body.classList.remove("modal-open");
|
||||
this.body.style.overflow = null;
|
||||
},
|
||||
appendToBody: function (html) {
|
||||
document.querySelector("body").appendChild(this.convertHtmlToNode(html));
|
||||
},
|
||||
convertHtmlToNode: function(html) {
|
||||
var node = document.createElement('template');
|
||||
appendHtml: function (el, html) {
|
||||
let node = document.createElement('template');
|
||||
node.innerHTML = html;
|
||||
|
||||
return node.content.firstChild;
|
||||
},
|
||||
getBackdrop: function (id) {
|
||||
var result = document.body.querySelectorAll("#bsdia5-bck" + id);
|
||||
return ((result.length > 0)? result[0] : null);
|
||||
},
|
||||
getModal: function (id) {
|
||||
var result = document.body.querySelectorAll("#bsdia5-dlg" + id);
|
||||
return ((result.length > 0)? result[0] : null);
|
||||
},
|
||||
getModalContent: function (id) {
|
||||
var a = this;
|
||||
node = node.content.firstChild;
|
||||
|
||||
var result = a.getModal(id);
|
||||
if (result == null)
|
||||
{
|
||||
return null;
|
||||
el.appendChild(node);
|
||||
},
|
||||
html: function (el, newHtml) {
|
||||
/// todo: replace with pure JS
|
||||
if (jQuery) {
|
||||
jQuery(el).html(newHtml);
|
||||
} else {
|
||||
el.innerHTML = newHtml;
|
||||
}
|
||||
|
||||
var contentList = result.querySelectorAll("div[class='bsdia5-content']");
|
||||
if (contentList.length <= 0)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
return contentList[0];
|
||||
},
|
||||
getModalHeader: function (id) {
|
||||
var a = this;
|
||||
|
||||
var result = a.getModal(id);
|
||||
if (result == null)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
var contentList = result.querySelectorAll("div[class='bsdia5-header']");
|
||||
if (contentList.length <= 0)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
return contentList[0];
|
||||
},
|
||||
hasBackdrop: function (id) {
|
||||
return (document.body.querySelectorAll("#bsdia5-bck" + id).length > 0);
|
||||
},
|
||||
hasModal: function (id) {
|
||||
return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0);
|
||||
},
|
||||
isNullOrWhitespace: function(e) {
|
||||
if (typeof (e) == "undefined") return true;
|
||||
if (e == null) return true;
|
||||
if (e == false) return true;
|
||||
if (typeof (e) == "undefined") {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e == null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e == false) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (e.trim().length <= 0);
|
||||
},
|
||||
sanitiseSize: function(e) {
|
||||
if (!e) {
|
||||
return "md";
|
||||
}
|
||||
|
||||
if (e === true) {
|
||||
return "lg";
|
||||
}
|
||||
|
||||
if (e === false) {
|
||||
return "md";
|
||||
}
|
||||
|
||||
return e;
|
||||
}
|
||||
};
|
||||
1
bsdialog5.min.css
vendored
1
bsdialog5.min.css
vendored
@ -1 +0,0 @@
|
||||
.bsdia5-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;z-index:1024;background-color:#000000;opacity:0.4;}.bsdia5 {position: fixed;top:0;right:0;bottom:0;left:0;z-index:1024;overflow: auto;}.bsdia5-body {border-radius:5px;background-color:#ffffff;margin:2em auto;}.bsdia5-sm > .bsdia5-body {width:30%;}.bsdia5-md > .bsdia5-body {width:50%;}.bsdia5-lg > .bsdia5-body {width:75%;}.bsdia5-xl > .bsdia5-body {width:90%;}.bsdia5-header {display:block;padding:0 0 0 1em;border-style:solid;border-width:0 0 1px 0;border-color:#efefef;}.bsdia5-header strong {cursor:default;font-size:1.2em;line-height:3em;}.bsdia5-header button {background-color:transparent;border:none;padding:1em;float:right;}.bsdia5-content {padding:1em 1em 2em 1em;}.bsdia5-content .text-center {text-align:center;}
|
||||
4
bsdialog5.min.js
vendored
4
bsdialog5.min.js
vendored
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* BSDialog5
|
||||
* @version v0.1.0.001 (2022/10/15 1713)
|
||||
* @version v0.1.1.063 (2023/07/275 1713)
|
||||
*/
|
||||
var BSDialog5={Create:function(t,e,d,i){var n=this;n.id=t,n.title=e,n.url=d,n.size=n.sanitiseSize(i),n.addBackdrop(n.id),n.addModal(n.id),n.isNullOrWhitespace(n.url)?n.Update(n.id,"No URL specified"):(n.Update(n.id,null),fetch(n.url,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((t=>{n.Update(n.id,t)})).catch((t=>{n.Update(n.id,"Error: "+t)})).then((function(){})))},Clear:function(){for(var t=document.body.querySelectorAll(".bsdia5-backdrop"),e=0;e<t.length;e++)t[e].parentNode.removeChild(t[e]);t=document.body.querySelectorAll(".bsdia5");for(e=0;e<t.length;e++)t[e].parentNode.removeChild(t[e])},Close:function(t){var e=this.getModal(t);null!==e&&e.parentNode.removeChild(e);var d=this.getBackdrop(t);null!==d&&d.parentNode.removeChild(d)},Exists:function(t){return document.body.querySelectorAll("#bsdia5-dlg"+t).length>0},ShowToast:function(t,e,d,i){var n=this;n.id=t,n.title=e,n.size=n.sanitiseSize(i),n.addBackdrop(n.id),n.addModal(n.id),n.Update(n.id,d)},ToggleSize:function(t){var e=this.getModal(t);null!=e&&(e.classList.contains("bsdia5-md")?(e.classList.remove("bsdia5-md"),e.classList.add("bsdia5-lg")):e.classList.contains("bsdia5-lg")?(e.classList.remove("bsdia5-lg"),e.classList.add("bsdia5-xl")):e.classList.contains("bsdia5-xl")?(e.classList.remove("bsdia5-xl"),e.classList.add("bsdia5-sm")):e.classList.contains("bsdia5-sm")&&(e.classList.remove("bsdia5-sm"),e.classList.add("bsdia5-md")))},Update:function(t,e){var d=this.getModalContent(t);null!==d&&(d.innerHTML=null===e?'<span class="text-center">Loading...</span>':e)},addBackdrop:function(t){var e=this;if(!e.hasBackdrop(t)){e.appendToBody('<div id="bsdia5-bck'+t+'" class="bsdia5-backdrop"></div>');var d=document.body.querySelectorAll("#bsdia5-bck"+t);d.length>0&&d[0].addEventListener("click",(function(){e.Clear()}))}},addModal:function(t){var e=this;if(!e.hasModal(t)){var d="";d+='<div class="bsdia5 bsdia5-'+e.size+'" id="bsdia5-dlg'+t+'">',d+=' <div class="bsdia5-body">',d+=" <div>",d+=' <div class="bsdia5-header">',d+=" <strong>"+e.title+"</strong>",d+=' <button type="button" data-action="close">×</button>',d+=' <button type="button" data-action="restore">−</button>',d+=" </div>",d+=' <div class="bsdia5-content"></div>',d+=" </div>",d+=" </div>",d+="</div>",e.appendToBody(d);var i,n=e.getModal(t);if(null!==n)n.addEventListener("click",(function(t){this===(window.event||t).target&&e.Clear()})),(i=n.querySelectorAll("button[data-action='restore']")).length>0&&i[0].addEventListener("click",(function(d){e.ToggleSize(t)})),(i=n.querySelectorAll("button[data-action='close']")).length>0&&i[0].addEventListener("click",(function(t){e.Clear()}))}},appendToBody:function(t){document.querySelector("body").appendChild(this.convertHtmlToNode(t))},convertHtmlToNode:function(t){var e=document.createElement("template");return e.innerHTML=t,e.content.firstChild},getBackdrop:function(t){var e=document.body.querySelectorAll("#bsdia5-bck"+t);return e.length>0?e[0]:null},getModal:function(t){var e=document.body.querySelectorAll("#bsdia5-dlg"+t);return e.length>0?e[0]:null},getModalContent:function(t){var e=this.getModal(t);if(null==e)return null;var d=e.querySelectorAll("div[class='bsdia5-content']");return d.length<=0?null:d[0]},hasBackdrop:function(t){return document.body.querySelectorAll("#bsdia5-bck"+t).length>0},hasModal:function(t){return document.body.querySelectorAll("#bsdia5-dlg"+t).length>0},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},sanitiseSize:function(t){return t?!0===t?"lg":!1===t?"md":t:"md"}};
|
||||
var BSDialog5={Create:async function(e,t,l,o){var d=this;d.pfx="bsdia5_",d.body=document.getElementsByTagName("body")[0],d.addBackdrop(),d.addModal(e,t,o),d.isNullOrWhitespace(l)?d.UpdateBody(e,""):await d.UpdateBodyRemote(e,l)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(e){e.parentNode.removeChild(e)})),this.removeBackdrop()},Close:function(e){let t=this.Find(e);null!==t&&(modal.Modal.forEach((function(e){e.parentNode.removeChild(e)})),t=this.Find(e),null===t&&this.removeBackdrop())},UpdateTitle:function(e,t){let l=this.Find(e);null!==l&&l.Title.forEach((function(e){e.innerHTML=t}))},UpdateSize:function(e,t){let l=this.Find(e);null!==l&&l.Modal.forEach((function(e){e.classList.remove("modal-sm"),e.classList.remove("modal-md"),e.classList.remove("modal-lg"),e.classList.remove("modal-xl"),e.classList.add("modal-"+t)}))},UpdateBody:function(e,t){var l=this;let o=l.Find(e);null!==o&&o.Body.forEach((function(e){l.html(e,t)}))},UpdateBodyRemote:async function(e,t){var l=this;l.Exists(e)&&await fetch(t,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((t=>{l.UpdateBody(e,t)})).catch((t=>{l.UpdateBody(e,"Error: "+t)}))},Exists:function(e){return null!==this.Find(e)},Find:function(e){let t=this.body.querySelectorAll("#"+this.pfx+e+".modal");return t?t.length<=0?null:{Title:t[0].querySelectorAll(".modal-title"),Body:t[0].querySelectorAll(".modal-body"),Footer:t[0].querySelectorAll(".modal-footer"),Close:t[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:t}:null},ShowToast:function(e,t,l,o){this.Create(e,t,null,o),this.UpdateBody(e,l)},addBackdrop:function(){let e=this;e.body.querySelectorAll(".modal-backdrop").length>0||(e.appendHtml(e.body,'<div class="modal-backdrop fade show"></div>'),e.body.classList.add("modal-open"),e.body.style.overflow="hidden",e.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),e.Clear()})))},addModal:function(e,t,l){var o=this;let d=o.Find(e);if(null!==d)return;let a="";a+='<div class="modal modal-'+l+' fade show d-block" id="'+o.pfx+e+'" tabindex="-1" aria-modal="true" role="dialog">',a+=' <div class="modal-dialog">',a+=' <div class="modal-content">',a+=' <div class="modal-header">',a+=' <span class="modal-title fs-5">'+t+"</span>",a+=' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',a+=" </div>",a+=' <div class="modal-body">',a+='<div class="row mt-3 pb-3">',a+=' <div class="col-12 text-center">',a+=' <div class="spinner-border">',a+='\t <span class="visually-hidden">Loading...</span>',a+=" </div>",a+=" </div>",a+="</div>",a+=" </div>",a+=' <div class="modal-footer">',a+=' <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>',a+=" </div>",a+=" </div>",a+=" </div>",a+="</div>",o.appendHtml(o.body,a),d=o.Find(e),null!==d&&d.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),o.Close(e)}))}))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;let e=this.body.querySelectorAll(".modal-backdrop")[0];e.parentNode.removeChild(e),this.body.classList.remove("modal-open"),this.body.style.overflow=null},appendHtml:function(e,t){let l=document.createElement("template");l.innerHTML=t,l=l.content.firstChild,e.appendChild(l)},html:function(e,t){jQuery?jQuery(e).html(t):e.innerHTML=t},isNullOrWhitespace:function(e){return void 0===e||(null==e||(0==e||e.trim().length<=0))}};
|
||||
Loading…
Reference in New Issue
Block a user