bsdialog4/bsdialog4.js

/**
 * BSDialog4
 * @version v0.1.0.002 (2021/04/25 1713)
 */
var BSDialog = {
	Create: function (id, title, url, size) {
		var a = this;

		a.id = id;
		a.title = title;
		a.url = url;
        
        if (typeof (size) == "undefined") {
            a.size = "md";
        } else if (size === true) {
            a.size = "lg";
        } else if (size === false) {
            a.size = "md";
        } else {
            a.size = size;
        }       

		if (!a.Exists(id)) {
			a.renderContent(null);
		}

		if (url != null) {
			$.ajax({
				url: url,
				cache: false,
				xhrFields: {
					withCredentials:true
				},
				timeout: 30000,
				success: function (result, status, xhr) {
					if ((xhr.status == 200) || (xhr.status == 302) || (xhr.status == 301)) {
                        a.updateContentBody(id, result);
					} else {
						a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
					}
				},
				error: function (xhr) {
					a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
				},
				complete: function (xhr, status) {
					// do nothing yet
				}
			});
		}

		a.initialiseComponents();
	},
	Close: function (id) {
		$("#dlg" + id).modal('hide');
	},
	Clear: function () {
		$("body > div[class~='modal'][role='dialog']").remove();
		$("body > div[class~='modal-backdrop']").remove();
		$("body").removeClass("modal-open");
	},
	ShowToast: function (id, title, message, size) {
		var a = this;

		if (a.Exists(id)) {
			return;
		}

		a.id = id;
		a.title = title;
		a.url = null;
		a.size = ((typeof (size) == "undefined") ? "md" : size);

		a.renderContent(message);
		a.initialiseComponents();
	},
	Exists: function (id) {
		return ($("body > div[id='dlg" + id + "']").length > 0);
	},
	generateModalHtml: function (message) {
		var a = this;

		var html = "";
		html += "<div class=\"modal fade\" id=\"dlg" + a.id + "\" tabindex=\"-1\" role=\"dialog\">";
		html += "  <div class=\"modal-dialog modal-" + a.size + "\">";
		html += "    <div class=\"modal-content\">";
		html += "      <div class=\"modal-header\">";
		html += "        <strong class=\"modal-title\" style=\"cursor:default; \">" + a.title + "</strong>";
        html += "        <button type=\"button\" class=\"close\" data-modal-action=\"restore\" aria-hidden=\"true\">&#8722;</button>";
		html += "        <button type=\"button\" class=\"close ml-0\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>";
		html += "      </div>";

		if ($.trim(message).length <= 0) {
			html += "      <div class=\"modal-body\">";
			html += "        <div class=\"text-center\">";
			html += "          <div class=\"spinner-border text-secondary text-center\" role=\"status\">";
            html += "            <span class=\"sr-only\">Loading...</span>";                
            html += "          </div>";
            html += "        </div>";
            html += "      </div>";
		} else {
			html += "      <div class=\"modal-body\">" + message + "</div>";
		}

		html += "      <div class=\"modal-footer\">";
		html += "        <button type=\"button\" class=\"btn btn-outline-dark\" data-dismiss=\"modal\">Close</button>";
		html += "      </div>";
		html += "    </div>";
		html += "  </div>";
		html += "</div>";

		return html;
	},
	renderContent: function (content) {
		$("body").append(this.generateModalHtml(content));
	},
	initialiseComponents: function () {
		var a = this;
		var dialog = a.getElement();

        var btnToggleSize = $(dialog).find("button[data-modal-action='restore']");
        if ($(btnToggleSize).length > 0) {
            $(btnToggleSize).off('click');
            $(btnToggleSize).on('click', function () {
                a.toggleSize();
            });
        }

		$(dialog).modal('show');

		$(dialog).off('hide.bs.modal');
		$(dialog).on('hide.bs.modal', function () {
			if ($(dialog).next().is("div[class~='modal-backdrop']")) {
				$(dialog).next().remove();
			}

			$(dialog).remove();
		});

		$(dialog).find(".modal-header").off("mousedown");
		$(dialog).find(".modal-header").on("mousedown", function(e) {
			var posX = e.pageX - $(this).offset().left;
			var posY = e.pageY - $(this).offset().top;

			$("body").off("mousemove.draggable");
			$("body").on("mousemove.draggable", function(e2) {
				$(dialog).children(".modal-dialog").offset({ "left": (e2.pageX - posX), "top": (e2.pageY - posY) });
			});

			$("body").off("mouseup");
			$("body").on("mouseup", function() {
				$("body").off("mousemove.draggable");
			});

			$(dialog).off("bs.modal.hide");
			$(dialog).on("bs.modal.hide", function() {
				$("body").off("mousemove.draggable");
			});
		});
	},
	updateContentBody: function (id, text) {
		var body = $("#dlg" + id).find(".modal-body");

		if ($(body).hasClass("custom-loading")) $(body).removeClass("custom-loading");

		$(body).html(text);
	},
	getElement: function () {
		return $("#dlg" + this.id);
	},
	toggleSize: function () {
		var div = $(this.getElement()).find("div[class^='modal-dialog']");
		if ($(div).length <= 0) {
			return;
		}

		if ($(div).hasClass("modal-md")) {
			$(div).removeClass("modal-md");
			$(div).addClass("modal-lg");
		} else if ($(div).hasClass("modal-lg")) {
			$(div).removeClass("modal-lg");
			$(div).addClass("modal-xl");
		} else if ($(div).hasClass("modal-xl")) {
			$(div).removeClass("modal-xl");
//			$(div).addClass("modal-sm");
			$(div).addClass("modal-md");
		} else if ($(div).hasClass("modal-sm")) {
			$(div).removeClass("modal-sm");
			$(div).addClass("modal-md");
		}
	}
};