bsdialog4.js

@@ -1,6 +1,6 @@
 /**
  * BSDialog4
- * @version v0.1.4.031 (2023/11/03 22:42)
+ * @version v0.1.5.006 (2023/11/14 17:40)
  */
 var BSDialog = {
 	Show: async function (options) {
@@ -11,8 +11,12 @@ var BSDialog = {
 		a.pfx = "bsdia4_";
 		a.body = document.getElementsByTagName("body")[0];
 
-		a.addBackdrop();
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
-		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour);
+
+		$("#" + a.pfx + _options.ID).modal({
+			backdrop: _options.EasyClose,
+			show: true
+		});
 
 		if (_options.URL == null) {
 			await a.Update({ ID: _options.ID, Body: _options.Message });
@@ -179,29 +183,9 @@ var BSDialog = {
 			BodyURL: null,
 			Footer: null,
 			Size: null
-		},
-		ShowToast: {
-			ID: null,
-			Title: "",
-			Message: "",
-			Size: "md"
 		}
 	},
-	addBackdrop: function () {
+	addModal: function (id, title, size, showFooter, closeColour) {
-		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
@@ -211,7 +195,7 @@ var BSDialog = {
 		}
 
 		let html = "";
-		html += '<div class="modal fade show d-block" id="' + a.pfx + id + '" tabindex="-1">';
+		html += '<div class="modal fade" style="display: none;" id="' + a.pfx + id + '" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">';
 		html += '  <div class="modal-dialog modal-' + size + '">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
@@ -249,30 +233,9 @@ var BSDialog = {
 			return;
 	 	}
 
-		// Close on backdrp
+		$("#" + a.pfx + id).on('hidden.bs.modal', function (event) {
-		if (easyClose === true) {
+			a.Close(id);
-			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();
@@ -494,47 +457,5 @@ 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 });
 	}
 };