Merge pull request 'Added support for movable modals' (#8 ) from release/0.2.2.003 into master

Reviewed-on: #8
Added support for movable modals
2024-01-22 20:58:19 +00:00 · 2024-01-22 20:57:41 +00:00 · 2023-11-18 19:27:55 +00:00 · 2023-11-18 18:53:05 +00:00 · 2023-11-14 20:56:40 +00:00 · 2023-11-14 20:56:24 +00:00
3 changed files with 731 additions and 137 deletions
--- a/bs5-test.html
+++ b/bs5-test.html
@ -0,0 +1,317 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="" />
+  <meta name="keyword" content="" />
+
+  <!-- jquery -->
+  <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/jquery/3.7.0/dist/jquery.min.js"></script>
+  <!-- bootstrap -->
+  <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="bsdialog5.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-sm-4 border-right">
+        <p><b>Example. Simple Text Modal</b></p>
+        <p>Launch a modal with a text body.</p>
+
+        <p><button id="buttonL1" type="button" class="btn btn-primary">Launch Modal</button></p>
+
+        <script>
+          $(document).ready(function(){
+
+            $("#buttonL1").on('click', function(){
+              BSDialog5.Show({
+                ID: "modalL1",
+                Title: "Modal Title",
+                Message: "Hello Momo!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
+              });
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog5.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(){
+              BSDialog5.Show({
+                ID: "modalR1",
+                Title: "Modal Title",
+                Message: "Hello Momo!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
+              });
+
+              BSDialog5.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>BSDialog5.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(){
+              BSDialog5.Show({
+                ID: "modalL3a",
+                Title: "Modal A Title",
+                Message: "First!",
+                URL: null,
+                Size: "md",
+                Colour: "secondary"
+              });
+
+              BSDialog5.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>BSDialog5.Show({
+  ID: "modalL3a",
+  Title: "Modal A Title",
+  Message: "First!",
+  URL: null,
+  Size: "md",
+  Colour: "secondary"
+});
+
+BSDialog5.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 BSDialog5.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 BSDialog5.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 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="col-sm-8">
+        <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>
+      </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(){
+              BSDialog5.Close("modalR1");
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog5.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(){
+              BSDialog5.Clear();
+            });
+
+          });
+        </script>
+
+      </div>
+      <div class="col-sm-8">
+        <div class="alert alert-secondary text-sm">
+<pre>BSDialog5.Clear();</pre>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>
--- a/bsdialog5.js
+++ b/bsdialog5.js
@ -1,85 +1,163 @@
 /**
 * BSDialog5
- * @version v0.1.1.063 (2023/07/275 1713)
+ * @version v0.2.2.003 (2024/01/22 2037)
 */
-var BSDialog5 = {
-	Create: async function (id, title, url, size) {
-		var a = this;
+class BSDialog05 {

-		a.pfx = "bsdia5_";
-		a.body = document.getElementsByTagName("body")[0];
+  constructor() {
+	}

-		a.addBackdrop();
-		a.addModal(id, title, size);

-		if (a.isNullOrWhitespace(url)) {
-			a.UpdateBody(id, "");
+	get #prefix() {
+		return "bsdia5_";
+	}
+
+	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);
+
+		(new bootstrap.Modal(document.getElementById(a.#prefix + _options.ID), {
+			backdrop: _options.EasyClose
+		})).show();
+
+		if (a.#isURL(_options.URL)) {
+			await a.UpdateBodyRemote(_options.ID, _options.URL);
 		} else {
-			await a.UpdateBodyRemote(id, url);
+			await a.Update({ ID: _options.ID, Body: _options.Message });
 		}
-	},
-	Clear: function () {
-		this.body.querySelectorAll(".modal").forEach(function(e) {
-			e.parentNode.removeChild(e);
-		});
+	}

-		this.removeBackdrop();
-	},
-	Close: function (id) {
-		let modal = this.Find(id);
+	async Prompt(options) {
+		const a = this;
+		const id = "prompt" + 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(function(e) {
+			const modal = bootstrap.Modal.getInstance(e);
+
+			if (modal) {
+				modal.hide();
+			}
+		});
+	}
+
+  async Close(id) {
+		const a = this;
+
+		if (id.startsWith(a.#prefix)) {
+			id = id.substr(a.#prefix.length);
+		}
+
+		const node = document.getElementById(a.#prefix + id);
+		const modal = bootstrap.Modal.getInstance(node);
+
+		if (modal){
+			modal.hide();
+		}
+
+		if (node) {
+			node.parentNode.removeChild(node);
+		}
+	}
+
+	async Update(options) {
+		const a = this;
+		let _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 (!this.#isNullOrWhitespace(_options.Title)) {
+			modal.Title.innerHTML = _options.Title;
 		}

-		this.removeBackdrop();
-	},
-	UpdateTitle: function (id, title) {
-		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)) {
+				await a.UpdateBodyRemote(_options.ID, _options.URL);
+			}
 		}

-		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.Footer)) {
+			a.#html(modal.Footer, _options.Footer);
 		}

-		modal.Modal.forEach(function(e) {
-			e.classList.remove("modal-sm");
-			e.classList.remove("modal-md");
-			e.classList.remove("modal-lg");
-			e.classList.remove("modal-xl");
-			e.classList.add("modal-" + size);
-		});
-	},
-	UpdateBody: function (id, content) {
-		var a = this;
-
-		let modal = a.Find(id);
-		if (modal === null) {
-		 	return;
+		if (!this.#isNullOrWhitespace(_options.Size)) {
+			a.#setSize(_options.ID, "modal-" + _options.Size);
 		}

-		modal.Body.forEach(function(e) {
-			a.html(e, content);
-		});
-	},
-	UpdateBodyRemote: async function (id, url) {
-		var a = this;
+	}
+
+	async UpdateBodyRemote(id, url) {
+		const a = this;

 		if (!a.Exists(id)) {
 		 	return;
@ -89,16 +167,20 @@ var BSDialog5 = {
 			cache: 'no-cache',
 			credentials: 'same-origin'
 		}).then(data => data.text()).then(data => {
-			a.UpdateBody(id, data);
+			a.Update({ ID: id, Body: data });
 		}).catch((error) => {
-			a.UpdateBody(id, "Error: " + error);
+			a.Update({ ID: id, Body: "Error: " + error });
 		});
-	},
-	Exists: function (id) {
+	}
+
+	Exists(id) {
 		return (this.Find(id) !== null);
-	},
-	Find: function (id) {
-		let modal = this.body.querySelectorAll("#" + this.pfx + id + ".modal");
+	}
+
+	Find(id) {
+		const a = this;
+
+		const modal = a.#body.querySelectorAll("#" + a.#prefix + id + ".modal");
 		if (!modal) {
 			return null;
 		}
@ -108,42 +190,18 @@ var BSDialog5 = {
 		}

 		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-bs-dismiss='modal']"),
-			Modal: modal
+			Modal: modal[0]
 		};
-	},
-	ShowToast: function (id, title, message, size) {
-		this.Create(id, title, null, size);
-		this.UpdateBody(id, message);
-	},
-	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>');
-
-		// 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) {
-		var a = this;
+	#addModal(id, title, size, showFooter, isMovable, closeColour) {
+		const a = this;

 		// don't allow duplicates
 		let modal = a.Find(id);
@ -152,12 +210,12 @@ var BSDialog5 = {
 		}

 		let html = "";
-		html += '<div class="modal modal-' + size + ' fade show d-block" id="' + a.pfx + id + '" tabindex="-1" aria-modal="true" role="dialog">';
+		html += '<div class="modal modal-' + size + ' fade" id="' + a.#prefix + id + '" tabindex="-1" aria-labelledby="' + a.#prefix + id + '" aria-hidden="true" style="display:none;">';
 		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 += '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
+		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" style="user-select: none;"></button>';
 		html += '      </div>';
 		html += '      <div class="modal-body">';

@ -170,65 +228,225 @@ var BSDialog5 = {
 		html += '</div>';

 		html += '      </div>';
-		html += '      <div class="modal-footer">';
-		html += '        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>';
-		html += '      </div>';
+
+		if (showFooter === true) {
+			html += '      <div class="modal-footer">';
+			html += '        <button type="button" class="btn btn-' + closeColour + '" data-bs-dismiss="modal">Close</button>';
+			html += '      </div>';
+		}
+
 		html += '    </div>';
 		html += '  </div>';
 		html += '</div>';

-		a.appendHtml(a.body, html);
+		a.#appendHtml(a.#body, html);

 		modal = a.Find(id);
 		if (modal === null) {
 			return;
 	 	}

-		// modal.addEventListener("click", function(e){
-		// 	e.stopPropagation();
-		// 	e.preventDefault();
+		document.getElementById(a.#prefix + id).addEventListener('hidden.bs.modal', function (event) {
+			a.Close(id);
+		});

-		// 	a.Close(id);
-		// });
+		modal.Title.addEventListener("dblclick", function(e){
+			e.stopPropagation();
+			e.preventDefault();

-		modal.Close.forEach(function(e){
-			e.addEventListener("click", function(e){
+			a.#toggleSize(id);
+		});
+
+		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: options.Title,
+				Message: options.Message,
+				Size: options.Size,
+				EasyClose: options.EasyClose,
+				IsMovable: options.IsMovable
+			});
+
+			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("");
+				});
+			});
+
+		});
+	}
+
+	async #showTextboxPrompt(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,
+				IsMovable: options.IsMovable
+			});
+
+			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", async function(e){
 				e.stopPropagation();
 				e.preventDefault();

-		 		a.Close(id);
-		 	});
+				const value = modal.Body.querySelectorAll("input")[0].value;
+
+				await a.Close(id);
+
+				resolve(value);
+			});
+
+			buttons[1].addEventListener("click", async function(e){
+				e.stopPropagation();
+				e.preventDefault();
+
+				await a.Close(id);
+
+				resolve("");
+			});
+
+			modal.Close.forEach(async function(sender) {
+				sender.addEventListener("click", async function(e){
+					e.stopPropagation();
+					e.preventDefault();
+
+					await a.Close(id);
+
+					resolve("");
+				});
+			});
+
 		});
-	},
-	removeBackdrop: function () {
-		if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
-			return;
-		}
+	}

-		let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
-		backdrop.parentNode.removeChild(backdrop);
-
-		// unlock background
-		this.body.classList.remove("modal-open");
-		this.body.style.overflow = null;
-	},
-	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;
 		}
@ -243,4 +461,63 @@ var BSDialog5 = {

 		return (e.trim().length <= 0);
 	}
-};
+
+	#isURL(value) {
+		const a = this;
+
+		if (a.#isNullOrWhitespace(value)) {
+			return false;
+		}
+
+		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;
+		}
+
+		for (let i=0; i<a.#sizeList.length; i++) {
+			modal.Modal.classList.remove(a.#sizeList[i]);
+		}
+
+		modal.Modal.classList.add(size);
+	}
+
+	#toggleSize(id) {
+		const a = this;
+
+		const modal = a.Find(id);
+		if (modal === null) {
+		 	return;
+		}
+
+		let pos = 0;
+		for (let i=0; i<a.#sizeList.length; i++) {
+			if (modal.Modal.classList.contains(a.#sizeList[i])) {
+				modal.Modal.classList.remove(a.#sizeList[i]);
+				pos = i;
+				break;
+			}
+		}
+
+		pos++;
+
+		if (pos > (a.#sizeList.length - 1)) {
+			pos = 0;
+		}
+
+		modal.Modal.classList.add(a.#sizeList[pos]);
+	}
+
+}
+
+
+var BSDialog5 = new BSDialog05();
--- a/bsdialog5.min.js
+++ b/bsdialog5.min.js
Author	SHA1	Message	Date
Ray	38473c3861	Merge pull request 'Added support for movable modals' (#8 ) from release/0.2.2.003 into master Reviewed-on: #8	2024-01-22 20:58:19 +00:00
Ray	0e79aa275b	Added support for movable modals	2024-01-22 20:57:41 +00:00
Ray	4a1a9f88ea	Merge pull request 'Changed to use JS class pattern' (#7 ) from release/0.2.1.068 into master Reviewed-on: #7	2023-11-18 19:27:55 +00:00
Ray	6ebb4bbe93	Changed to use JS class pattern Change demo test to use a different layout	2023-11-18 18:53:05 +00:00
Ray	7b62bec22a	Merge pull request 'Changed to using modal methods to launch modal' (#6 ) from release/0.2.1.005 into master Reviewed-on: #6	2023-11-14 20:56:40 +00:00
Ray	a6f9eb561b	Merge pull request 'release/0.2.0.055' (#5 ) from release/0.2.0.055 into master Reviewed-on: #5	2023-11-14 20:56:24 +00:00
Ray	a0263843ae	Changed to using modal methods to launch modal	2023-11-14 20:47:57 +00:00
Ray	22194c91ad	Added minified file	2023-11-12 14:52:18 +00:00
Ray	c366a2a9d2	Added support for easy close Added support for textbox prompts	2023-11-12 14:51:35 +00:00
Ray	94bbd618f5	Merge pull request 'Remove Create and Toast' (#4 ) from release/0.2.0.013 into master Reviewed-on: #4	2023-08-21 20:25:46 +00:00
Ray	336a8f2370	Remove Create and Toast Changed Show and Prompt methods to use modern options Improved test HTML file	2023-08-21 21:16:47 +01:00
Ray	9cb2a09b3a	Merge pull request 'Fixed improper removal of backdrop for multiple modals' (#3 ) from release/0.1.2.014 into master Reviewed-on: #3	2023-08-19 14:00:24 +00:00
Ray	89ce6ba75d	Fixed improper removal of backdrop for multiple modals Improved test HTML file	2023-08-19 14:06:34 +01:00
Ray	ccc491fe68	Merge pull request 'release/0.1.2.x' (#2 ) from release/0.1.2.x into master Reviewed-on: #2	2023-08-03 13:03:14 +00:00
Ray	035545c26b	Fixed: failed to load ajax	2023-08-03 14:02:22 +01:00
Ray	0d183f4ab3	Added test page Added toggle size support	2023-08-03 13:53:34 +01:00
Ray	23694a4c09	Merge pull request 'Rework to simplify and minimise jQuery dependency' (#1 ) from release/0.1.0.063 into master Reviewed-on: #1	2023-07-30 13:45:54 +00:00