Merge pull request 'release/0.2.0.055' (#5) from release/0.2.0.055 into master

Reviewed-on: #5

bs5-test.html

@@ -166,6 +166,44 @@ BSDialog5.Show({
       </div>
       <div class="col-6">
 
+        <div class="pb-3 mb-3 border-bottom">
+          <p><b>Example. Prompt Modal (Textbox)</b></p>
+          <p>Launch a prompt modal and wait for a textbox response</p>
+          <div class="alert alert-secondary text-sm">
+            <pre>
+let response = await BSDialog5.Prompt({
+  Type: "textbox",
+  Title: "Modal Title",
+  Message: "Are you sure want to wait for a response?",
+  Size: "md",
+  Label: "",
+  Placeholder: ""
+});
+
+alert(response);
+            </pre>
+          </div>
+          <p><button id="buttonL2a" type="button" class="btn btn-primary">Launch Modal</button></p>
+          <script>
+            $(document).ready(function(){
+
+              $("#buttonL2a").on('click', async function(){
+                let response = await BSDialog5.Prompt({
+                  Type: "textbox",
+                  Title: "Modal Title",
+                  Message: "Are you sure want to wait for a response?",
+                  Size: "md",
+                  Label: "",
+				          Placeholder: ""
+                });
+
+                alert(response);
+              });
+
+            });
+          </script>
+        </div>
+
         <div class="pb-3 mb-3 border-bottom">
           <p><b>Example. Text Modal with Updates</b></p>
           <p>Launch a basic modal, make updates to the title, body, size and footer.</p>

bsdialog5.js

@@ -1,6 +1,6 @@
 /**
  * BSDialog5
- * @version v0.2.0.013 (2023/08/21 1945)
+ * @version v0.2.0.055 (2023/11/12 1428)
  */
 var BSDialog5 = {
 	Default: function() {
@@ -12,17 +12,27 @@ var BSDialog5 = {
 				URL: null,
 				Size: "md",
 				Colour: "secondary",
-				ShowFooter: true
+				ShowFooter: true,
+				EasyClose: true
 			},
 			PromptOptions: {
+				Type: "button",
 				Title: "",
 				Message: "",
 				Size: "md",
+				EasyClose: true,
 				Buttons: [
 					{ Label: "Yes", Value: "Yes", Colour: "primary" },
 					{ Label: "No", Value: "No", Colour: "secondary" },
 					{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-				]
+				],
+				Textbox: {
+					Label: "",
+					LabelSize: 4,
+					Placeholder: "",
+					Value: "",
+					BoxSize: 8
+				}
 			},
 			UpdateOptions: {
 				ID: null,
@@ -42,7 +52,7 @@ var BSDialog5 = {
 		a.pfx = "bsdia5_";
 
 		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 });
@@ -61,52 +71,15 @@ var BSDialog5 = {
 	Prompt: async function (options) {
 		const a = this;
 		const id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
-
 		const _options = Object.assign(a.Default().PromptOptions, options);
 
-		return await new Promise(async (resolve) => {
+		switch (_options.Type) {
-
+			case "textbox":
-			await a.Show({
+				return await a.showTextboxPrompt(id, _options);
-				ID: id,
+			case "button":
-				Title: _options.Title,
+			default:
-				Message: _options.Message,
+				return await a.showButtonPrompt(id, _options);
-				Size: _options.Size
+		}
-			});
-
-			let html = '';
-			_options.Buttons.forEach(function(e) {
-				html += '<button type="button" class="btn btn-' + e.Colour + '" data-prompt-value="' + e.Value + '">' + e.Label + '</button>';
-			});
-
-			a.Update({ ID: id, Footer: html });
-
-			const modal = a.Find(id);
-
-			modal.Footer[0].querySelectorAll("button").forEach(function(button) {
-				button.addEventListener("click", function(e){
-					e.stopPropagation();
-					e.preventDefault();
-
-					const value = button.getAttribute("data-prompt-value");
-
-					a.Close(id);
-
-					resolve(value);
-				});
-			});
-
-			modal.Close.forEach(function(sender) {
-				sender.addEventListener("click", function(e){
-					e.stopPropagation();
-					e.preventDefault();
-
-					a.Close(id);
-
-					resolve("");
-				});
-			});
-
-		});
 	},
 	Clear: function () {
 		this.GetBody().querySelectorAll(".modal").forEach(function(e) {
@@ -121,9 +94,7 @@ var BSDialog5 = {
 		 	return;
 		}
 
-		modal.Modal.forEach(function(e) {
+		modal.Modal.parentNode.removeChild(modal.Modal);
-			e.parentNode.removeChild(e);
-		});
 
 		modal = this.Find(id);
 		if (modal !== null) {
@@ -141,17 +112,9 @@ var BSDialog5 = {
 		 	return;
 		}
 
-		if (!this.isNullOrWhitespace(_options.Title)) {
+		if (!this.isNullOrWhitespace(_options.Title)) modal.Title.innerHTML = _options.Title;
-			modal.Title.forEach(function(e) {
-				e.innerHTML = _options.Title;
-			});
-		}
 
-		if (!this.isNullOrWhitespace(_options.Body)) {
+		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)) {
 			if (_options.BodyURL.startsWith("http://") || _options.BodyURL.startsWith("https://") || _options.BodyURL.startsWith("/")) {
@@ -165,20 +128,14 @@ var BSDialog5 = {
 			await a.UpdateBodyRemote(_options.ID, _options.BodyURL);
 		}
 
-		if (!this.isNullOrWhitespace(_options.Footer)) {
+		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.forEach(function(e) {
+			modal.Modal.classList.remove("modal-sm");
-				e.classList.remove("modal-sm");
+			modal.Modal.classList.remove("modal-md");
-				e.classList.remove("modal-md");
+			modal.Modal.classList.remove("modal-lg");
-				e.classList.remove("modal-lg");
+			modal.Modal.classList.remove("modal-xl");
-				e.classList.remove("modal-xl");
+			modal.Modal.classList.add("modal-" + _options.Size);
-				e.classList.add("modal-" + _options.Size);
-			});
 		}
 
 	},
@@ -212,11 +169,12 @@ var BSDialog5 = {
 		}
 
 		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-bs-dismiss='modal']"),
-			Modal: modal
+			Modal: modal[0]
 		};
 	},
 	GetBody: function() {
@@ -235,17 +193,8 @@ var BSDialog5 = {
 		// lock background
 		a.GetBody().classList.add("modal-open");
 		a.GetBody().style.overflow = "hidden";
-
-		// close
-		let backdrop = a.GetBody().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) {
 		const a = this;
 
 		// don't allow duplicates
@@ -259,8 +208,8 @@ var BSDialog5 = {
 		html += '  <div class="modal-dialog">';
 		html += '    <div class="modal-content">';
 		html += '      <div class="modal-header">';
-		html += '        <span class="modal-title fs-5">' + title + '</span>';
+		html += '        <span class="modal-title fs-5" style="cursor: default; user-select: none;">' + title + '</span>';
-		html += '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
+		html += '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="user-select: none;"></button>';
 		html += '      </div>';
 		html += '      <div class="modal-body">';
 
@@ -291,12 +240,21 @@ var BSDialog5 = {
 			return;
 	 	}
 
-		// modal.addEventListener("click", function(e){
+		// Close on backdrp
-		// 	e.stopPropagation();
+		if (easyClose === true) {
-		// 	e.preventDefault();
+			modal.Modal.addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
 
-		// 	a.Close(id);
+				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){
@@ -305,18 +263,152 @@ var BSDialog5 = {
 
 					a.Close(id);
 				});
+		});
 
-			e.addEventListener("auxclick", function(e){
+		modal.Title.addEventListener("dblclick", function(e){
 			e.stopPropagation();
 			e.preventDefault();
 
-			if (e.button === 1) {
 			a.toggleSize();
-			}
+		});
+	},
+
+
+
+	showButtonPrompt: async function (id, options) {
+		const a = this;
+
+		return await new Promise(async (resolve, reject) => {
+			await a.Show({
+				ID: id,
+				Title: options.Title,
+				Message: options.Message,
+				Size: options.Size,
+				EasyClose: options.EasyClose
+			});
+
+			let html = '';
+			options.Buttons.forEach(function(e) {
+				html += '<button type="button" class="btn btn-' + e.Colour + '" data-prompt-value="' + e.Value + '">' + e.Label + '</button>';
+			});
+
+			a.Update({ ID: id, Footer: html });
+
+			const modal = a.Find(id);
+			modal.Footer.querySelectorAll("button").forEach(function(button) {
+				button.addEventListener("click", function(e){
+					e.stopPropagation();
+					e.preventDefault();
+
+					const value = button.getAttribute("data-prompt-value");
+
+					a.Close(id);
+
+					resolve(value);
+				});
+			});
+
+			modal.Close.forEach(function(sender) {
+				sender.addEventListener("click", function(e){
+					e.stopPropagation();
+					e.preventDefault();
+
+					a.Close(id);
+
+					resolve("");
+				});
 			});
 
 		});
 	},
+	showTextboxPrompt: async function (id, options) {
+		const a = this;
+
+		return await new Promise(async (resolve, reject) => {
+			options.Buttons = [
+				{ Label: "OK", Value: "", Colour: "primary" },
+				{ Label: "Cancel", Value: "", Colour: "secondary" }
+			];
+
+			await a.Show({
+				ID: id,
+				Title: options.Title,
+				Message: options.Message,
+				Size: options.Size,
+				EasyClose: options.EasyClose
+			});
+
+			let body = '';
+
+			if (!a.isNullOrWhitespace(options.Message)) {
+				body += '<p>' + options.Message + '</p>';
+			}
+
+			body += '<div class="form-group row">';
+
+			if (a.isNullOrWhitespace(options.Textbox.Label) || (options.Textbox.LabelSize <= 0)) {
+				body += '<div class="col-sm-12">';
+				body += '<input type="text" class="form-control" id="textbox' + id + '" placeholder="' + options.Textbox.Placeholder + '" value="' + options.Textbox.Value + '">';
+				body += '</div>';
+			} else {
+				body += '<label for="textbox' + id + '" class="col-sm-' + options.Textbox.LabelSize + ' col-form-label">' + options.Textbox.Label + '</label>';
+				body += '<div class="col-sm-' + options.Textbox.BoxSize + '">';
+				body += '<input type="text" class="form-control" id="textbox' + id + '" placeholder="' + options.Textbox.Placeholder + '" value="' + options.Textbox.Value + '">';
+				body += '</div>';
+			}
+
+			body += '</div>';
+
+			let footer = '';
+			options.Buttons.forEach(function(e) {
+				footer += '<button type="button" class="btn btn-' + e.Colour + '" data-prompt-value="' + e.Value + '">' + e.Label + '</button>';
+			});
+
+			a.Update({
+				ID: id,
+				Body: body,
+				Footer: footer
+			});
+
+			const modal = a.Find(id);
+			const buttons = modal.Footer.querySelectorAll("button");
+
+			buttons[0].addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+				const value = modal.Body.querySelectorAll("input")[0].value;
+
+				a.Close(id);
+
+				resolve(value);
+			});
+
+			buttons[1].addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+				a.Close(id);
+
+				resolve("");
+			});
+
+			modal.Close.forEach(function(sender) {
+				sender.addEventListener("click", function(e){
+					e.stopPropagation();
+					e.preventDefault();
+
+					a.Close(id);
+
+					resolve("");
+				});
+			});
+
+		});
+	},
+
+
+
 	appendHtml: function (el, html) {
 		let node = document.createElement('template');
 		node.innerHTML = html;
@@ -374,25 +466,28 @@ var BSDialog5 = {
 		 	return;
 		}
 
-		let modalDialog = modal.Modal[0];
+		if (modal.Modal.classList.contains('modal-sm')) {
-		if (modalDialog.classList.contains('modal-sm')) {
+			modal.Modal.classList.remove("modal-sm");
-			modalDialog.classList.remove("modal-sm");
+			modal.Modal.classList.add("modal-md");
-			modalDialog.classList.add("modal-md");
+		} else if (modal.Modal.classList.contains('modal-md')) {
-		} else if (modalDialog.classList.contains('modal-md')) {
+			modal.Modal.classList.remove("modal-md");
-			modalDialog.classList.remove("modal-md");
+			modal.Modal.classList.add("modal-lg");
-			modalDialog.classList.add("modal-lg");
+		} else if (modal.Modal.classList.contains('modal-lg')) {
-		} else if (modalDialog.classList.contains('modal-lg')) {
+			modal.Modal.classList.remove("modal-lg");
-			modalDialog.classList.remove("modal-lg");
+			modal.Modal.classList.add("modal-xl");
-			modalDialog.classList.add("modal-xl");
+		} else if (modal.Modal.classList.contains('modal-xl')) {
-		} else if (modalDialog.classList.contains('modal-xl')) {
+			modal.Modal.classList.remove("modal-xl");
-			modalDialog.classList.remove("modal-xl");
+			modal.Modal.classList.add("modal-xxl");
-			modalDialog.classList.add("modal-sm");
+		} else if (modal.Modal.classList.contains('modal-xxl')) {
+			modal.Modal.classList.remove("modal-xxl");
+			modal.Modal.classList.add("modal-sm");
 		} else {
-			modalDialog.classList.remove("modal-sm");
+			modal.Modal.classList.remove("modal-sm");
-			modalDialog.classList.remove("modal-md");
+			modal.Modal.classList.remove("modal-md");
-			modalDialog.classList.remove("modal-lg");
+			modal.Modal.classList.remove("modal-lg");
-			modalDialog.classList.remove("modal-xl");
+			modal.Modal.classList.remove("modal-xl");
-			modalDialog.classList.add("modal-md");
+			modal.Modal.classList.remove("modal-xxl");
+			modal.Modal.classList.add("modal-md");
 		}
 	}
 };