Merge pull request 'Added movable support' (#11 ) from release/0.1.7.022 into master

Reviewed-on: #11
Added movable support
2024-01-21 18:57:41 +00:00 · 2024-01-21 15:30:00 +00:00 · 2024-01-20 23:23:57 +00:00 · 2023-12-08 22:19:39 +00:00 · 2023-11-18 20:15:45 +00:00 · 2023-11-18 20:08:55 +00:00
3 changed files with 686 additions and 385 deletions
--- a/bs4-test.html
+++ b/bs4-test.html
@ -14,143 +14,305 @@
  <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>
+
+.text-sm {
+  font-size: 0.8em;
+}
+
+  </style>
+
+
 </head>
 <body class="py-5">
-
  <div class="container">

    <div class="row mb-3 border-bottom">
-      <div class="col-12">
+      <div class="col-sm-4 border-right">
+        <p><b>Example. Simple Text Modal</b></p>
+        <p>Launch a modal with a text body.</p>

-        <p><b>Example One</b></p>
-        <p>Launch an empty modal</p>
-        <div class="alert alert-secondary">BSDialog.Create('abc123', 'My Modal Box 123', null, 'xl');</div>
-        <p><button id="button1" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-    <div class="row mb-3 border-bottom">
-      <div class="col-12">
-
-        <p><b>Example Two</b></p>
-        <p>Launch a modal with text</p>
-        <div class="alert alert-secondary">BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg');</div>
-        <p><button id="button2" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-    <div class="row mb-3 border-bottom">
-      <div class="col-12">
-
-        <p><b>Example Three</b></p>
-        <p>Launch an empty modal then update its title, body, footer and size.</p>
-        <div class="alert alert-secondary">
-          BSDialog.Create('abc123', 'My Modal Box 123', null, 'sm');<br />
-          BSDialog.UpdateTitle('abc123', 'My Modal Box 567');<br />
-          BSDialog.UpdateBody('abc123', 'Help, I\'m toast!');<br />
-          BSDialog.UpdateFooter('abc123', '');<br />
-          BSDialog.UpdateSize('abc123', 'lg');<br />
-        </div>
-        <p><button id="button3" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-    <div class="row mb-3 border-bottom">
-      <div class="col-12">
-
-        <p><b>Example Four</b></p>
-        <p>Launch a multiple modals</p>
-        <div class="alert alert-secondary">
-          BSDialog.Create('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');<br />
-          BSDialog.Create('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');<br />
-        </div>
-        <p><button id="button4" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-    <div class="row mb-3 border-bottom">
-      <div class="col-12">
-
-        <p><b>Example Six</b></p>
-        <p>Show a toast-style modal</p>
-        <div class="alert alert-secondary">
-          BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');<br />
-        </div>
-        <p><button id="button6" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-    <div class="row mb-3 border-bottom">
-      <div class="col-12">
-
-        <p><b>Example Five</b></p>
-        <p>Launch a prompt modal</p>
-        <div class="alert alert-secondary">
-          let result = await BSDialog.Prompt({<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;Title: "Prompt",<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;Message: "This is a prompt",<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;Size: "md",<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;Buttons: [<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "Yes", Value: "Yes", Colour: "primary" },<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "No", Value: "No", Colour: "secondary" },<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }<br />
-            &nbsp;&nbsp;&nbsp;&nbsp;]<br />
-          });<br />
-          <br />
-          alert(result);<br />
-        </div>
-        <p><button id="button5" type="button" class="btn btn-primary">Launch Modal</button></p>
-
-      </div>
-    </div>
-
-  </div>
+        <p><button id="buttonL1" type="button" class="btn btn-primary">Launch Modal</button></p>

        <script>
+          $(document).ready(function(){

-
-$(document).ready(function(){
-  $("#button1").on('click', function(){
-    BSDialog.Create('abc123', 'My Modal Box 123', null, 'xl');
-  });
-
-  $("#button2").on('click', function(){
-    BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'lg');
-  });
-
-  $("#button3").on('click', function(){
-    BSDialog.Create('abc123', 'My Modal Box 123', null, 'sm');
-    BSDialog.UpdateTitle('abc123', 'My Modal Box 567');
-    BSDialog.UpdateBody('abc123', 'Help, I\'m toast!');
-    BSDialog.UpdateFooter('abc123', '');
-    BSDialog.UpdateSize('abc123', 'lg');
-  });
-
-  $("#button4").on('click', function(){
-    BSDialog.Create('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
-    BSDialog.Create('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');
-  });
-
-  $("#button6").on('click', function(){
-    BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
-  });
-
-  $("#button5").on('click', async function(){
-    let result = await BSDialog.Prompt({
-      Title: "Prompt",
-		  Message: "This is a prompt",
+            $("#buttonL1").on('click', function(){
+              BSDialog.Show({
+                ID: "modalL1",
+                Title: "Modal Title",
+                Message: "Hello Momo!",
+                URL: null,
                Size: "md",
-		  PromptType: "YesNoCancel"
+                Colour: "secondary"
+              });
            });

-    alert(result);
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog.Show({
+  ID: "modalL1",
+  Title: "Modal Title",
+  Message: "Hello Momo!",
+  URL: null,
+  Size: "md",
+  Colour: "secondary"
+});</pre>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Update Modal</b></p>
+        <p>Make changes (title, body, size or footer) to a modal.</p>
+
+        <p><button id="buttonR1" type="button" class="btn btn-primary">Launch Modal</button></p>
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonR1").on('click', function(){
+              BSDialog.Show({
+                ID: "modalR1",
+                Title: "Modal Title",
+                Message: "Hello Momo!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
              });

+              BSDialog.Update({
+                ID: "modalR1",
+                Title: "Modal Changed Title",
+                Body: "Hello momo again!",
+                URL: null,
+                Size: "lg",
+                Footer: null
+              });
+            });
+
+          });
+        </script>
+      </div>
+      <div class="col-sm-8">
+
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog.Update({
+  ID: "modalL1",
+  Title: "Modal Changed Title",
+  Body: "Hello momo again!",
+  URL: null,
+  Size: "lg",
+  Footer: null
+});</pre>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Multiple Modals (Stack)</b></p>
+        <p>Launch multiple modals, stacked on top of each other.</p>
+
+        <p><button id="buttonL3" type="button" class="btn btn-primary">Launch Modal</button></p>
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonL3").on('click', function(){
+              BSDialog.Show({
+                ID: "modalL3a",
+                Title: "Modal A Title",
+                Message: "First!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
+              });
+
+              BSDialog.Show({
+                ID: "modalL3b",
+                Title: "Modal B Title",
+                Message: "Second!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
+              });
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog.Show({
+  ID: "modalL3a",
+  Title: "Modal A Title",
+  Message: "First!",
+  URL: null,
+  Size: "md",
+  Colour: "secondary"
 });

+BSDialog.Show({
+  ID: "modalL3b",
+  Title: "Modal B Title",
+  Message: "Second!",
+  URL: null,
+  Size: "md",
+  Colour: "secondary"
+});</pre>
+        </div>
+      </div>
+    </div>

+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Button Prompt (Modal)</b></p>
+        <p>Launch a modal with a prompt of several buttons. Modal waits for a response from one of the buttons.</p>
+
+        <p><button id="buttonL2" type="button" class="btn btn-primary">Launch Modal</button></p>
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonL2").on('click', async function(){
+              let response = await BSDialog.Prompt({
+                Title: "Modal Title",
+                Message: "Are you sure want to wait for a response?",
+                Size: "md",
+                Buttons: [
+                  { Label: "Yes", Value: "Yes", Colour: "primary" },
+                  { Label: "No", Value: "No", Colour: "secondary" },
+                  { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
+                ]
+              });
+
+              alert(response);
+            });
+
+          });
        </script>
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>let response = await BSDialog.Prompt({
+  Title: "Modal Title",
+  Message: "Are you sure want to wait for a response?",
+  Size: "md",
+  Buttons: [
+    { Label: "Yes", Value: "Yes", Colour: "primary" },
+    { Label: "No", Value: "No", Colour: "secondary" },
+    { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
+  ]
+});
+
+alert(response);</pre>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Text Prompt (Modal)</b></p>
+        <p>Launch a modal with a text prompt. Modal waits for a response from the textbox.</p>
+
+        <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="col-sm-8">
+        <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>
+      </div>
+    </div>
+
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Close Modal</b></p>
+        <p>Close a modal using its identifier</p>
+        <p><button id="buttonR2" type="button" class="btn btn-primary">Launch Modal</button></p>
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonR2").on('click', function(){
+              BSDialog.Close("modalR1");
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog.Close("modalR1");</pre>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
+
+        <p><b>Example. Clear Modal</b></p>
+        <p>Close all modals</p>
+        <p><button id="buttonR3" type="button" class="btn btn-primary">Launch Modal</button></p>
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonR3").on('click', function(){
+              BSDialog.Clear();
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog.Clear();</pre>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </body>
 </html>
--- a/bsdialog4.js
+++ b/bsdialog4.js
@ -1,113 +1,189 @@
 /**
 * BSDialog4
- * @version v0.1.2.043 (2023/08/20 00:39)
+ * @version v0.1.7.022 (2024/01/21 03:40)
 */
-var BSDialog = {
-	Create: async function (id, title, url, size) {
-		await this.Show({
-			ID: id,
-			Title: title,
-			Message: url,
-			URL: url,
-			Size: size,
-			Colour: "secondary"
-		});
-	},
-	Clear: function () {
-		this.body.querySelectorAll(".modal").forEach(function(e) {
-			e.parentNode.removeChild(e);
+class BSDialog4 {
+  constructor() {
+	}
+
+	get #prefix() {
+		return "bsdia4_";
+	}
+
+	get #body() {
+		return document.getElementsByTagName("body")[0];
+	}
+
+	get #sizeList() {
+		return [
+			"modal-sm",
+			"modal-md",
+			"modal-lg",
+			"modal-xl",
+			"modal-xxl"
+		];
+	}
+
+
+	async Show(options) {
+		const a = this;
+		const _options = Object.assign({
+			ID: null,
+			Title: "",
+			Message: "",
+			URL: null,
+			Size: "md",
+			Colour: "secondary",
+			ShowFooter: true,
+			EasyClose: true,
+			IsMovable: true
+		}, options);
+
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.IsMovable, _options.Colour);
+
+		$("#" + a.#prefix + _options.ID).modal({
+			backdrop: _options.EasyClose,
+			show: true
 		});

-		this.removeBackdrop();
-	},
-	Close: function (id) {
-		let modal = this.Find(id);
+		if (a.#isURL(_options.URL)) {
+			const response = await a.#retrieveURL(_options.URL);
+
+			await a.Update({ ID: _options.ID, Body: response });
+		} else {
+			await a.Update({ ID: _options.ID, Body: _options.Message });
+		}
+	}
+
+	async Prompt(options) {
+		const a = this;
+		const id = Math.floor(Math.random() * 10000) + 1000;
+		const _options = Object.assign({
+			Type: "button",
+			Title: "",
+			Message: "",
+			Size: "md",
+			EasyClose: true,
+			IsMovable: 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
+			}
+		}, options);
+
+		switch (_options.Type) {
+			case "textbox":
+				return await a.#showTextboxPrompt(id, _options);
+			case "button":
+			default:
+				return await a.#showButtonPrompt(id, _options);
+		}
+	}
+
+	async Clear() {
+		const a = this;
+
+		document.querySelectorAll('.modal').forEach(async function(e) {
+			await a.Close(e.getAttribute("id"));
+		});
+	}
+
+	async Close(id) {
+		const a = this;
+
+		if (id.toString().startsWith(a.#prefix)) {
+			id = id.toString().substr(a.#prefix.length);
+		}
+
+		const node = document.getElementById(a.#prefix + id);
+
+		if (node) {
+			await $(node).modal('hide');
+
+			node.parentNode.removeChild(node);
+		}
+
+		if (document.querySelectorAll('.modal').length > 0) {
+			if (!a.#body.classList.contains("modal-open")) {
+				a.#body.classList.add("modal-open");
+
+				a.#body.style.paddingRight = "17px";
+			}
+		}
+	}
+
+	async Pop() {
+		const a = this;
+
+		if (document.querySelectorAll('.modal').length > 0) {
+			const id = document.querySelectorAll('.modal')[0].getAttribute("id");
+
+			await a.Close(id);
+		}
+	}
+
+	async Update(options) {
+		const a = this;
+		const _options = Object.assign({
+			ID: null,
+			Title: null,
+			Body: null,
+			URL: null,
+			Footer: null,
+			Size: null
+		}, options);
+
+		const modal = a.Find(_options.ID);
 		if (modal === null) {
 		 	return;
 		}

-		modal.Modal.forEach(function(e) {
-			e.parentNode.removeChild(e);
-		});
-
-		modal = this.Find(id);
-		if (modal !== null) {
-			return;
+		if (!a.#isNullOrWhitespace(_options.Title)) {
+			modal.Title.innerHTML = _options.Title;
 		}

-		this.removeBackdrop();
-	},
-	UpdateTitle: function (id, title) {
-		let modal = this.Find(id);
-		if (modal === null) {
-		 	return;
+		if (!a.#isNullOrWhitespace(_options.Body)) {
+			a.#html(modal.Body, _options.Body);
 		}

-		modal.Title.forEach(function(e) {
-			e.innerHTML = title;
-		});
-	},
-	UpdateSize: function (id, size) {
-		let modal = this.Find(id);
-		if (modal === null) {
-		 	return;
+		if (!this.#isNullOrWhitespace(_options.Body)) {
+			a.#html(modal.Body, _options.Body);
+		} else {
+			if (this.#isURL(_options.URL)) {
+				const response = await a.#retrieveURL(_options.URL);
+
+				await a.Update({ ID: _options.ID, Body: response });
+			}
 		}

-		modal.Modal.forEach(function(e) {
-			let modalDialog = e.querySelectorAll(".modal-dialog")[0];
-
-			modalDialog.classList.remove("modal-sm");
-			modalDialog.classList.remove("modal-md");
-			modalDialog.classList.remove("modal-lg");
-			modalDialog.classList.remove("modal-xl");
-			modalDialog.classList.add("modal-" + size);
-		});
-	},
-	UpdateBody: function (id, content) {
-		var a = this;
-
-		let modal = a.Find(id);
-		if (modal === null) {
-		 	return;
+		if (!a.#isNullOrWhitespace(_options.Footer)) {
+			a.#html(modal.Footer, _options.Footer);
 		}

-		modal.Body.forEach(function(e) {
-			a.html(e, content);
-		});
-	},
-	UpdateBodyRemote: async function (id, url) {
-		var a = this;
-
-		if (!a.Exists(id)) {
-		 	return;
+		if (!a.#isNullOrWhitespace(_options.Size)) {
+			a.#setSize(_options.ID, "modal-" + _options.Size);
 		}

-		await fetch(url, {
-			cache: 'no-cache',
-			credentials: 'same-origin'
-		}).then(data => data.text()).then(data => {
-			a.UpdateBody(id, data);
-		}).catch((error) => {
-			a.UpdateBody(id, "Error: " + error);
-		});
-	},
-	UpdateFooter: function (id, content) {
-		var a = this;
-
-		let modal = a.Find(id);
-		if (modal === null) {
-		 	return;
 	}

-		modal.Footer.forEach(function(e) {
-			a.html(e, content);
-		});
-	},
-	Exists: function (id) {
-		return (this.Find(id) !== null);
-	},
-	Find: function (id) {
-		let modal = this.body.querySelectorAll("#" + this.pfx + id + ".modal");
+	Exists(id) {
+		const a = this;
+
+		return (a.Find(id) !== null);
+	}
+
+	Find(id) {
+		const a = this;
+		const modal = a.#body.querySelectorAll("#" + a.#prefix + id + ".modal");
+
 		if (!modal) {
 			return null;
 		}
@ -117,80 +193,134 @@ var BSDialog = {
 		}

 		return {
-			Title: modal[0].querySelectorAll(".modal-title"),
-			Body: modal[0].querySelectorAll(".modal-body"),
-			Footer: modal[0].querySelectorAll(".modal-footer"),
+			Title: modal[0].querySelectorAll(".modal-title")[0],
+			Header: modal[0].querySelectorAll(".modal-header")[0],
+			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]
 		};
-	},
-	Show: async function (options) {
+	}
+
+
+	addModal(id, title, size, showFooter, isMovable, closeColour) {
 		const a = this;
-		const _options = Object.assign(a.DefaultShowOptions, 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.Colour);
-
-		if (_options.URL == null) {
-			await a.UpdateBody(_options.ID, _options.Message);
-		} else {
-			if (a.isNullOrWhitespace(_options.URL)) {
-				await a.UpdateBody(_options.ID, _options.URL);
-			} else {
-				if (_options.URL.startsWith("http://") || _options.URL.startsWith("https://") || _options.URL.startsWith("/")) {
-					await a.UpdateBodyRemote(_options.ID, _options.URL);
-				} else {
-					await a.UpdateBody(_options.ID, _options.URL);
+		// don't allow duplicates
+		let modal = a.Find(id);
+		if (modal !== null) {
+		 	return;
 		}
+
+		let html = "";
+		html += '<div class="modal fade" style="display: none;" id="' + a.#prefix + 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">';
+		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" style="user-select: none;">';
+		html += '          <span aria-hidden="true">&times;</span>';
+		html += '        </button>';
+		html += '      </div>';
+		html += '      <div class="modal-body">';
+
+		html += '<div class="row mt-3 pb-3">';
+		html += '  <div class="col-12 text-center">';
+		html += '    <div class="spinner-border" role="status">';
+		html += '	     <span class="sr-only">Loading...</span>';
+		html += '    </div>';
+		html += '  </div>';
+		html += '</div>';
+
+		html += '      </div>';
+
+		if (showFooter === true) {
+			html += '      <div class="modal-footer">';
+			html += '        <button type="button" class="btn btn-' + closeColour + '" data-dismiss="modal">Close</button>';
+			html += '      </div>';
 		}
+
+		html += '    </div>';
+		html += '  </div>';
+		html += '</div>';
+
+		a.#appendHtml(a.#body, html);
+
+		modal = a.Find(id);
+		if (modal === null) {
+			return;
 	 	}
-	},
-	Toast: function (options) {
-		const a = this;
-		const _options = Object.assign(a.DefaultToastOptions, options);

-		a.Create(_options.ID, _options.Title, null, _options.Size);
-		a.UpdateBody(_options.ID, _options.Message);
+		$("#" + a.#prefix + id).on('hidden.bs.modal', function (event) {
+			a.Close(id);
+		})

-		const modal = a.Find(_options.ID);
+		modal.Title.addEventListener("dblclick", function(e){
+			e.stopPropagation();
+			e.preventDefault();

-		modal.Footer.forEach(function(e) {
-			e.parentNode.removeChild(e);
+			a.#toggleSize(id);
 		});

-	},
-	ShowToast: function (id, title, message, size) {
-		this.Toast({
+		if (isMovable) {
+			const panel = modal.Modal.querySelectorAll(".modal-dialog")[0];
+			let isMovable = false;
+			let currentPos = { X: 0, Y: 0 };
+			let movePos = { X: 0, Y: 0 };
+
+			modal.Title.addEventListener("mousedown", function(e) {
+				if ((e.buttons == 1) && !isMovable) {
+					movePos = { X: e.clientX, Y: e.clientY };
+					currentPos = {
+						X: (a.#isNullOrWhitespace(panel.style.left) ? 0 : parseInt(panel.style.left.replace("px", ""))),
+						Y: (a.#isNullOrWhitespace(panel.style.top) ? 0 : parseInt(panel.style.top.replace("px", "")))
+					};
+					isMovable = true;
+
+					modal.Title.style.cursor = "move";
+
+					e.preventDefault();
+				}
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				if (isMovable) {
+					isMovable = false;
+					modal.Title.style.cursor = "default";
+				}
+			});
+
+			document.addEventListener("mousemove", function(e) {
+				if ((e.buttons == 1) && isMovable) {
+					panel.style.left = ((e.clientX - movePos.X) + currentPos.X) + 'px';
+					panel.style.top = ((e.clientY - movePos.Y) + currentPos.Y) + 'px';
+				}
+			});
+		}
+
+	}
+
+	async #showButtonPrompt(id, options) {
+		const a = this;
+
+		return await new Promise(async (resolve, reject) => {
+			await a.Show({
 				ID: id,
-			Title: title,
-			Message: message,
-			Size: size
+				Title: options.Title,
+				Message: options.Message,
+				Size: options.Size,
+				EasyClose: options.EasyClose
 			});
-	},
-	Prompt: async function (options) {
-		const a = this;
-		let id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
-
-		const _options = Object.assign(a.DefaultPromptOptions, options);
-
-		return await new Promise((resolve, reject) => {
-
-			a.Create(id, _options.Title, _options.Message, _options.Size);

 			let html = '';
-			_options.Buttons.forEach(function(e) {
+			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);
+			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();
@ -215,134 +345,112 @@ var BSDialog = {
 			});

 		});
-	},
-	DefaultShowOptions: {
-		ID: null,
-		Title: "",
-		Message: "",
-		URL: null,
-		Size: "md",
-		Colour: "secondary"
-	},
-	DefaultToastOptions: {
-		ID: null,
-		Title: "",
-		Message: "",
-		Size: "md"
-	},
-	DefaultPromptOptions: {
-		Title: "",
-		Message: "",
-		Size: "md",
-		Buttons: [
-			{ Label: "Yes", Value: "Yes", Colour: "primary" },
-			{ Label: "No", Value: "No", Colour: "secondary" },
-			{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-		]
-	},
-	addBackdrop: function () {
-		let 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>');
+	async #showTextboxPrompt(id, options) {
+		const a = this;

-		// lock background
-		a.body.classList.add("modal-open");
-		a.body.style.overflow = "hidden";
+		return await new Promise(async (resolve, reject) => {
+			options.Buttons = [
+				{ Label: "OK", Value: "", Colour: "primary" },
+				{ Label: "Cancel", Value: "", Colour: "secondary" }
+			];

-		// close
-		let backdrop = a.body.querySelectorAll(".modal-backdrop")[0];
-		backdrop.addEventListener("click", function(e){
+			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();

-			a.Clear();
+				const value = modal.Body.querySelectorAll("input")[0].value;
+
+				a.Close(id);
+
+				resolve(value);
 			});
-	},
-	addModal: function (id, title, size, closeColour) {
-		var a = this;

-		// don't allow duplicates
-		let modal = a.Find(id);
-		if (modal !== null) {
-		 	return;
-		}
-
-		let html = "";
-		html += '<div class="modal fade show d-block" id="' + a.pfx + id + '" tabindex="-1">';
-		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 += '        <button type="button" class="close" data-dismiss="modal" aria-label="Close">';
-		html += '          <span aria-hidden="true">&times;</span>';
-		html += '        </button>';
-		html += '      </div>';
-		html += '      <div class="modal-body">';
-
-		html += '<div class="row mt-3 pb-3">';
-		html += '  <div class="col-12 text-center">';
-		html += '    <div class="spinner-border" role="status">';
-		html += '	     <span class="sr-only">Loading...</span>';
-		html += '    </div>';
-		html += '  </div>';
-		html += '</div>';
-
-		html += '      </div>';
-		html += '      <div class="modal-footer">';
-		html += '        <button type="button" class="btn btn-' + closeColour + '" data-dismiss="modal">Close</button>';
-		html += '      </div>';
-		html += '    </div>';
-		html += '  </div>';
-		html += '</div>';
-
-		a.appendHtml(a.body, html);
-
-		modal = a.Find(id);
-		if (modal === null) {
-			return;
-	 	}
-
-		modal.Close.forEach(function(e){
-			e.addEventListener("click", function(e){
+			buttons[1].addEventListener("click", function(e){
 				e.stopPropagation();
 				e.preventDefault();

 				a.Close(id);
+
+				resolve("");
 			});

-			 e.addEventListener("auxclick", function(e){
+			modal.Close.forEach(function(sender) {
+				sender.addEventListener("click", function(e){
 					e.stopPropagation();
 					e.preventDefault();

-				if (e.button === 1) {
-					a.toggleSize();
-				}
+					a.Close(id);
+
+					resolve("");
+				});
 			});

 		});
-	},
-	appendHtml: function (el, html) {
+	}
+
+	#appendHtml(el, html) {
 		let node = document.createElement('template');
 		node.innerHTML = html;

 		node = node.content.firstChild;

 		el.appendChild(node);
-	},
-	html: function (el, newHtml) {
-		/// todo: replace with pure JS
+	}
+
+	#html(el, newHtml) {
 		if (jQuery) {
 			jQuery(el).html(newHtml);
 		} else {
 			el.innerHTML = newHtml;
 		}
-	},
-	isNullOrWhitespace: function(e) {
+	}
+
+	#isNullOrWhitespace(e) {
 		if (typeof (e) == "undefined") {
 			return true;
 		}
@ -356,50 +464,81 @@ var BSDialog = {
 		}

 		return (e.trim().length <= 0);
-	},
-	removeBackdrop: function () {
-		if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
-			return;
 	}

-		if (this.body.querySelectorAll(".modal").length > 0) {
-			return;
+	async #retrieveURL(url) {
+		return await new Promise(async (resolve) => {
+			await fetch(url, {
+				cache: 'no-cache',
+				credentials: 'same-origin'
+			}).then(data => data.text()).then(data => {
+				resolve(data);
+			}).catch((error) => {
+				resolve("Error: " + error);
+			});
+		});
 	}

-		let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
-		backdrop.parentNode.removeChild(backdrop);
+	#isURL(value) {
+		const a = this;

-		// unlock background
-		this.body.classList.remove("modal-open");
-		this.body.style.overflow = null;
-	},
-	toggleSize: function () {
-		var a = this;
+		if (a.#isNullOrWhitespace(value)) {
+			return false;
+		}

-		let modal = a.Find(a.id);
+		if (value.startsWith("http://") || value.startsWith("https://") || value.startsWith("/")) {
+			return true;
+		}
+
+		return false;
+	}
+
+	#setSize(id, size) {
+		const a = this;
+
+		const modal = a.Find(id);
 		if (modal === null) {
 		 	return;
 		}

-		let modalDialog = modal.Modal[0].querySelectorAll(".modal-dialog")[0];
-		if (modalDialog.classList.contains('modal-sm')) {
-			modalDialog.classList.remove("modal-sm");
-			modalDialog.classList.add("modal-md");
-		} else if (modalDialog.classList.contains('modal-md')) {
-			modalDialog.classList.remove("modal-md");
-			modalDialog.classList.add("modal-lg");
-		} else if (modalDialog.classList.contains('modal-lg')) {
-			modalDialog.classList.remove("modal-lg");
-			modalDialog.classList.add("modal-xl");
-		} else if (modalDialog.classList.contains('modal-xl')) {
-			modalDialog.classList.remove("modal-xl");
-			modalDialog.classList.add("modal-sm");
-		} else {
-			modalDialog.classList.remove("modal-sm");
-			modalDialog.classList.remove("modal-md");
-			modalDialog.classList.remove("modal-lg");
-			modalDialog.classList.remove("modal-xl");
-			modalDialog.classList.add("modal-md");
+		let modalDialog = modal.Modal.querySelectorAll(".modal-dialog")[0];
+
+		for (let i=0; i<a.#sizeList.length; i++) {
+			modalDialog.classList.remove(a.#sizeList[i]);
+		}
+
+		modalDialog.classList.add(size);
+	}
+
+	#toggleSize(id) {
+		const a = this;
+
+		const modal = a.Find(id);
+		if (modal === null) {
+		 	return;
+		}
+
+		let modalDialog = modal.Modal.querySelectorAll(".modal-dialog")[0];
+
+		let pos = 0;
+		for (let i=0; i<a.#sizeList.length; i++) {
+			if (modalDialog.classList.contains(a.#sizeList[i])) {
+				modalDialog.classList.remove(a.#sizeList[i]);
+				pos = i;
+				break;
 			}
 		}
-};
+
+		pos++;
+
+		if (pos > (a.#sizeList.length - 1)) {
+			pos = 0;
+		}
+
+		modalDialog.classList.add(a.#sizeList[pos]);
+	}
+
+}
+
+
+var BSDialog = new BSDialog4();
--- a/bsdialog4.min.js
+++ b/bsdialog4.min.js
Author	SHA1	Message	Date
Ray	d4bec5b9d4	Merge pull request 'Added movable support' (#11 ) from release/0.1.7.022 into master Reviewed-on: #11	2024-01-21 18:57:41 +00:00
Ray	462f69f221	Added movable support	2024-01-21 15:30:00 +00:00
Ray	57b8a3ce0b	Merge pull request 'Added Pop() to close top-most modal' (#10 ) from release/0.1.6.015 into master Reviewed-on: #10	2024-01-20 23:23:57 +00:00
Ray	ecd6dd156d	Added Pop() to close top-most modal Fixed stacking modal causes scrolling and focus failure	2023-12-08 22:19:39 +00:00
Ray	7e30e99c81	Merge pull request 'Changed test demo layout' (#9 ) from release/0.1.5.038 into master Reviewed-on: #9	2023-11-18 20:15:45 +00:00
Ray	c3bddbe7c7	Changed test demo layout Changed use of modal JS to close	2023-11-18 20:08:55 +00:00
Ray	7d4057fdbc	Merge pull request 'Refactor to JS class' (#8 ) from release/0.1.5.017 into master Reviewed-on: #8	2023-11-16 22:06:49 +00:00
Ray	1b3b35afeb	Refactor to JS class	2023-11-16 21:19:18 +00:00
Ray	ff679d739b	Merge pull request 'release/0.1.5.006' (#7 ) from release/0.1.5.006 into master Reviewed-on: #7	2023-11-14 18:00:56 +00:00
Ray	ea8965353d	Updated version no.	2023-11-14 17:52:10 +00:00
Ray	ae3411f99e	Changed to BS modal methods for launching modal Removed individual change and toast support	2023-11-14 17:50:38 +00:00
Ray	f4872143c8	Merge pull request 'Added support and option for close-on-click-away' (#6 ) from release/0.1.4.031 into master Reviewed-on: #6	2023-11-12 14:27:13 +00:00
Ray	a56628b68c	Added support and option for close-on-click-away Refactor to remove arrays in Find	2023-11-04 02:46:04 +00:00
Ray	44ab87e867	Merge pull request 'release/0.1.3.017' (#5 ) from release/0.1.3.017 into master Reviewed-on: #5	2023-09-06 22:30:46 +00:00
Ray	d7f4f60e4d	Refactored to stop using deprecated code	2023-08-30 14:26:40 +01:00
Ray	e9198dea75	Added support for textbox prompts	2023-08-30 01:55:27 +01:00
Ray	0d3df02449	Refactor resizing	2023-08-30 01:02:45 +01:00
Ray	46cda4fbf1	Fixed re-sizing fault	2023-08-30 00:51:47 +01:00
Ray	03f0ce6045	Merge pull request 'release/0.1.2.046' (#4 ) from release/0.1.2.046 into master Reviewed-on: #4	2023-08-21 18:15:42 +00:00
Ray	a5335beab9	Deprecated toast Added Show and Prompt methods Added modern options arguments for methods	2023-08-21 18:51:13 +01:00