bsdialog4.js

@@ -1,6 +1,6 @@
 /**
  * BSDialog4
- * @version v0.1.5.006 (2023/11/14 17:40)
+ * @version v0.1.4.031 (2023/11/03 22:42)
  */
 var BSDialog = {
 	Show: async function (options) {
@@ -11,12 +11,8 @@ var BSDialog = {
 		a.pfx = "bsdia4_";
 		a.body = document.getElementsByTagName("body")[0];
 
-		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
-
-		$("#" + a.pfx + _options.ID).modal({
-			backdrop: _options.EasyClose,
-			show: true
-		});
+		a.addBackdrop();
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour);
 
 		if (_options.URL == null) {
 			await a.Update({ ID: _options.ID, Body: _options.Message });
@@ -183,9 +179,29 @@ var BSDialog = {
 			BodyURL: null,
 			Footer: null,
 			Size: null
+		},
+		ShowToast: {
+			ID: null,
+			Title: "",
+			Message: "",
+			Size: "md"
 		}
 	},
-	addModal: function (id, title, size, showFooter, closeColour) {
+	addBackdrop: function () {
+		const a = this;
+
+		// don't allow duplicates
+		if (a.body.querySelectorAll(".modal-backdrop").length > 0) {
+			return;
+		}
+
+		a.appendHtml(a.body, '<div class="modal-backdrop fade show"></div>');
+
+		// lock background
+		a.body.classList.add("modal-open");
+		a.body.style.overflow = "hidden";
+	},
+	addModal: function (id, title, size, showFooter, easyClose, closeColour) {
 		const a = this;
 
 		// don't allow duplicates
@@ -195,7 +211,7 @@ var BSDialog = {
 		}
 
 		let html = "";
-		html += '<div class="modal fade" style="display: none;" id="' + a.pfx + id + '" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">';
+		html += '<div class="modal fade show d-block" id="' + a.pfx + id + '" tabindex="-1">';
 		html += '  <div class="modal-dialog modal-' + size + '">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
@@ -233,9 +249,30 @@ var BSDialog = {
 			return;
 	 	}
 
-		$("#" + a.pfx + id).on('hidden.bs.modal', function (event) {
+		// Close on backdrp
+		if (easyClose === true) {
+			modal.Modal.addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
 				a.Close(id);
-		})
+			});
+
+			const modalContent = modal.Modal.querySelectorAll(".modal-content")[0];
+			modalContent.addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+			});
+		}
+
+		modal.Close.forEach(function(e){
+			e.addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+		 		a.Close(id);
+		 	});
+		});
 
 		modal.Title.addEventListener("dblclick", function(e){
 			e.stopPropagation();
@@ -457,5 +494,47 @@ var BSDialog = {
 		} else {
 			a.Update({ ID: a.id, Size: "md" });
 		}
+	},
+	//
+	//
+	// deprecated/legacy-support
+	Create: async function (id, title, url, size) {
+		await this.Show({
+			ID: id,
+			Title: title,
+			Message: url,
+			URL: url,
+			Size: size,
+			Colour: "secondary"
+		});
+	},
+	UpdateTitle: function (id, title) {
+		this.Update({ ID: id, Title: title });
+	},
+	UpdateSize: function (id, size) {
+		this.Update({ ID: id, Size: size });
+	},
+	UpdateBody: function (id, content) {
+		this.Update({ ID: id, Body: content });
+	},
+	UpdateFooter: function (id, content) {
+		this.Update({ ID: id, Footer: content });
+	},
+	Toast: async function (options) {
+		const a = this;
+		const _options = Object.assign(a.Options.ShowToast, options);
+
+		await this.Show({
+			ID: _options.ID,
+			Title: _options.Title,
+			Message: _options.Message,
+			URL: null,
+			Size: _options.Size,
+			Colour: "secondary",
+			ShowFooter: false
+		});
+	},
+	ShowToast: function (id, title, message, size) {
+		this.Toast({ ID: id, Title: title, Message: message, Size: size });
 	}
 };