bstoast4/bstoast4.js

147 lines
3.5 KiB
JavaScript
Raw Normal View History

2023-08-15 17:10:10 +00:00
/**
* BSToast4
* @version v0.1.0.012 (2023/08/15 0056)
*/
var BSToast4 = {
Create: async function (options) {
var a = this;
a.Options = Object.assign(a.DefaultOptions, options);
a.pfx = "bstoa4_";
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: 2000,
Position: "top:0; right:0; margin:20px;"
},
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 style="position:absolute; ' + a.Options.Position + '" class="toast-backdrop-body"></div></div>');
},
addToast: function (options) {
var a = this;
if (a.body.querySelectorAll(".toast-backdrop-body").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="mr-auto">' + options.Title + '</strong>';
html += ' <small>' + options.Time + '</small>';
html += ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
html += ' <span aria-hidden="true">&times;</span>';
html += ' </button>';
html += ' </div>';
html += ' <div class="toast-body">' + options.Message + '</div>';
html += '</div>';
a.appendHtml(a.body.querySelectorAll(".toast-backdrop-body")[0], html);
jQuery("#" + a.pfx + a.id + ".toast").toast({
animation: options.Animation,
autohide: options.AutoHide,
delay: options.Delay
}).toast("show");
jQuery("#" + a.pfx + a.id + ".toast").on('hidden.bs.toast', function () {
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);
}
};