bstoast4/bstoast4.js

/**
 * 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);
	}
};