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

Reviewed-on: #11

bsdialog4.js

@@ -1,54 +1,11 @@
 /**
  * BSDialog4
- * @version v0.1.5.038 (2023/11/18 19:40)
+ * @version v0.1.7.022 (2024/01/21 03:40)
  */
 class BSDialog4 {
   constructor() {
 	}
 
-
-	get Options() {
-		return {
-			ShowModal: {
-				ID: null,
-				Title: "",
-				Message: "",
-				URL: null,
-				Size: "md",
-				Colour: "secondary",
-				ShowFooter: true,
-				EasyClose: true
-			},
-			ShowPrompt: {
-				Type: "button",
-				Title: "",
-				Message: "",
-				Size: "md",
-				EasyClose: true,
-				Buttons: [
-					{ Label: "Yes", Value: "Yes", Colour: "primary" },
-					{ Label: "No", Value: "No", Colour: "secondary" },
-					{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-				],
-				Textbox: {
-					Label: "",
-					LabelSize: 4,
-					Placeholder: "",
-					Value: "",
-					BoxSize: 8
-				}
-			},
-			UpdateModal: {
-				ID: null,
-				Title: null,
-				Body: null,
-				URL: null,
-				Footer: null,
-				Size: null
-			}
-		}
-	}
-
 	get #prefix() {
 		return "bsdia4_";
 	}
@@ -70,9 +27,19 @@ class BSDialog4 {
 
 	async Show(options) {
 		const a = this;
-		const _options = Object.assign(a.Options.ShowModal, options);
+		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.Colour);
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.IsMovable, _options.Colour);
 
 		$("#" + a.#prefix + _options.ID).modal({
 			backdrop: _options.EasyClose,
@@ -91,7 +58,26 @@ class BSDialog4 {
 	async Prompt(options) {
 		const a = this;
 		const id = Math.floor(Math.random() * 10000) + 1000;
-		const _options = Object.assign(a.Options.ShowPrompt, options);
+		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":
@@ -102,15 +88,15 @@ class BSDialog4 {
 		}
 	}
 
-	Clear() {
+	async Clear() {
 		const a = this;
 
-		document.querySelectorAll('.modal').forEach(function(e) {
-			$(e).modal('hide');
+		document.querySelectorAll('.modal').forEach(async function(e) {
+			await a.Close(e.getAttribute("id"));
 		});
 	}
 
-	Close(id) {
+	async Close(id) {
 		const a = this;
 
 		if (id.toString().startsWith(a.#prefix)) {
@@ -120,15 +106,40 @@ class BSDialog4 {
 		const node = document.getElementById(a.#prefix + id);
 
 		if (node) {
-			$(node).modal('hide');
+			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;
-		let _options = Object.assign(a.Options.UpdateModal, options);
+		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) {
@@ -192,7 +203,7 @@ class BSDialog4 {
 	}
 
 
-	addModal(id, title, size, showFooter, closeColour) {
+	addModal(id, title, size, showFooter, isMovable, closeColour) {
 		const a = this;
 
 		// don't allow duplicates
@@ -251,6 +262,42 @@ class BSDialog4 {
 			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) {
@@ -419,26 +466,6 @@ class BSDialog4 {
 		return (e.trim().length <= 0);
 	}
 
-	#removeBackdrop() {
-		const a = this;
-
-		if (a.#body.querySelectorAll(".modal-backdrop").length <= 0) {
-			return;
-		}
-
-		if (a.#body.querySelectorAll(".modal").length > 0) {
-			return;
-		}
-
-		a.#body.querySelectorAll(".modal-backdrop").forEach(function(e){
-			e.parentNode.removeChild(e);
-		});
-
-		// unlock background
-		a.#body.classList.remove("modal-open");
-		a.#body.style.overflow = null;
-	}
-
 	async #retrieveURL(url) {
 		return await new Promise(async (resolve) => {
 			await fetch(url, {