Ray/bsdialog5
Ray/bsdialog5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added test page

Browse Source 
Added toggle size support
This commit is contained in:
Ray 2023-08-03 13:53:34 +01:00
parent b1a0702e66
commit 0d183f4ab3
3 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
bs5-test.html Normal file
View File

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<!-- jquery -->
<script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/jquery/3.7.0/dist/jquery.min.js"></script>
<!-- bootstrap -->
<script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="bsdialog5.js"></script>
<title></title>
</head>
<body class="py-5">
<div class="container">
<div class="row mb-3">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="BSDialog5.Create('abc123', 'My Modal Box 123', null, 'xl')">
Launch Modal 1
</button>
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="BSDialog5.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg')">
Launch Modal 2
</button>
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="BSDialog5.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm')">
Launch Modal 3
</button>
</div>
</div>
</div>
</body>
</html>

80
bsdialog5.js
View File

@ -1,11 +1,12 @@
/** /**
* BSDialog5 * BSDialog5
* @version v0.1.1.063 (2023/07/275 1713) * @version v0.1.2.011 (2023/08/03 0010)
*/ */
var BSDialog5 = { var BSDialog5 = {
Create: async 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.pfx = "bsdia5_";
a.body = document.getElementsByTagName("body")[0]; a.body = document.getElementsByTagName("body")[0];
@ -14,8 +15,10 @@ var BSDialog5 = {
if (a.isNullOrWhitespace(url)) { if (a.isNullOrWhitespace(url)) {
a.UpdateBody(id, ""); a.UpdateBody(id, "");
} else if (url.startsWith("http://") || url.startsWith("https://")) {
a.UpdateBodyRemote(id, url);
} else { } else {
await a.UpdateBodyRemote(id, url); await a.UpdateBody(id, url);
} }
}, },
Clear: function () { Clear: function () {
@ -94,6 +97,18 @@ var BSDialog5 = {
a.UpdateBody(id, "Error: " + error); a.UpdateBody(id, "Error: " + error);
}); });
}, },
UpdateFooter: function (id, content) {
var a = this;
let modal = a.Find(id);
if (modal === null) {
return;
}
modal.Footer.forEach(function(e) {
a.html(e, content);
});
},
Exists: function (id) { Exists: function (id) {
return (this.Find(id) !== null); return (this.Find(id) !== null);
}, },
@ -198,19 +213,17 @@ var BSDialog5 = {
a.Close(id); a.Close(id);
}); });
e.addEventListener("auxclick", function(e){
e.stopPropagation();
e.preventDefault();
if (e.button === 1) {
a.toggleSize();
}
}); });
},
removeBackdrop: function () {
if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
return;
}
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;
}, },
appendHtml: function (el, html) { appendHtml: function (el, html) {
let node = document.createElement('template'); let node = document.createElement('template');
@ -242,5 +255,46 @@ var BSDialog5 = {
} }
return (e.trim().length <= 0); return (e.trim().length <= 0);
},
removeBackdrop: function () {
if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
return;
}
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;
},
toggleSize: function () {
var a = this;
let modal = a.Find(a.id);
if (modal === null) {
return;
}
let modalDialog = modal.Modal[0];
if (modalDialog.classList.contains('modal-sm')) {
modalDialog.classList.remove("modal-sm");
modalDialog.classList.add("modal-md");
} else if (modalDialog.classList.contains('modal-md')) {
modalDialog.classList.remove("modal-md");
modalDialog.classList.add("modal-lg");
} else if (modalDialog.classList.contains('modal-lg')) {
modalDialog.classList.remove("modal-lg");
modalDialog.classList.add("modal-xl");
} else if (modalDialog.classList.contains('modal-xl')) {
modalDialog.classList.remove("modal-xl");
modalDialog.classList.add("modal-sm");
} else {
modalDialog.classList.remove("modal-sm");
modalDialog.classList.remove("modal-md");
modalDialog.classList.remove("modal-lg");
modalDialog.classList.remove("modal-xl");
modalDialog.classList.add("modal-md");
}
} }
}; };

4
bsdialog5.min.js vendored
View File

@ -1,5 +1,5 @@
/** /**
* BSDialog5 * BSDialog5
* @version v0.1.1.063 (2023/07/275 1713) * @version v0.1.2.011 (2023/08/03 0010)
*/ */
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))}}; var BSDialog5={Create:async function(t,l,o,e){var a=this;a.id=t,a.pfx="bsdia5_",a.body=document.getElementsByTagName("body")[0],a.addBackdrop(),a.addModal(t,l,e),a.isNullOrWhitespace(o)?a.UpdateBody(t,""):o.startsWith("http://")||o.startsWith("https://")?a.UpdateBodyRemote(t,o):await a.UpdateBody(t,o)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let l=this.Find(t);null!==l&&(l.Modal.forEach((function(t){t.parentNode.removeChild(t)})),l=this.Find(t),null===l&&this.removeBackdrop())},UpdateTitle:function(t,l){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=l}))},UpdateSize:function(t,l){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){t.classList.remove("modal-sm"),t.classList.remove("modal-md"),t.classList.remove("modal-lg"),t.classList.remove("modal-xl"),t.classList.add("modal-"+l)}))},UpdateBody:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Body.forEach((function(t){o.html(t,l)}))},UpdateBodyRemote:async function(t,l){var o=this;o.Exists(t)&&await fetch(l,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((l=>{o.UpdateBody(t,l)})).catch((l=>{o.UpdateBody(t,"Error: "+l)}))},UpdateFooter:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Footer.forEach((function(t){o.html(t,l)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let l=this.body.querySelectorAll("#"+this.pfx+t+".modal");return l?l.length<=0?null:{Title:l[0].querySelectorAll(".modal-title"),Body:l[0].querySelectorAll(".modal-body"),Footer:l[0].querySelectorAll(".modal-footer"),Close:l[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:l}:null},ShowToast:function(t,l,o,e){this.Create(t,l,null,e),this.UpdateBody(t,o)},addBackdrop:function(){let t=this;t.body.querySelectorAll(".modal-backdrop").length>0||(t.appendHtml(t.body,'<div class="modal-backdrop fade show"></div>'),t.body.classList.add("modal-open"),t.body.style.overflow="hidden",t.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),t.Clear()})))},addModal:function(t,l,o){var e=this;let a=e.Find(t);if(null!==a)return;let d="";d+='<div class="modal modal-'+o+' fade show d-block" id="'+e.pfx+t+'" tabindex="-1" aria-modal="true" role="dialog">',d+=' <div class="modal-dialog">',d+=' <div class="modal-content">',d+=' <div class="modal-header">',d+=' <span class="modal-title fs-5">'+l+"</span>",d+=' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>",d+=' <div class="modal-footer">',d+=' <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>',d+=" </div>",d+=" </div>",d+=" </div>",d+="</div>",e.appendHtml(e.body,d),a=e.Find(t),null!==a&&a.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(t)})),l.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&e.toggleSize()}))}))},appendHtml:function(t,l){let o=document.createElement("template");o.innerHTML=l,o=o.content.firstChild,t.appendChild(o)},html:function(t,l){jQuery?jQuery(t).html(l):t.innerHTML=l},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;let t=this.body.querySelectorAll(".modal-backdrop")[0];t.parentNode.removeChild(t),this.body.classList.remove("modal-open"),this.body.style.overflow=null},toggleSize:function(){let t=this.Find(this.id);if(null===t)return;let l=t.Modal[0];l.classList.contains("modal-sm")?(l.classList.remove("modal-sm"),l.classList.add("modal-md")):l.classList.contains("modal-md")?(l.classList.remove("modal-md"),l.classList.add("modal-lg")):l.classList.contains("modal-lg")?(l.classList.remove("modal-lg"),l.classList.add("modal-xl")):l.classList.contains("modal-xl")?(l.classList.remove("modal-xl"),l.classList.add("modal-sm")):(l.classList.remove("modal-sm"),l.classList.remove("modal-md"),l.classList.remove("modal-lg"),l.classList.remove("modal-xl"),l.classList.add("modal-md"))}};