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
|
* BSDialog5
|
||||||
* @version v0.1.0.001 (2022/10/15 1713)
|
* @version v0.1.1.063 (2023/07/275 1713)
|
||||||
*/
|
*/
|
||||||
var BSDialog5 = {
|
var BSDialog5 = {
|
||||||
Create: function (id, title, url, size) {
|
Create: async function (id, title, url, size) {
|
||||||
var a = this;
|
var a = this;
|
||||||
|
|
||||||
a.id = id;
|
a.pfx = "bsdia5_";
|
||||||
a.title = title;
|
a.body = document.getElementsByTagName("body")[0];
|
||||||
a.url = url;
|
|
||||||
a.size = a.sanitiseSize(size);
|
|
||||||
|
|
||||||
a.addBackdrop(a.id);
|
a.addBackdrop();
|
||||||
a.addModal(a.id);
|
a.addModal(id, title, size);
|
||||||
|
|
||||||
if (a.isNullOrWhitespace(a.url)) {
|
if (a.isNullOrWhitespace(url)) {
|
||||||
a.Update(a.id, "No URL specified");
|
a.UpdateBody(id, "");
|
||||||
} else {
|
} else {
|
||||||
a.Update(a.id, null);
|
await a.UpdateBodyRemote(id, url);
|
||||||
|
|
||||||
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
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
Clear: function () {
|
Clear: function () {
|
||||||
var a = this;
|
this.body.querySelectorAll(".modal").forEach(function(e) {
|
||||||
|
e.parentNode.removeChild(e);
|
||||||
|
});
|
||||||
|
|
||||||
// remove all backdrop
|
this.removeBackdrop();
|
||||||
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";
|
|
||||||
},
|
},
|
||||||
Close: function (id) {
|
Close: function (id) {
|
||||||
|
let modal = this.Find(id);
|
||||||
|
if (modal === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.Modal.forEach(function(e) {
|
||||||
|
e.parentNode.removeChild(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
modal = this.Find(id);
|
||||||
|
if (modal !== null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.removeBackdrop();
|
||||||
|
},
|
||||||
|
UpdateTitle: function (id, title) {
|
||||||
|
let modal = this.Find(id);
|
||||||
|
if (modal === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.Title.forEach(function(e) {
|
||||||
|
e.innerHTML = title;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
UpdateSize: function (id, size) {
|
||||||
|
let modal = this.Find(id);
|
||||||
|
if (modal === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modal.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;
|
var a = this;
|
||||||
|
|
||||||
// remove modal
|
let modal = a.Find(id);
|
||||||
var modal = a.getModal(id);
|
if (modal === null) {
|
||||||
if (modal !== null)
|
return;
|
||||||
{
|
|
||||||
modal.parentNode.removeChild(modal);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// remove backdrop
|
modal.Body.forEach(function(e) {
|
||||||
var backdrop = a.getBackdrop(id);
|
a.html(e, content);
|
||||||
if (backdrop !== null)
|
});
|
||||||
{
|
},
|
||||||
backdrop.parentNode.removeChild(backdrop);
|
UpdateBodyRemote: async function (id, url) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
if (!a.Exists(id)) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// lock background
|
await fetch(url, {
|
||||||
document.getElementsByTagName("body")[0].style.overflow = "auto";
|
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) {
|
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) {
|
ShowToast: function (id, title, message, size) {
|
||||||
var a = this;
|
this.Create(id, title, null, size);
|
||||||
|
this.UpdateBody(id, message);
|
||||||
a.id = id;
|
|
||||||
a.title = title;
|
|
||||||
a.size = a.sanitiseSize(size);
|
|
||||||
|
|
||||||
a.addBackdrop(a.id);
|
|
||||||
a.addModal(a.id);
|
|
||||||
|
|
||||||
a.Update(a.id, message);
|
|
||||||
},
|
},
|
||||||
ToggleSize: function (id) {
|
addBackdrop: function () {
|
||||||
var a = this;
|
let 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;
|
|
||||||
|
|
||||||
// don't allow duplicates
|
// don't allow duplicates
|
||||||
if (a.hasBackdrop(id)) {
|
if (a.body.querySelectorAll(".modal-backdrop").length > 0) {
|
||||||
return;
|
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
|
// lock background
|
||||||
document.getElementsByTagName("body")[0].style.overflow = "hidden";
|
a.body.classList.add("modal-open");
|
||||||
|
a.body.style.overflow = "hidden";
|
||||||
|
|
||||||
// close
|
// close
|
||||||
var backdropElList = document.body.querySelectorAll("#bsdia5-bck" + id);
|
let backdrop = a.body.querySelectorAll(".modal-backdrop")[0];
|
||||||
if (backdropElList.length > 0) {
|
backdrop.addEventListener("click", function(e){
|
||||||
backdropElList[0].addEventListener("click", function(){
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
a.Clear();
|
a.Clear();
|
||||||
});
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
addModal: function (id) {
|
addModal: function (id, title, size) {
|
||||||
var a = this;
|
var a = this;
|
||||||
|
|
||||||
// don't allow duplicates
|
// don't allow duplicates
|
||||||
if (a.hasModal(id)) {
|
let modal = a.Find(id);
|
||||||
|
if (modal !== null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var html = "";
|
let html = "";
|
||||||
html += '<div class="bsdia5 bsdia5-' + a.size + '" id="bsdia5-dlg' + id + '">';
|
html += '<div class="modal modal-' + size + ' fade show d-block" id="' + a.pfx + id + '" tabindex="-1" aria-modal="true" role="dialog">';
|
||||||
html += ' <div class="bsdia5-body">';
|
html += ' <div class="modal-dialog">';
|
||||||
html += ' <div>';
|
html += ' <div class="modal-content">';
|
||||||
html += ' <div class="bsdia5-header">';
|
html += ' <div class="modal-header">';
|
||||||
html += ' <strong>' + a.title + '</strong>';
|
html += ' <span class="modal-title fs-5">' + title + '</span>';
|
||||||
html += ' <button type="button" data-action="close">×</button>';
|
html += ' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
|
||||||
html += ' <button type="button" data-action="restore">−</button>';
|
|
||||||
html += ' </div>';
|
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>';
|
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);
|
a.appendHtml(a.body, html);
|
||||||
if (dialog === null) {
|
|
||||||
|
modal = a.Find(id);
|
||||||
|
if (modal === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// close backdrop
|
// modal.addEventListener("click", function(e){
|
||||||
dialog.addEventListener("click", function(e){
|
// e.stopPropagation();
|
||||||
if (this === (window.event || e).target) {
|
// e.preventDefault();
|
||||||
a.Clear();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Resize
|
// a.Close(id);
|
||||||
var result = dialog.querySelectorAll("button[data-action='restore']");
|
// });
|
||||||
if (result.length > 0) {
|
|
||||||
result[0].addEventListener("click", function(e){
|
modal.Close.forEach(function(e){
|
||||||
a.ToggleSize(id);
|
e.addEventListener("click", function(e){
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
a.Close(id);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
removeBackdrop: function () {
|
||||||
|
if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// close
|
let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
|
||||||
var result = dialog.querySelectorAll("button[data-action='close']");
|
backdrop.parentNode.removeChild(backdrop);
|
||||||
if (result.length > 0) {
|
|
||||||
result[0].addEventListener("click", function(e){
|
// unlock background
|
||||||
a.Clear();
|
this.body.classList.remove("modal-open");
|
||||||
});
|
this.body.style.overflow = null;
|
||||||
}
|
|
||||||
},
|
},
|
||||||
appendToBody: function (html) {
|
appendHtml: function (el, html) {
|
||||||
document.querySelector("body").appendChild(this.convertHtmlToNode(html));
|
let node = document.createElement('template');
|
||||||
},
|
|
||||||
convertHtmlToNode: function(html) {
|
|
||||||
var node = document.createElement('template');
|
|
||||||
node.innerHTML = html;
|
node.innerHTML = html;
|
||||||
|
|
||||||
return node.content.firstChild;
|
node = 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;
|
|
||||||
|
|
||||||
var result = a.getModal(id);
|
el.appendChild(node);
|
||||||
if (result == null)
|
},
|
||||||
{
|
html: function (el, newHtml) {
|
||||||
return null;
|
/// 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) {
|
isNullOrWhitespace: function(e) {
|
||||||
if (typeof (e) == "undefined") return true;
|
if (typeof (e) == "undefined") {
|
||||||
if (e == null) return true;
|
return true;
|
||||||
if (e == false) return true;
|
}
|
||||||
|
|
||||||
|
if (e == null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e == false) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
return (e.trim().length <= 0);
|
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
|
* 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&&(t.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