Merge pull request 'Refactor to JS class' (#8) from release/0.1.5.017 into master

Reviewed-on: #8

bsdialog4.js

@@ -1,152 +1,15 @@
 /**
  * BSDialog4
- * @version v0.1.5.006 (2023/11/14 17:40)
+ * @version v0.1.5.017 (2023/11/16 17:47)
  */
-var BSDialog = {
-	Show: async function (options) {
-		const a = this;
-		const _options = Object.assign(a.Options.ShowModal, options);
 
-		a.id = _options.ID;
+class BSDialog4 {
-		a.pfx = "bsdia4_";
+  constructor() {
-		a.body = document.getElementsByTagName("body")[0];
-
-		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
-
-		$("#" + a.pfx + _options.ID).modal({
-			backdrop: _options.EasyClose,
-			show: true
-		});
-
-		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.Options.ShowPrompt, 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.parentNode.removeChild(modal.Modal);
-
-		modal = this.Find(id);
-		if (modal !== null) {
-			return;
-		}
-
-		this.removeBackdrop();
-	},
-	Update: async function (options) {
-		const a = this;
-		let _options = Object.assign(a.Options.UpdateModal, options);
-
-		const modal = a.Find(_options.ID);
-		if (modal === null) {
-		 	return;
-		}
-
-		if (!this.isNullOrWhitespace(_options.Title)) {
-			modal.Title.innerHTML = _options.Title;
-		}
-
-		if (!this.isNullOrWhitespace(_options.Body)) {
-			a.html(modal.Body, _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)) {
-			a.html(modal.Footer, _options.Footer);
-		}
-
-		if (!this.isNullOrWhitespace(_options.Size)) {
-			modal.Modal.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;
-		}
 
+	get Options() {
 		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]
-		};
-	},
-	Options: {
 			ShowModal: {
 				ID: null,
 				Title: "",
@@ -184,8 +47,167 @@ var BSDialog = {
 				Footer: null,
 				Size: null
 			}
-	},
+		}
-	addModal: function (id, title, size, showFooter, closeColour) {
+	}
+
+	get #prefix() {
+		return "bsdia4_";
+	}
+
+	get #body() {
+		return document.getElementsByTagName("body")[0];
+	}
+
+
+	async Show(options) {
+		const a = this;
+		const _options = Object.assign(a.Options.ShowModal, options);
+
+		a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
+
+		$("#" + a.#prefix + _options.ID).modal({
+			backdrop: _options.EasyClose,
+			show: true
+		});
+
+		if (!a.#isNullOrWhitespace(_options.URL)) {
+			if (_options.URL.startsWith("http://") || _options.URL.startsWith("https://") || _options.URL.startsWith("/")) {
+				const response = await a.#retrieveURL(_options.URL);
+
+				await a.Update({ ID: _options.ID, Body: response });
+			} else {
+				await a.Update({ ID: _options.ID, Body: _options.URL });
+			}
+		} 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(a.Options.ShowPrompt, options);
+
+		switch (_options.Type) {
+			case "textbox":
+				return await a.#showTextboxPrompt(id, _options);
+			case "button":
+			default:
+				return await a.#showButtonPrompt(id, _options);
+		}
+	}
+
+	Clear() {
+		const a = this;
+
+		a.#body.querySelectorAll(".modal").forEach(function(e) {
+			e.parentNode.removeChild(e);
+		});
+
+		a.#removeBackdrop();
+	}
+
+	Close(id) {
+		const a = this;
+
+		let modal = a.Find(id);
+		if (modal === null) {
+		 	return;
+		}
+
+		modal.Modal.parentNode.removeChild(modal.Modal);
+
+		modal = a.Find(id);
+		if (modal !== null) {
+			return;
+		}
+
+		a.#removeBackdrop();
+	}
+
+	async Update(options) {
+		const a = this;
+		let _options = Object.assign(a.Options.UpdateModal, options);
+
+		const modal = a.Find(_options.ID);
+		if (modal === null) {
+		 	return;
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Title)) {
+			modal.Title.innerHTML = _options.Title;
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Body)) {
+			a.#html(modal.Body, _options.Body);
+		}
+
+		if (!a.#isNullOrWhitespace(_options.BodyURL)) {
+			if (_options.BodyURL.startsWith("http://") || _options.BodyURL.startsWith("https://") || _options.BodyURL.startsWith("/")) {
+				// ok
+			} else {
+				_options.BodyURL = null;
+			}
+		}
+
+		if (!a.#isNullOrWhitespace(_options.BodyURL)) {
+			const response = await a.#retrieveURL(_options.BodyURL);
+
+			await a.Update({ ID: _options.ID, Body: response });
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Footer)) {
+			a.#html(modal.Footer, _options.Footer);
+		}
+
+		if (!a.#isNullOrWhitespace(_options.Size)) {
+			modal.Modal.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(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, closeColour) {
 		const a = this;
 
 		// don't allow duplicates
@@ -195,7 +217,7 @@ var BSDialog = {
 		}
 
 		let html = "";
-		html += '<div class="modal fade" style="display: none;" id="' + a.pfx + id + '" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">';
+		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">';
@@ -226,14 +248,14 @@ var BSDialog = {
 		html += '  </div>';
 		html += '</div>';
 
-		a.appendHtml(a.body, html);
+		a.#appendHtml(a.#body, html);
 
 		modal = a.Find(id);
 		if (modal === null) {
 			return;
 	 	}
 
-		$("#" + a.pfx + id).on('hidden.bs.modal', function (event) {
+		$("#" + a.#prefix + id).on('hidden.bs.modal', function (event) {
 			a.Close(id);
 		})
 
@@ -241,11 +263,12 @@ var BSDialog = {
 			e.stopPropagation();
 			e.preventDefault();
 
-			a.toggleSize();
+			a.#toggleSize(id);
 		});
 
-	},
+	}
-	showButtonPrompt: async function (id, options) {
+
+	async #showButtonPrompt(id, options) {
 		const a = this;
 
 		return await new Promise(async (resolve, reject) => {
@@ -290,8 +313,9 @@ var BSDialog = {
 			});
 
 		});
-	},
+	}
-	showTextboxPrompt: async function (id, options) {
+
+	async #showTextboxPrompt(id, options) {
 		const a = this;
 
 		return await new Promise(async (resolve, reject) => {
@@ -310,13 +334,13 @@ var BSDialog = {
 
 			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>';
@@ -375,24 +399,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;
 		}
@@ -406,24 +432,29 @@ var BSDialog = {
 		}
 
 		return (e.trim().length <= 0);
-	},
+	}
-	removeBackdrop: function () {
+
-		if (this.body.querySelectorAll(".modal-backdrop").length <= 0) {
+	#removeBackdrop() {
+		const a = this;
+
+		if (a.#body.querySelectorAll(".modal-backdrop").length <= 0) {
 			return;
 		}
 
-		if (this.body.querySelectorAll(".modal").length > 0) {
+		if (a.#body.querySelectorAll(".modal").length > 0) {
 			return;
 		}
 
-		let backdrop = this.body.querySelectorAll(".modal-backdrop")[0];
+		a.#body.querySelectorAll(".modal-backdrop").forEach(function(e){
-		backdrop.parentNode.removeChild(backdrop);
+			e.parentNode.removeChild(e);
+		});
 
 		// unlock background
-		this.body.classList.remove("modal-open");
+		a.#body.classList.remove("modal-open");
-		this.body.style.overflow = null;
+		a.#body.style.overflow = null;
-	},
+	}
-	retrieveURL: async function (url) {
+
+	async #retrieveURL(url) {
 		return await new Promise(async (resolve) => {
 			await fetch(url, {
 				cache: 'no-cache',
@@ -434,28 +465,33 @@ var BSDialog = {
 				resolve("Error: " + error);
 			});
 		});
-	},
+	}
-	toggleSize: function () {
+
+	#toggleSize(id) {
 		const a = this;
 
-		let modal = a.Find(a.id);
+		let modal = a.Find(id);
 		if (modal === null) {
 		 	return;
 		}
 
 		let modalDialog = modal.Modal.querySelectorAll(".modal-dialog")[0];
 		if (modalDialog.classList.contains('modal-sm')) {
-			a.Update({ ID: a.id, Size: "md" });
+			a.Update({ ID: id, Size: "md" });
 		} else if (modalDialog.classList.contains('modal-md')) {
-			a.Update({ ID: a.id, Size: "lg" });
+			a.Update({ ID: id, Size: "lg" });
 		} else if (modalDialog.classList.contains('modal-lg')) {
-			a.Update({ ID: a.id, Size: "xl" });
+			a.Update({ ID: id, Size: "xl" });
 		} else if (modalDialog.classList.contains('modal-xl')) {
-			a.Update({ ID: a.id, Size: "xxl" });
+			a.Update({ ID: id, Size: "xxl" });
 		} else if (modalDialog.classList.contains('modal-xxl')) {
-			a.Update({ ID: a.id, Size: "sm" });
+			a.Update({ ID: id, Size: "sm" });
 		} else {
-			a.Update({ ID: a.id, Size: "md" });
+			a.Update({ ID: id, Size: "md" });
 		}
 	}
-};
+
+}
+
+
+var BSDialog = new BSDialog4();