Rework to simplify and minimise jQuery dependency #1

Merged
Ray merged 2 commits from release/0.1.0.063 into master 2023-07-30 13:45:55 +00:00
4 changed files with 190 additions and 306 deletions

View File

@ -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;
}

View File

@ -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">&times;</button>'; html += ' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
html += ' <button type="button" data-action="restore">&#8722;</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
View File

@ -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
View File

@ -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">&times;</button>',d+=' <button type="button" data-action="restore">&#8722;</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))}};