From 336a8f2370f3e2fbd01c884c85a10226ae0814f0 Mon Sep 17 00:00:00 2001 From: Ray Date: Mon, 21 Aug 2023 21:16:47 +0100 Subject: [PATCH] Remove Create and Toast Changed Show and Prompt methods to use modern options Improved test HTML file --- bs5-test.html | 307 ++++++++++++++++++++++++++++++++++++----------- bsdialog5.js | 246 +++++++++++++++++++++++++------------ bsdialog5.min.js | 4 +- 3 files changed, 408 insertions(+), 149 deletions(-) diff --git a/bs5-test.html b/bs5-test.html index c077410..c84d425 100644 --- a/bs5-test.html +++ b/bs5-test.html @@ -16,89 +16,254 @@ + + + -
-
-
-

Example One

-

Launch an empty modal

-
BSDialog5.Create('abc123', 'My Modal Box 123', null, 'xl');
-

+
+
-
-
-
-
+
+

Example. Simple Text Modal

+

Launch an empty modal

+
+ 
+BSDialog5.Show({
+  ID: "modalL1",
+  Title: "Modal Title",
+  Message: "Hello Momo!",
+  URL: null,
+  Size: "md",
+  Colour: "secondary"
+});
+
+
+

+
-

- -
-
-
-
- -

Example Four

-

Launch a multiple modals

-
- BSDialog5.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
- BSDialog5.ShowToast('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');
-
-

- -
-
-
- - + $("#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); + }); + + }); + +
+ + +
+

Example. Multiple Modals

+

Launch multiple modals

+
+ 
+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"
+});
+
+
+

+ +
+ + +
+
+ +
+

Example. Text Modal with Updates

+

Launch a basic modal, make updates to the title, body, size and footer.

+
+ 
+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!",
+  BodyURL: null,
+  Size: "lg",
+  Footer: null
+});
+
+
+

+ +
+ + +
+

Example. Close Modal

+

Close a modal using its identifier

+
+ 
+BSDialog5.Close("modalR1");
+
+
+

+ +
+ + +
+

Example. Clear Modal

+

Close all modals

+
+ 
+BSDialog5.Clear();
+
+
+

+ +
+ + +
+ + + \ No newline at end of file diff --git a/bsdialog5.js b/bsdialog5.js index fa52a60..0f7ccd4 100644 --- a/bsdialog5.js +++ b/bsdialog5.js @@ -1,28 +1,115 @@ /** * BSDialog5 - * @version v0.1.2.014 (2023/08/19 1351) + * @version v0.2.0.013 (2023/08/21 1945) */ var BSDialog5 = { - Create: async function (id, title, url, size) { - var a = this; + Default: function() { + return { + ShowOptions: { + ID: null, + Title: "", + Message: "", + URL: null, + Size: "md", + Colour: "secondary", + ShowFooter: true + }, + PromptOptions: { + Title: "", + Message: "", + Size: "md", + Buttons: [ + { Label: "Yes", Value: "Yes", Colour: "primary" }, + { Label: "No", Value: "No", Colour: "secondary" }, + { Label: "Cancel", Value: "Cancel", Colour: "secondary" } + ] + }, + UpdateOptions: { + ID: null, + Title: null, + Body: null, + BodyURL: null, + Footer: null, + Size: null + } + }; + }, + Show: async function (options) { + const a = this; + const _options = Object.assign(a.Default().ShowOptions, options); - a.id = id; + a.id = _options.ID; a.pfx = "bsdia5_"; - a.body = document.getElementsByTagName("body")[0]; a.addBackdrop(); - a.addModal(id, title, size); + a.addModal(_options.ID, _options.Title, _options.Size, true, _options.Colour); - if (a.isNullOrWhitespace(url)) { - a.UpdateBody(id, ""); - } else if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("/")) { - a.UpdateBodyRemote(id, url); + if (_options.URL == null) { + await a.Update({ ID: _options.ID, Body: _options.Message }); } else { - await a.UpdateBody(id, url); + if (a.isNullOrWhitespace(_options.URL)) { + await a.Update({ ID: _options.ID, Body: URL }); + } else { + if (_options.URL.startsWith("http://") || _options.URL.startsWith("https://") || _options.URL.startsWith("/")) { + await a.UpdateBodyRemote(_options.ID, _options.URL); + } else { + await a.Update({ ID: _options.ID, Body: URL }); + } + } } }, + Prompt: async function (options) { + const a = this; + const id = "prompt" + Math.floor(Math.random() * 10000) + 1000; + + const _options = Object.assign(a.Default().PromptOptions, options); + + return await new Promise(async (resolve) => { + + await a.Show({ + ID: id, + Title: _options.Title, + Message: _options.Message, + Size: _options.Size + }); + + let html = ''; + _options.Buttons.forEach(function(e) { + html += ''; + }); + + a.Update({ ID: id, Footer: html }); + + const modal = a.Find(id); + + modal.Footer[0].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(""); + }); + }); + + }); + }, Clear: function () { - this.body.querySelectorAll(".modal").forEach(function(e) { + this.GetBody().querySelectorAll(".modal").forEach(function(e) { e.parentNode.removeChild(e); }); @@ -45,44 +132,58 @@ var BSDialog5 = { this.removeBackdrop(); }, - UpdateTitle: function (id, title) { - let modal = this.Find(id); + 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; } - 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.Title)) { + modal.Title.forEach(function(e) { + e.innerHTML = _options.Title; + }); } - 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.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)) { + await a.UpdateBodyRemote(_options.ID, _options.BodyURL); + } + + if (!this.isNullOrWhitespace(_options.Footer)) { + modal.Footer.forEach(function(e) { + a.html(e, _options.Footer); + }); + } + + if (!this.isNullOrWhitespace(_options.Size)) { + 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-" + _options.Size); + }); } - modal.Body.forEach(function(e) { - a.html(e, content); - }); }, UpdateBodyRemote: async function (id, url) { - var a = this; + const a = this; if (!a.Exists(id)) { return; @@ -92,28 +193,16 @@ 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); - }); - }, - 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); + a.Update({ ID: id, Body: "Error: " + error }); }); }, Exists: function (id) { return (this.Find(id) !== null); }, Find: function (id) { - let modal = this.body.querySelectorAll("#" + this.pfx + id + ".modal"); + const modal = this.GetBody().querySelectorAll("#" + this.pfx + id + ".modal"); if (!modal) { return null; } @@ -130,26 +219,25 @@ var BSDialog5 = { Modal: modal }; }, - ShowToast: function (id, title, message, size) { - this.Create(id, title, null, size); - this.UpdateBody(id, message); + GetBody: function() { + return document.getElementsByTagName("body")[0]; }, addBackdrop: function () { - let a = this; + const a = this; // don't allow duplicates - if (a.body.querySelectorAll(".modal-backdrop").length > 0) { + if (a.GetBody().querySelectorAll(".modal-backdrop").length > 0) { return; } - a.appendHtml(a.body, '
'); + a.appendHtml(a.GetBody(), '
'); // lock background - a.body.classList.add("modal-open"); - a.body.style.overflow = "hidden"; + a.GetBody().classList.add("modal-open"); + a.GetBody().style.overflow = "hidden"; // close - let backdrop = a.body.querySelectorAll(".modal-backdrop")[0]; + let backdrop = a.GetBody().querySelectorAll(".modal-backdrop")[0]; backdrop.addEventListener("click", function(e){ e.stopPropagation(); e.preventDefault(); @@ -157,8 +245,8 @@ var BSDialog5 = { a.Clear(); }); }, - addModal: function (id, title, size) { - var a = this; + addModal: function (id, title, size, showFooter, closeColour) { + const a = this; // don't allow duplicates let modal = a.Find(id); @@ -185,14 +273,18 @@ var BSDialog5 = { html += ''; html += ' '; - html += '
'; - html += ' '; - html += '
'; + + if (showFooter === true) { + html += '
'; + html += ' '; + html += '
'; + } + html += ' '; html += ' '; html += ''; - a.appendHtml(a.body, html); + a.appendHtml(a.GetBody(), html); modal = a.Find(id); if (modal === null) { @@ -257,23 +349,25 @@ var BSDialog5 = { return (e.trim().length <= 0); }, removeBackdrop: function () { - if (this.body.querySelectorAll(".modal-backdrop").length <= 0) { + const a = this; + + if (a.GetBody().querySelectorAll(".modal-backdrop").length <= 0) { return; } - if (this.body.querySelectorAll(".modal").length > 0) { + if (a.GetBody().querySelectorAll(".modal").length > 0) { return; } - let backdrop = this.body.querySelectorAll(".modal-backdrop")[0]; + let backdrop = a.GetBody().querySelectorAll(".modal-backdrop")[0]; backdrop.parentNode.removeChild(backdrop); // unlock background - this.body.classList.remove("modal-open"); - this.body.style.overflow = null; + a.GetBody().classList.remove("modal-open"); + a.GetBody().style.overflow = null; }, toggleSize: function () { - var a = this; + const a = this; let modal = a.Find(a.id); if (modal === null) { diff --git a/bsdialog5.min.js b/bsdialog5.min.js index 7ec39b4..aacc629 100644 --- a/bsdialog5.min.js +++ b/bsdialog5.min.js @@ -1,5 +1,5 @@ /** * BSDialog5 - * @version v0.1.2.014 (2023/08/19 1351) + * @version v0.2.0.013 (2023/08/21 1945) */ -var BSDialog5={Create:async function(t,l,o,e){var a=this;a.id=t,a.pfx="bsdia5_",a.body=document.getElementsByTagName("body")[0],a.addBackdrop(),a.addModal(t,l,e),a.isNullOrWhitespace(o)?a.UpdateBody(t,""):o.startsWith("http://")||o.startsWith("https://")||o.startsWith("/")?a.UpdateBodyRemote(t,o):await a.UpdateBody(t,o)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let l=this.Find(t);null!==l&&(l.Modal.forEach((function(t){t.parentNode.removeChild(t)})),l=this.Find(t),null===l&&this.removeBackdrop())},UpdateTitle:function(t,l){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=l}))},UpdateSize:function(t,l){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){t.classList.remove("modal-sm"),t.classList.remove("modal-md"),t.classList.remove("modal-lg"),t.classList.remove("modal-xl"),t.classList.add("modal-"+l)}))},UpdateBody:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Body.forEach((function(t){o.html(t,l)}))},UpdateBodyRemote:async function(t,l){var o=this;o.Exists(t)&&await fetch(l,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((l=>{o.UpdateBody(t,l)})).catch((l=>{o.UpdateBody(t,"Error: "+l)}))},UpdateFooter:function(t,l){var o=this;let e=o.Find(t);null!==e&&e.Footer.forEach((function(t){o.html(t,l)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let l=this.body.querySelectorAll("#"+this.pfx+t+".modal");return l?l.length<=0?null:{Title:l[0].querySelectorAll(".modal-title"),Body:l[0].querySelectorAll(".modal-body"),Footer:l[0].querySelectorAll(".modal-footer"),Close:l[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:l}:null},ShowToast:function(t,l,o,e){this.Create(t,l,null,e),this.UpdateBody(t,o)},addBackdrop:function(){let t=this;t.body.querySelectorAll(".modal-backdrop").length>0||(t.appendHtml(t.body,'
'),t.body.classList.add("modal-open"),t.body.style.overflow="hidden",t.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),t.Clear()})))},addModal:function(t,l,o){var e=this;let a=e.Find(t);if(null!==a)return;let d="";d+='",e.appendHtml(e.body,d),a=e.Find(t),null!==a&&a.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(t)})),l.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&e.toggleSize()}))}))},appendHtml:function(t,l){let o=document.createElement("template");o.innerHTML=l,o=o.content.firstChild,t.appendChild(o)},html:function(t,l){jQuery?jQuery(t).html(l):t.innerHTML=l},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;if(this.body.querySelectorAll(".modal").length>0)return;let t=this.body.querySelectorAll(".modal-backdrop")[0];t.parentNode.removeChild(t),this.body.classList.remove("modal-open"),this.body.style.overflow=null},toggleSize:function(){let t=this.Find(this.id);if(null===t)return;let l=t.Modal[0];l.classList.contains("modal-sm")?(l.classList.remove("modal-sm"),l.classList.add("modal-md")):l.classList.contains("modal-md")?(l.classList.remove("modal-md"),l.classList.add("modal-lg")):l.classList.contains("modal-lg")?(l.classList.remove("modal-lg"),l.classList.add("modal-xl")):l.classList.contains("modal-xl")?(l.classList.remove("modal-xl"),l.classList.add("modal-sm")):(l.classList.remove("modal-sm"),l.classList.remove("modal-md"),l.classList.remove("modal-lg"),l.classList.remove("modal-xl"),l.classList.add("modal-md"))}}; \ No newline at end of file +var BSDialog5={Default:function(){return{ShowOptions:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0},PromptOptions:{Title:"",Message:"",Size:"md",Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}]},UpdateOptions:{ID:null,Title:null,Body:null,BodyURL:null,Footer:null,Size:null}}},Show:async function(t){const e=this,o=Object.assign(e.Default().ShowOptions,t);e.id=o.ID,e.pfx="bsdia5_",e.addBackdrop(),e.addModal(o.ID,o.Title,o.Size,!0,o.Colour),null==o.URL?await e.Update({ID:o.ID,Body:o.Message}):e.isNullOrWhitespace(o.URL)?await e.Update({ID:o.ID,Body:URL}):o.URL.startsWith("http://")||o.URL.startsWith("https://")||o.URL.startsWith("/")?await e.UpdateBodyRemote(o.ID,o.URL):await e.Update({ID:o.ID,Body:URL})},Prompt:async function(t){const e=this,o="prompt"+Math.floor(1e4*Math.random())+1e3,l=Object.assign(e.Default().PromptOptions,t);return await new Promise((async t=>{await e.Show({ID:o,Title:l.Title,Message:l.Message,Size:l.Size});let a="";l.Buttons.forEach((function(t){a+='"})),e.Update({ID:o,Footer:a});const s=e.Find(o);s.Footer[0].querySelectorAll("button").forEach((function(l){l.addEventListener("click",(function(a){a.stopPropagation(),a.preventDefault();const s=l.getAttribute("data-prompt-value");e.Close(o),t(s)}))})),s.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(o),t("")}))}))}))},Clear:function(){this.GetBody().querySelectorAll(".modal").forEach((function(t){t.parentNode.removeChild(t)})),this.removeBackdrop()},Close:function(t){let e=this.Find(t);null!==e&&(e.Modal.forEach((function(t){t.parentNode.removeChild(t)})),e=this.Find(t),null===e&&this.removeBackdrop())},Update:async function(t){const e=this;let o=Object.assign(e.Default().UpdateOptions,t);const l=e.Find(o.ID);null!==l&&(this.isNullOrWhitespace(o.Title)||l.Title.forEach((function(t){t.innerHTML=o.Title})),this.isNullOrWhitespace(o.Body)||l.Body.forEach((function(t){e.html(t,o.Body)})),this.isNullOrWhitespace(o.BodyURL)||o.BodyURL.startsWith("http://")||o.BodyURL.startsWith("https://")||o.BodyURL.startsWith("/")||(o.BodyURL=null),this.isNullOrWhitespace(o.BodyURL)||await e.UpdateBodyRemote(o.ID,o.BodyURL),this.isNullOrWhitespace(o.Footer)||l.Footer.forEach((function(t){e.html(t,o.Footer)})),this.isNullOrWhitespace(o.Size)||l.Modal.forEach((function(t){t.classList.remove("modal-sm"),t.classList.remove("modal-md"),t.classList.remove("modal-lg"),t.classList.remove("modal-xl"),t.classList.add("modal-"+o.Size)})))},UpdateBodyRemote:async function(t,e){const o=this;o.Exists(t)&&await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((e=>{o.Update({ID:t,Body:e})})).catch((e=>{o.Update({ID:t,Body:"Error: "+e})}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){const e=this.GetBody().querySelectorAll("#"+this.pfx+t+".modal");return e?e.length<=0?null:{Title:e[0].querySelectorAll(".modal-title"),Body:e[0].querySelectorAll(".modal-body"),Footer:e[0].querySelectorAll(".modal-footer"),Close:e[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:e}:null},GetBody:function(){return document.getElementsByTagName("body")[0]},addBackdrop:function(){const t=this;if(t.GetBody().querySelectorAll(".modal-backdrop").length>0)return;t.appendHtml(t.GetBody(),'
'),t.GetBody().classList.add("modal-open"),t.GetBody().style.overflow="hidden",t.GetBody().querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),t.Clear()}))},addModal:function(t,e,o,l,a){const s=this;let i=s.Find(t);if(null!==i)return;let d="";d+='",s.appendHtml(s.GetBody(),d),i=s.Find(t),null!==i&&i.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),s.Close(t)})),e.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&s.toggleSize()}))}))},appendHtml:function(t,e){let o=document.createElement("template");o.innerHTML=e,o=o.content.firstChild,t.appendChild(o)},html:function(t,e){jQuery?jQuery(t).html(e):t.innerHTML=e},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},removeBackdrop:function(){const t=this;if(t.GetBody().querySelectorAll(".modal-backdrop").length<=0)return;if(t.GetBody().querySelectorAll(".modal").length>0)return;let e=t.GetBody().querySelectorAll(".modal-backdrop")[0];e.parentNode.removeChild(e),t.GetBody().classList.remove("modal-open"),t.GetBody().style.overflow=null},toggleSize:function(){let t=this.Find(this.id);if(null===t)return;let e=t.Modal[0];e.classList.contains("modal-sm")?(e.classList.remove("modal-sm"),e.classList.add("modal-md")):e.classList.contains("modal-md")?(e.classList.remove("modal-md"),e.classList.add("modal-lg")):e.classList.contains("modal-lg")?(e.classList.remove("modal-lg"),e.classList.add("modal-xl")):e.classList.contains("modal-xl")?(e.classList.remove("modal-xl"),e.classList.add("modal-sm")):(e.classList.remove("modal-sm"),e.classList.remove("modal-md"),e.classList.remove("modal-lg"),e.classList.remove("modal-xl"),e.classList.add("modal-md"))}}; \ No newline at end of file