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 509 additions and 518 deletions
--- a/bs4-test.html
+++ b/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>
@ -29,25 +30,13 @@
 <body class="py-5">
  <div class="container">

-    <div class="row mb-3">
-      <div class="col-6 border-right">
-
-        <div class="pb-3 mb-3 border-bottom">
+    <div class="row mb-3 border-bottom">
+      <div class="col-sm-4 border-right">
        <p><b>Example. Simple Text Modal</b></p>
-          <p>Launch an empty modal</p>
-          <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>
+        <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(){

@ -64,76 +53,79 @@ BSDialog.Show({

          });
        </script>
+
      </div>
+      <div class="col-sm-8">

-
-        <div class="pb-3 mb-3 border-bottom">
-          <p><b>Example. Prompt Modal (Buttons)</b></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({
+<pre>BSDialog.Show({
+  ID: "modalL1",
  Title: "Modal Title",
-  Message: "Are you sure want to wait for a response?",
+  Message: "Hello Momo!",
+  URL: null,
  Size: "md",
-  Buttons: [
-    { Label: "Yes", Value: "Yes", Colour: "primary" },
-    { Label: "No", Value: "No", Colour: "secondary" },
-    { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-  ]
-});
-
-alert(response);
-            </pre>
+  Colour: "secondary"
+});</pre>
        </div>
-          <p><button id="buttonL2" type="button" class="btn btn-primary">Launch Modal</button></p>
+
+      </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(){

-              $("#buttonL2").on('click', async function(){
-                let response = await BSDialog.Prompt({
+            $("#buttonR1").on('click', function(){
+              BSDialog.Show({
+                ID: "modalR1",
                Title: "Modal Title",
-                  Message: "Are you sure want to wait for a response?",
+                Message: "Hello Momo!",
+                URL: null,
                Size: "md",
-                  Buttons: [
-                    { Label: "Yes", Value: "Yes", Colour: "primary" },
-                    { Label: "No", Value: "No", Colour: "secondary" },
-                    { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-                  ]
+                Colour: "secondary"
              });

-                alert(response);
+              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="pb-3 mb-3 border-bottom">
-          <p><b>Example. Multiple Modals</b></p>
-          <p>Launch multiple modals</p>
        <div class="alert alert-secondary text-sm">
-            <pre>
-BSDialog.Show({
-  ID: "modalL3a",
-  Title: "Modal A Title",
-  Message: "First!",
+<pre>BSDialog.Update({
+  ID: "modalL1",
+  Title: "Modal Changed Title",
+  Body: "Hello momo again!",
  URL: null,
-  Size: "md",
-  Colour: "secondary"
-});
-
-BSDialog.Show({
-  ID: "modalL3b",
-  Title: "Modal B Title",
-  Message: "Second!",
-  URL: null,
-  Size: "md",
-  Colour: "secondary"
-});
-            </pre>
+  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(){
@ -160,29 +152,83 @@ BSDialog.Show({

          });
        </script>
-        </div>
-

      </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="col-sm-8">
        <div class="alert alert-secondary text-sm">
-            <pre>
-let response = await BSDialog.Prompt({
-  Type: "textbox",
+<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",
-  Label: "",
-  Placeholder: ""
+                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>
+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(){
@ -203,129 +249,67 @@ 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="col-sm-8">
        <div class="alert alert-secondary text-sm">
-            <pre>
-let response = await BSDialog.Prompt({
+<pre>let response = await BSDialog.Prompt({
  Type: "textbox",
  Title: "Modal Title",
  Message: "Are you sure want to wait for a response?",
  Size: "md",
-  Textbox: {
-    Label: "Textbox Label",
-    LabelSize: 4,
-    Placeholder: "Placeholder",
-    Value: "Default Value",
-    BoxSize: 8
-  }
+  Label: "",
+  Placeholder: ""
 });

-alert(response);
-            </pre>
+alert(response);</pre>
        </div>
-          <p><button id="buttonL2b" type="button" class="btn btn-primary">Launch Modal</button></p>
+      </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(){

-              $("#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",
-                  Textbox: {
-                    Label: "Textbox Label",
-                    LabelSize: 4,
-                    Placeholder: "Placeholder",
-                    Value: "Default Value",
-                    BoxSize: 8
-                  }
-                });
-
-                alert(response);
+            $("#buttonR2").on('click', function(){
+              BSDialog.Close("modalR1");
            });

          });
        </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>
+      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
-            <pre>
-BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'xl');
-            </pre>
+<pre>BSDialog.Close("modalR1");</pre>
+        </div>
      </div>
-          <p><button id="button1" type="button" class="btn btn-primary">Launch Modal</button></p>
-          <script>
-
-            $(document).ready(function(){
-
-              $("#button1").on('click', function(){
-                BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'xl');
-              });
-
-            });
-
-          </script>
    </div>

-        <div class="pb-3 mb-3 border-bottom">
-          <p><b>Example. Empty Modal and Updates.</b> <span class="badge badge-warning">Deprecated</span></p>
-          <p>Launch an empty modal then update its title, body, footer and size.</p>
-          <div class="alert alert-secondary text-sm">
-            <pre>
-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');
-            </pre>
-          </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.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');
+              BSDialog.Clear();
            });

          });
        </script>
+
      </div>
-
-
-        <div class="pb-3 mb-3 border-bottom">
-          <p><b>Example. Toast Modal.</b> <span class="badge badge-warning">Deprecated</span></p>
-          <p>Show a toast-style modal</p>
+      <div class="col-sm-8">
        <div class="alert alert-secondary text-sm">
-            <pre>
-BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
-            </pre>
+<pre>BSDialog.Clear();</pre>
        </div>
-          <p><button id="button6" type="button" class="btn btn-primary">Launch Modal</button></p>
-          <script>
-            $(document).ready(function(){
-
-              $("#button6").on('click', function(){
-                BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
-              });
-
-            });
-          </script>
-        </div>
-
-
      </div>
    </div>

--- a/bsdialog4.js
+++ b/bsdialog4.js
@ -1,170 +1,70 @@
 /**
 * BSDialog4
- * @version v0.1.3.017 (2023/08/30 00:17)
+ * @version v0.1.7.022 (2024/01/21 03:40)
 */
-var BSDialog = {
-	Show: async function (options) {
+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(a.Default().ShowOptions, 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);
-
-		if (_options.URL == null) {
-			await a.Update({ ID: _options.ID, Body: _options.Message });
-		} else {
-			if (a.isNullOrWhitespace(_options.URL)) {
-				await a.Update({ ID: _options.ID, Body: _options.URL });
-			} else {
-				if (_options.URL.startsWith("http://") || _options.URL.startsWith("https://") || _options.URL.startsWith("/")) {
-					let response = await a.retrieveURL(_options.URL);
-
-					await a.Update({ ID: _options.ID, Body: response });
-				} else {
-					await a.Update({ ID: _options.ID, Body: _options.URL });
-				}
-			}
-		}
-	},
-	Prompt: async function (options) {
-		const a = this;
-		let id = Math.floor(Math.random() * 10000) + 1000;
-
-		const _options = Object.assign(a.Default().PromptOptions, options);
-
-		switch (_options.Type) {
-			case "textbox":
-				return await a.showTextboxPrompt(id, _options);
-			case "button":
-			default:
-				return await a.showButtonPrompt(id, _options);
-		}
-	},
-	Clear: function () {
-		this.body.querySelectorAll(".modal").forEach(function(e) {
-			e.parentNode.removeChild(e);
-		});
-
-		this.removeBackdrop();
-	},
-	Close: function (id) {
-		let modal = this.Find(id);
-		if (modal === null) {
-		 	return;
-		}
-
-		modal.Modal.forEach(function(e) {
-			e.parentNode.removeChild(e);
-		});
-
-		modal = this.Find(id);
-		if (modal !== null) {
-			return;
-		}
-
-		this.removeBackdrop();
-	},
-	Update: async function (options) {
-		const a = this;
-		let _options = Object.assign(a.Default().UpdateOptions, options);
-
-		const modal = a.Find(_options.ID);
-		if (modal === null) {
-		 	return;
-		}
-
-		if (!this.isNullOrWhitespace(_options.Title)) {
-			modal.Title.forEach(function(e) {
-				e.innerHTML = _options.Title;
-			});
-		}
-
-		if (!this.isNullOrWhitespace(_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("/")) {
-				// ok
-			} else {
-				_options.BodyURL = null;
-			}
-		}
-
-		if (!this.isNullOrWhitespace(_options.BodyURL)) {
-			let response = await a.retrieveURL(_options.BodyURL);
-
-			await a.Update({ ID: _options.ID, Body: response });
-		}
-
-		if (!this.isNullOrWhitespace(_options.Footer)) {
-			modal.Footer.forEach(function(e) {
-				a.html(e, _options.Footer);
-			});
-		}
-
-		if (!this.isNullOrWhitespace(_options.Size)) {
-			modal.Modal[0].querySelectorAll(".modal-dialog").forEach(function(e) {
-
-				e.classList.forEach(function(e2) {
-					if (e2 == "modal-dialog") {
-						return;
-					}
-
-					if (e2.startsWith("modal-")) {
-						e.classList.remove(e2);
-					}
-				});
-
-				e.classList.add("modal-" + _options.Size);
-			});
-		}
-	},
-	Exists: function (id) {
-		return (this.Find(id) !== null);
-	},
-	Find: function (id) {
-		const a = this;
-		const modal = a.body.querySelectorAll("#" + a.pfx + id + ".modal");
-
-		if (!modal) {
-			return null;
-		}
-
-		if (modal.length <= 0) {
-			return null;
-		}
-
-		return {
-			Title: modal[0].querySelectorAll(".modal-title"),
-			Body: modal[0].querySelectorAll(".modal-body"),
-			Footer: modal[0].querySelectorAll(".modal-footer"),
-			Close: modal[0].querySelectorAll("[data-dismiss='modal']"),
-			Modal: modal
-		};
-	},
-	Default: function() {
-		return {
-			ShowOptions: {
+		const _options = Object.assign({
 			ID: null,
 			Title: "",
 			Message: "",
 			URL: null,
 			Size: "md",
 			Colour: "secondary",
-				ShowFooter: true
-			},
-			PromptOptions: {
+			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
+		});
+
+		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" },
@ -177,48 +77,134 @@ var BSDialog = {
 				Value: "",
 				BoxSize: 8
 			}
-			},
-			ToastOptions: {
-				ID: null,
-				Title: "",
-				Message: "",
-				Size: "md"
-			},
-			UpdateOptions: {
+		}, 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,
-				BodyURL: null,
+			URL: null,
 			Footer: null,
 			Size: null
-			}
-		};
-	},
-	addBackdrop: function () {
-		let a = this;
+		}, options);

-		// don't allow duplicates
-		if (a.body.querySelectorAll(".modal-backdrop").length > 0) {
+		const modal = a.Find(_options.ID);
+		if (modal === null) {
 		 	return;
 		}

-		a.appendHtml(a.body, '<div class="modal-backdrop fade show"></div>');
+		if (!a.#isNullOrWhitespace(_options.Title)) {
+			modal.Title.innerHTML = _options.Title;
+		}

-		// lock background
-		a.body.classList.add("modal-open");
-		a.body.style.overflow = "hidden";
+		if (!a.#isNullOrWhitespace(_options.Body)) {
+			a.#html(modal.Body, _options.Body);
+		}

-		// close
-		let backdrop = a.body.querySelectorAll(".modal-backdrop")[0];
-		backdrop.addEventListener("click", function(e){
-			e.stopPropagation();
-			e.preventDefault();
+		if (!this.#isNullOrWhitespace(_options.Body)) {
+			a.#html(modal.Body, _options.Body);
+		} else {
+			if (this.#isURL(_options.URL)) {
+				const response = await a.#retrieveURL(_options.URL);

-			a.Clear();
-		});
-	},
-	addModal: function (id, title, size, showFooter, closeColour) {
-		var a = this;
+				await a.Update({ ID: _options.ID, Body: response });
+			}
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Footer)) {
+			a.#html(modal.Footer, _options.Footer);
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Size)) {
+			a.#setSize(_options.ID, "modal-" + _options.Size);
+		}
+
+	}
+
+	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;
+		}
+
+		if (modal.length <= 0) {
+			return null;
+		}
+
+		return {
+			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[0]
+		};
+	}
+
+
+	addModal(id, title, size, showFooter, isMovable, closeColour) {
+		const a = this;

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

 		let html = "";
-		html += '<div class="modal fade show d-block" id="' + a.pfx + id + '" tabindex="-1">';
+		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">' + title + '</span>';
-		html += '        <button type="button" class="close" data-dismiss="modal" aria-label="Close">';
+		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>';
@ -258,33 +244,63 @@ var BSDialog = {
 		html += '  </div>';
 		html += '</div>';

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

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

-		modal.Close.forEach(function(e){
-			e.addEventListener("click", function(e){
+		$("#" + a.#prefix + id).on('hidden.bs.modal', function (event) {
+			a.Close(id);
+		})
+
+		modal.Title.addEventListener("dblclick", function(e){
 			e.stopPropagation();
 			e.preventDefault();

-		 		a.Close(id);
+			a.#toggleSize(id);
 		});

-			 e.addEventListener("auxclick", function(e){
-				e.stopPropagation();
-				e.preventDefault();
+		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 };

-				if (e.button === 1) {
-					a.toggleSize();
+			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";
+				}
 			});
-	},
-	showButtonPrompt: async function (id, options) {
+
+			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) => {
@ -292,7 +308,8 @@ var BSDialog = {
 				ID: id,
 				Title: options.Title,
 				Message: options.Message,
-				Size: options.Size
+				Size: options.Size,
+				EasyClose: options.EasyClose
 			});

 			let html = '';
@ -303,7 +320,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();
@ -328,8 +345,9 @@ var BSDialog = {
 			});

 		});
-	},
-	showTextboxPrompt: async function (id, options) {
+	}
+
+	async #showTextboxPrompt(id, options) {
 		const a = this;

 		return await new Promise(async (resolve, reject) => {
@ -342,18 +360,19 @@ var BSDialog = {
 				ID: id,
 				Title: options.Title,
 				Message: options.Message,
-				Size: options.Size
+				Size: options.Size,
+				EasyClose: options.EasyClose
 			});

 			let body = '';

-			if (!a.isNullOrWhitespace(options.Message)) {
+			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)) {
+			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>';
@ -378,13 +397,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);

@ -412,24 +431,26 @@ var BSDialog = {
 			});

 		});
-	},
-	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;
 		}
@ -443,24 +464,9 @@ 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;
-		}
-
-		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;
-	},
-	retrieveURL: async function (url) {
+	async #retrieveURL(url) {
 		return await new Promise(async (resolve) => {
 			await fetch(url, {
 				cache: 'no-cache',
@ -471,67 +477,68 @@ var BSDialog = {
 				resolve("Error: " + error);
 			});
 		});
-	},
-	toggleSize: function () {
-		var a = this;
+	}

-		let modal = a.Find(a.id);
+	#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;
 		}

-		let modalDialog = modal.Modal[0].querySelectorAll(".modal-dialog")[0];
-		if (modalDialog.classList.contains('modal-sm')) {
-			a.Update({ ID: a.id, Size: "md" });
-		} else if (modalDialog.classList.contains('modal-md')) {
-			a.Update({ ID: a.id, Size: "lg" });
-		} 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: "sm" });
-		} else {
-			a.Update({ ID: a.id, Size: "md" });
-		}
-	},
-	//
-	// deprecated/legacy-support
-	Create: async function (id, title, url, size) {
-		await this.Show({
-			ID: id,
-			Title: title,
-			Message: url,
-			URL: url,
-			Size: size,
-			Colour: "secondary"
-		});
-	},
-	UpdateTitle: function (id, title) {
-		this.Update({ ID: id, Title: title });
-	},
-	UpdateSize: function (id, size) {
-		this.Update({ ID: id, Size: size });
-	},
-	UpdateBody: function (id, content) {
-		this.Update({ ID: id, Body: content });
-	},
-	UpdateFooter: function (id, content) {
-		this.Update({ ID: id, Footer: content });
-	},
-	Toast: async function (options) {
-		const a = this;
-		const _options = Object.assign(a.Default().ToastOptions, options);
+		let modalDialog = modal.Modal.querySelectorAll(".modal-dialog")[0];

-		await this.Show({
-			ID: _options.ID,
-			Title: _options.Title,
-			Message: _options.Message,
-			URL: null,
-			Size: _options.Size,
-			Colour: "secondary",
-			ShowFooter: false
-		});
-	},
-	ShowToast: function (id, title, message, size) {
-		this.Toast({ ID: id, Title: title, Message: message, Size: size });
+		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