bsdialog5/bsdialog5.js

/**
 * BSDialog5
 * @version v0.1.0.001 (2022/10/15 1713)
 */
var BSDialog5 = {
	Create: function (id, title, url, size) {
		var a = this;

		a.id = id;
		a.title = title;
		a.url = url;
		a.size = a.sanitiseSize(size);

		a.addBackdrop(a.id);
		a.addModal(a.id);

		if (a.isNullOrWhitespace(a.url)) {
			a.Update(a.id, "No URL specified");
		} else {
			a.Update(a.id, null);

			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 () {
		var a = this;

		// remove all backdrop
		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) {
		var a = this;

		// remove modal
		var modal = a.getModal(id);
		if (modal !== null)
		{
			modal.parentNode.removeChild(modal);
		}

		// remove backdrop
		var backdrop = a.getBackdrop(id);
		if (backdrop !== null)
		{
			backdrop.parentNode.removeChild(backdrop);
		}

		// lock background
		document.getElementsByTagName("body")[0].style.overflow = "auto";
	},
	Exists: function (id) {
		return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0);
	},
	ShowToast: function (id, title, message, size) {
		var a = this;

		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) {
		var 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
		if (a.hasBackdrop(id)) {
			return;
		}

		a.appendToBody('<div id="bsdia5-bck' + id + '" class="bsdia5-backdrop"></div>');

		// lock background
		document.getElementsByTagName("body")[0].style.overflow = "hidden";

		// close
		var backdropElList = document.body.querySelectorAll("#bsdia5-bck" + id);
		if (backdropElList.length > 0) {
			backdropElList[0].addEventListener("click", function(){
				a.Clear();
			});
		}
	},
	addModal: function (id) {
		var a = this;

		// don't allow duplicates
		if (a.hasModal(id)) {
			return;
		}

		var html = "";
		html += '<div class="bsdia5 bsdia5-' + a.size + '" id="bsdia5-dlg' + id + '">';
		html += '  <div class="bsdia5-body">';
		html += '    <div>';
		html += '      <div class="bsdia5-header">';
		html += '        <strong>' + a.title + '</strong>';
		html += '        <button type="button" data-action="close">&times;</button>';
        html += '        <button type="button" data-action="restore">&#8722;</button>';
		html += '      </div>';
		html += '      <div class="bsdia5-content"></div>';
		html += '    </div>';
		html += '  </div>';
		html += '</div>';

		a.appendToBody(html);

		var dialog = a.getModal(id);
		if (dialog === null) {
			return;
		}

		// close backdrop
		dialog.addEventListener("click", function(e){
			if (this === (window.event || e).target) {
				a.Clear();
			}
		});

		// Resize
		var result = dialog.querySelectorAll("button[data-action='restore']");
		if (result.length > 0) {
			result[0].addEventListener("click", function(e){
				a.ToggleSize(id);
			});
		}

		// close
		var result = dialog.querySelectorAll("button[data-action='close']");
		if (result.length > 0) {
			result[0].addEventListener("click", function(e){
				a.Clear();
			});
		}
	},
	appendToBody: function (html) {
		document.querySelector("body").appendChild(this.convertHtmlToNode(html));
	},
	convertHtmlToNode: function(html) {
		var node = document.createElement('template');
    	node.innerHTML = html;

    	return 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);
		if (result == null)
		{
			return null;
		}

		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) {
		if (typeof (e) == "undefined") return true;
		if (e == null) return true;
		if (e == false) return true;

		return (e.trim().length <= 0);
	},
	sanitiseSize: function(e) {
		if (!e) {
            return "md";
        }

		if (e === true) {
            return "lg";
        }

		if (e === false) {
            return "md";
        }

		return e;
	}
};