bs4-test.html

@@ -14,7 +14,6 @@
   <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
 
   <script src="bsdialog4.js"></script>
-  <!-- <script src="bsdialog4.min.js"></script> -->
   <title></title>
 
   <style>

bsdialog4.js

@@ -1,18 +1,18 @@
 /**
  * BSDialog4
- * @version v0.1.4.031 (2023/11/03 22:42)
+ * @version v0.1.3.017 (2023/08/30 00:17)
  */
 var BSDialog = {
 	Show: async function (options) {
 		const a = this;
-		const _options = Object.assign(a.Options.ShowModal, options);
+		const _options = Object.assign(a.Default().ShowOptions, options);
 
 		a.id = _options.ID;
 		a.pfx = "bsdia4_";
 		a.body = document.getElementsByTagName("body")[0];
 
 		a.addBackdrop();
-		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour);
+		a.addModal(_options.ID, _options.Title, _options.Size, true, _options.Colour);
 
 		if (_options.URL == null) {
 			await a.Update({ ID: _options.ID, Body: _options.Message });
@@ -34,7 +34,7 @@ var BSDialog = {
 		const a = this;
 		let id = Math.floor(Math.random() * 10000) + 1000;
 
-		const _options = Object.assign(a.Options.ShowPrompt, options);
+		const _options = Object.assign(a.Default().PromptOptions, options);
 
 		switch (_options.Type) {
 			case "textbox":
@@ -57,7 +57,9 @@ var BSDialog = {
 		 	return;
 		}
 
-		modal.Modal.parentNode.removeChild(modal.Modal);
+		modal.Modal.forEach(function(e) {
+			e.parentNode.removeChild(e);
+		});
 
 		modal = this.Find(id);
 		if (modal !== null) {
@@ -68,7 +70,7 @@ var BSDialog = {
 	},
 	Update: async function (options) {
 		const a = this;
-		let _options = Object.assign(a.Options.UpdateModal, options);
+		let _options = Object.assign(a.Default().UpdateOptions, options);
 
 		const modal = a.Find(_options.ID);
 		if (modal === null) {
@@ -76,11 +78,15 @@ var BSDialog = {
 		}
 
 		if (!this.isNullOrWhitespace(_options.Title)) {
-			modal.Title.innerHTML = _options.Title;
+			modal.Title.forEach(function(e) {
+				e.innerHTML = _options.Title;
+			});
 		}
 
 		if (!this.isNullOrWhitespace(_options.Body)) {
-			a.html(modal.Body, _options.Body);
+			modal.Body.forEach(function(e) {
+				a.html(e, _options.Body);
+			});
 		}
 
 		if (!this.isNullOrWhitespace(_options.BodyURL)) {
@@ -98,11 +104,13 @@ var BSDialog = {
 		}
 
 		if (!this.isNullOrWhitespace(_options.Footer)) {
-			a.html(modal.Footer, _options.Footer);
+			modal.Footer.forEach(function(e) {
+				a.html(e, _options.Footer);
+			});
 		}
 
 		if (!this.isNullOrWhitespace(_options.Size)) {
-			modal.Modal.querySelectorAll(".modal-dialog").forEach(function(e) {
+			modal.Modal[0].querySelectorAll(".modal-dialog").forEach(function(e) {
 
 				e.classList.forEach(function(e2) {
 					if (e2 == "modal-dialog") {
@@ -134,31 +142,29 @@ var BSDialog = {
 		}
 
 		return {
-			Title: modal[0].querySelectorAll(".modal-title")[0],
+			Title: modal[0].querySelectorAll(".modal-title"),
-			Header: modal[0].querySelectorAll(".modal-header")[0],
+			Body: modal[0].querySelectorAll(".modal-body"),
-			Body: modal[0].querySelectorAll(".modal-body")[0],
+			Footer: modal[0].querySelectorAll(".modal-footer"),
-			Footer: modal[0].querySelectorAll(".modal-footer")[0],
 			Close: modal[0].querySelectorAll("[data-dismiss='modal']"),
-			Modal: modal[0]
+			Modal: modal
 		};
 	},
-	Options: {
+	Default: function() {
-		ShowModal: {
+		return {
+			ShowOptions: {
 				ID: null,
 				Title: "",
 				Message: "",
 				URL: null,
 				Size: "md",
 				Colour: "secondary",
-			ShowFooter: true,
+				ShowFooter: true
-			EasyClose: true
 			},
-		ShowPrompt: {
+			PromptOptions: {
 				Type: "button",
 				Title: "",
 				Message: "",
 				Size: "md",
-			EasyClose: true,
 				Buttons: [
 					{ Label: "Yes", Value: "Yes", Colour: "primary" },
 					{ Label: "No", Value: "No", Colour: "secondary" },
@@ -172,23 +178,24 @@ var BSDialog = {
 					BoxSize: 8
 				}
 			},
-		UpdateModal: {
+			ToastOptions: {
+				ID: null,
+				Title: "",
+				Message: "",
+				Size: "md"
+			},
+			UpdateOptions: {
 				ID: null,
 				Title: null,
 				Body: null,
 				BodyURL: null,
 				Footer: null,
 				Size: null
-		},
-		ShowToast: {
-			ID: null,
-			Title: "",
-			Message: "",
-			Size: "md"
 			}
+		};
 	},
 	addBackdrop: function () {
-		const a = this;
+		let a = this;
 
 		// don't allow duplicates
 		if (a.body.querySelectorAll(".modal-backdrop").length > 0) {
@@ -200,9 +207,18 @@ var BSDialog = {
 		// lock background
 		a.body.classList.add("modal-open");
 		a.body.style.overflow = "hidden";
+
+		// close
+		let backdrop = a.body.querySelectorAll(".modal-backdrop")[0];
+		backdrop.addEventListener("click", function(e){
+			e.stopPropagation();
+			e.preventDefault();
+
+			a.Clear();
+		});
 	},
-	addModal: function (id, title, size, showFooter, easyClose, closeColour) {
+	addModal: function (id, title, size, showFooter, closeColour) {
-		const a = this;
+		var a = this;
 
 		// don't allow duplicates
 		let modal = a.Find(id);
@@ -215,8 +231,8 @@ var BSDialog = {
 		html += '  <div class="modal-dialog modal-' + size + '">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
-		html += '        <span class="modal-title font-weight-bold" style="cursor: default; user-select: none;" aria-label="Title">' + title + '</span>';
+		html += '        <span class="modal-title font-weight-bold">' + title + '</span>';
-		html += '        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="user-select: none;">';
+		html += '        <button type="button" class="close" data-dismiss="modal" aria-label="Close">';
 		html += '          <span aria-hidden="true">&times;</span>';
 		html += '        </button>';
 		html += '      </div>';
@@ -249,22 +265,6 @@ var BSDialog = {
 			return;
 	 	}
 
-		// 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();
@@ -272,15 +272,17 @@ var BSDialog = {
 
 		 		a.Close(id);
 		 	});
-		});
 
-		modal.Title.addEventListener("dblclick", function(e){
+			 e.addEventListener("auxclick", function(e){
 				e.stopPropagation();
 				e.preventDefault();
 
+				if (e.button === 1) {
 					a.toggleSize();
+				}
 		 	});
 
+		});
 	},
 	showButtonPrompt: async function (id, options) {
 		const a = this;
@@ -290,8 +292,7 @@ var BSDialog = {
 				ID: id,
 				Title: options.Title,
 				Message: options.Message,
-				Size: options.Size,
+				Size: options.Size
-				EasyClose: options.EasyClose
 			});
 
 			let html = '';
@@ -302,7 +303,7 @@ var BSDialog = {
 			a.Update({ ID: id, Footer: html });
 
 			const modal = a.Find(id);
-			modal.Footer.querySelectorAll("button").forEach(function(button) {
+			modal.Footer[0].querySelectorAll("button").forEach(function(button) {
 				button.addEventListener("click", function(e){
 					e.stopPropagation();
 					e.preventDefault();
@@ -341,8 +342,7 @@ var BSDialog = {
 				ID: id,
 				Title: options.Title,
 				Message: options.Message,
-				Size: options.Size,
+				Size: options.Size
-				EasyClose: options.EasyClose
 			});
 
 			let body = '';
@@ -378,13 +378,13 @@ var BSDialog = {
 			});
 
 			const modal = a.Find(id);
-			const buttons = modal.Footer.querySelectorAll("button");
+			const buttons = modal.Footer[0].querySelectorAll("button");
 
 			buttons[0].addEventListener("click", function(e){
 				e.stopPropagation();
 				e.preventDefault();
 
-				const value = modal.Body.querySelectorAll("input")[0].value;
+				const value = modal.Body[0].querySelectorAll("input")[0].value;
 
 				a.Close(id);
 
@@ -473,14 +473,14 @@ var BSDialog = {
 		});
 	},
 	toggleSize: function () {
-		const a = this;
+		var a = this;
 
 		let modal = a.Find(a.id);
 		if (modal === null) {
 		 	return;
 		}
 
-		let modalDialog = modal.Modal.querySelectorAll(".modal-dialog")[0];
+		let modalDialog = modal.Modal[0].querySelectorAll(".modal-dialog")[0];
 		if (modalDialog.classList.contains('modal-sm')) {
 			a.Update({ ID: a.id, Size: "md" });
 		} else if (modalDialog.classList.contains('modal-md')) {
@@ -488,15 +488,12 @@ var BSDialog = {
 		} else if (modalDialog.classList.contains('modal-lg')) {
 			a.Update({ ID: a.id, Size: "xl" });
 		} else if (modalDialog.classList.contains('modal-xl')) {
-			a.Update({ ID: a.id, Size: "xxl" });
-		} else if (modalDialog.classList.contains('modal-xxl')) {
 			a.Update({ ID: a.id, Size: "sm" });
 		} else {
 			a.Update({ ID: a.id, Size: "md" });
 		}
 	},
 	//
-	//
 	// deprecated/legacy-support
 	Create: async function (id, title, url, size) {
 		await this.Show({
@@ -522,7 +519,7 @@ var BSDialog = {
 	},
 	Toast: async function (options) {
 		const a = this;
-		const _options = Object.assign(a.Options.ShowToast, options);
+		const _options = Object.assign(a.Default().ToastOptions, options);
 
 		await this.Show({
 			ID: _options.ID,