bs4-test.html

@@ -68,8 +68,8 @@ BSDialog.Show({
 
 
         <div class="pb-3 mb-3 border-bottom">
-          <p><b>Example. Prompt Modal</b></p>
+          <p><b>Example. Prompt Modal (Buttons)</b></p>
-          <p>Launch a prompt modal and wait for a response</p>
+          <p>Launch a prompt modal and wait for a button response</p>
           <div class="alert alert-secondary text-sm">
             <pre>
 let response = await BSDialog.Prompt({
@@ -166,6 +166,84 @@ BSDialog.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 BSDialog.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 BSDialog.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. 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 BSDialog.Prompt({
+  Type: "textbox",
+  Title: "Modal Title",
+  Message: "Are you sure want to wait for a response?",
+  Size: "md",
+  Label: "Response Text",
+  Placeholder: "Response Text"
+});
+
+alert(response);
+            </pre>
+          </div>
+          <p><button id="buttonL2b" type="button" class="btn btn-primary">Launch Modal</button></p>
+          <script>
+            $(document).ready(function(){
+
+              $("#buttonL2b").on('click', async function(){
+                let response = await BSDialog.Prompt({
+                  Type: "textbox",
+                  Title: "Modal Title",
+                  Message: "Are you sure want to wait for a response?",
+                  Size: "md",
+                  Label: "Response Text",
+				          Placeholder: "Response Text"
+                });
+
+                alert(response);
+              });
+
+            });
+          </script>
+        </div>
+
+
         <div class="pb-3 mb-3 border-bottom">
           <p><b>Example. Simple Text Modal</b> <span class="badge badge-warning">Deprecated</span></p>
           <p>Launch an empty modal</p>

bsdialog4.js

@@ -30,47 +30,17 @@ var BSDialog = {
 	},
 	Prompt: async function (options) {
 		const a = this;
-		let id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
+		let id = Math.floor(Math.random() * 10000) + 1000;
 
 		const _options = Object.assign(a.Default().PromptOptions, options);
 
-		return await new Promise((resolve, reject) => {
+		switch (_options.Type) {
-			a.Create(id, _options.Title, _options.Message, _options.Size);
+			case "textbox":
-
+				return await a.showTextboxPrompt(id, _options);
-			let html = '';
+			case "button":
-			_options.Buttons.forEach(function(e) {
+			default:
-				html += '<button type="button" class="btn btn-' + e.Colour + '" data-prompt-value="' + e.Value + '">' + e.Label + '</button>';
+				return await a.showButtonPrompt(id, _options);
-			});
+		}
-
-			a.UpdateFooter(id, 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.body.querySelectorAll(".modal").forEach(function(e) {
@@ -201,6 +171,7 @@ var BSDialog = {
 				ShowFooter: true
 			},
 			PromptOptions: {
+				Type: "button",
 				Title: "",
 				Message: "",
 				Size: "md",
@@ -208,7 +179,9 @@ var BSDialog = {
 					{ Label: "Yes", Value: "Yes", Colour: "primary" },
 					{ Label: "No", Value: "No", Colour: "secondary" },
 					{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-				]
+				],
+				Label: "",
+				Placeholder: ""
 			},
 			ToastOptions: {
 				ID: null,
@@ -316,6 +289,131 @@ var BSDialog = {
 
 		});
 	},
+	showButtonPrompt: async function (id, options) {
+		const a = this;
+
+		return await new Promise(async (resolve, reject) => {
+			await a.Show(id, options.Title, options.Message, 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.UpdateFooter(id, 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("");
+				});
+			});
+
+		});
+	},
+	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
+			});
+
+			let body = '';
+
+			if (!a.isNullOrWhitespace(options.Message)) {
+				body += '<p>' + options.Message + '</p>';
+			}
+
+			body += '<div class="form-group row">';
+
+			if (a.isNullOrWhitespace(options.Label)) {
+				body += '<div class="col-sm-12">';
+				body += '<input type="text" class="form-control" id="textbox' + id + '" placeholder="' + options.Placeholder + '">';
+				body += '</div>';
+			} else {
+				body += '<label for="textbox' + id + '" class="col-sm-4 col-form-label">' + options.Label + '</label>';
+				body += '<div class="col-sm-8">';
+				body += '<input type="text" class="form-control" id="textbox' + id + '" placeholder="' + options.Placeholder + '">';
+				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[0].querySelectorAll("button");
+
+			buttons[0].addEventListener("click", function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+				const value = modal.Body[0].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;