Merge pull request 'Added support and option for close-on-click-away' (#6) from release/0.1.4.031 into master

Reviewed-on: #6

bs4-test.html

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