Initial commit
This commit is contained in:
Ray
commit
8a8b886be1
35
bs5-test.html
Normal file
35
bs5-test.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!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="bstoast5.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="BSToast5.Create({ Title: 'Hello', Time: 'Some time ago', Message: 'Hello momo' })">
|
||||||
|
Launch Toast 1
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
bstoast5.js
Normal file
147
bstoast5.js
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
/**
|
||||||
|
* BSToast5
|
||||||
|
* @version v0.1.0.001 (2023/08/16 0022)
|
||||||
|
*/
|
||||||
|
var BSToast5 = {
|
||||||
|
Create: async function (options) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
a.Options = Object.assign(a.DefaultOptions, options);
|
||||||
|
|
||||||
|
a.pfx = "bstoa5_";
|
||||||
|
a.id = Math.floor(Math.random() * 100000) + 10000;
|
||||||
|
a.body = document.getElementsByTagName("body")[0];
|
||||||
|
|
||||||
|
a.addBackdrop();
|
||||||
|
a.addToast(a.Options);
|
||||||
|
},
|
||||||
|
DefaultOptions: {
|
||||||
|
Icon: null,
|
||||||
|
Title: "",
|
||||||
|
Time: "",
|
||||||
|
Message: "",
|
||||||
|
Animation: true,
|
||||||
|
AutoHide: true,
|
||||||
|
Delay: 2500,
|
||||||
|
Position: "top-0 end-0 p-3"
|
||||||
|
},
|
||||||
|
Clear: function () {
|
||||||
|
this.body.querySelectorAll(".toast").forEach(function(e) {
|
||||||
|
e.parentNode.removeChild(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.removeBackdrop();
|
||||||
|
},
|
||||||
|
Close: function (id) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
// Close this toast
|
||||||
|
a.body.querySelectorAll("#" + a.pfx + id + ".toast").forEach(function(e) {
|
||||||
|
if (typeof(e.parentNode) == "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.parentNode.removeChild(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clean-up all closed toasts
|
||||||
|
a.body.querySelectorAll(".toast.hide").forEach(function(e) {
|
||||||
|
if (typeof(e.parentNode) == "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.parentNode.removeChild(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (a.body.querySelectorAll(".toast").length <= 0) {
|
||||||
|
let backdrop = a.body.querySelectorAll(".toast-backdrop")[0];
|
||||||
|
|
||||||
|
if (typeof(backdrop) == "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof(backdrop.parentNode) == "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
backdrop.parentNode.removeChild(backdrop);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addBackdrop: async function () {
|
||||||
|
let a = this;
|
||||||
|
|
||||||
|
// don't allow duplicates
|
||||||
|
if (a.body.querySelectorAll(".toast-backdrop").length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.appendHtml(a.body, '<div class="toast-backdrop" aria-live="polite" aria-atomic="true" style="position:static; min-height:200px; z-index:8;"><div class="toast-container ' + a.Options.Position + '"></div></div>');
|
||||||
|
},
|
||||||
|
addToast: function (options) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
if (a.body.querySelectorAll(".toast-container").length <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = "";
|
||||||
|
html += '<div id="' + a.pfx + a.id + '" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="min-width:200px;">';
|
||||||
|
html += ' <div class="toast-header">';
|
||||||
|
|
||||||
|
if (!a.isNullOrWhitespace(options.Icon)) {
|
||||||
|
html += options.Icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
html += ' <strong class="me-auto">' + options.Title + '</strong>';
|
||||||
|
html += ' <small>' + options.Time + '</small>';
|
||||||
|
html += ' <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>';
|
||||||
|
html += ' </div>';
|
||||||
|
html += ' <div class="toast-body">' + options.Message + '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
a.appendHtml(a.body.querySelectorAll(".toast-container")[0], html);
|
||||||
|
|
||||||
|
const toastEl = document.querySelectorAll("#" + a.pfx + a.id + ".toast");
|
||||||
|
const toast = new bootstrap.Toast(toastEl[0], {
|
||||||
|
animation: options.Animation,
|
||||||
|
autohide: options.AutoHide,
|
||||||
|
delay: options.Delay
|
||||||
|
});
|
||||||
|
toast.show();
|
||||||
|
|
||||||
|
toastEl[0].addEventListener('hidden.bs.toast', () => {
|
||||||
|
a.Close(a.id);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
appendHtml: function (el, html) {
|
||||||
|
let node = document.createElement('template');
|
||||||
|
node.innerHTML = html.trim();
|
||||||
|
|
||||||
|
node = node.content.firstChild;
|
||||||
|
|
||||||
|
el.appendChild(node);
|
||||||
|
},
|
||||||
|
isNullOrWhitespace: function(e) {
|
||||||
|
if (typeof (e) == "undefined") {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e == null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e == false) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (e.trim().length <= 0);
|
||||||
|
},
|
||||||
|
removeBackdrop: function () {
|
||||||
|
if (this.body.querySelectorAll(".toast-backdrop").length <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let backdrop = this.body.querySelectorAll(".toast-backdrop")[0];
|
||||||
|
backdrop.parentNode.removeChild(backdrop);
|
||||||
|
}
|
||||||
|
};
|
||||||
5
bstoast5.min.js
vendored
Normal file
5
bstoast5.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/**
|
||||||
|
* BSToast5
|
||||||
|
* @version v0.1.0.001 (2023/08/16 0022)
|
||||||
|
*/
|
||||||
|
var BSToast5={Create:async function(t){var e=this;e.Options=Object.assign(e.DefaultOptions,t),e.pfx="bstoa5_",e.id=Math.floor(1e5*Math.random())+1e4,e.body=document.getElementsByTagName("body")[0],e.addBackdrop(),e.addToast(e.Options)},DefaultOptions:{Icon:null,Title:"",Time:"",Message:"",Animation:!0,AutoHide:!0,Delay:2500,Position:"top-0 end-0 p-3"},Clear:function(){this.body.querySelectorAll(".toast").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){var e=this;if(e.body.querySelectorAll("#"+e.pfx+t+".toast").forEach((function(t){void 0!==t.parentNode&&t.parentNode.removeChild(t)})),e.body.querySelectorAll(".toast.hide").forEach((function(t){void 0!==t.parentNode&&t.parentNode.removeChild(t)})),e.body.querySelectorAll(".toast").length<=0){let t=e.body.querySelectorAll(".toast-backdrop")[0];if(void 0===t)return;if(void 0===t.parentNode)return;t.parentNode.removeChild(t)}},addBackdrop:async function(){let t=this;t.body.querySelectorAll(".toast-backdrop").length>0||t.appendHtml(t.body,'<div class="toast-backdrop" aria-live="polite" aria-atomic="true" style="position:static; min-height:200px; z-index:8;"><div class="toast-container '+t.Options.Position+'"></div></div>')},addToast:function(t){var e=this;if(e.body.querySelectorAll(".toast-container").length<=0)return;let o="";o+='<div id="'+e.pfx+e.id+'" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="min-width:200px;">',o+=' <div class="toast-header">',e.isNullOrWhitespace(t.Icon)||(o+=t.Icon),o+=' <strong class="me-auto">'+t.Title+"</strong>",o+=" <small>"+t.Time+"</small>",o+=' <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',o+=" </div>",o+=' <div class="toast-body">'+t.Message+"</div>",o+="</div>",e.appendHtml(e.body.querySelectorAll(".toast-container")[0],o);const a=document.querySelectorAll("#"+e.pfx+e.id+".toast");new bootstrap.Toast(a[0],{animation:t.Animation,autohide:t.AutoHide,delay:t.Delay}).show(),a[0].addEventListener("hidden.bs.toast",(()=>{e.Close(e.id)}))},appendHtml:function(t,e){let o=document.createElement("template");o.innerHTML=e.trim(),o=o.content.firstChild,t.appendChild(o)},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".toast-backdrop").length<=0)return;let t=this.body.querySelectorAll(".toast-backdrop")[0];t.parentNode.removeChild(t)}};
|
||||||
Loading…
Reference in New Issue
Block a user