diff --git a/bs4-test.html b/bs4-test.html index 7f2ae9d..5f1e02e 100644 --- a/bs4-test.html +++ b/bs4-test.html @@ -16,141 +16,231 @@ + + + -
-
-
+
+
-

Example One

-

Launch an empty modal

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

+
+

Example. Simple Text Modal

+

Launch an empty modal

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

+
-

+ + +
+

Example. Prompt Modal

+

Launch a prompt modal and wait for a response

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

+ +
+ + +
+

Example. Multiple Modals

+

Launch multiple modals

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

+ +
+
-
-
-
+
-

Example Four

-

Launch a multiple modals

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

Example. Simple Text Modal Deprecated

+

Launch an empty modal

+
+ 
+BSDialog.Create('abc123', 'My Modal Box 123', 'Hello momo!', 'xl');
+
+
+

+
-

-
-
-
-
+
+

Example. Empty Modal and Updates. Deprecated

+

Launch an empty modal then update its title, body, footer and size.

+
+ 
+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');
+
+
+

+
-

-
-
-
-
-

Example Five

-

Launch a prompt modal

-
- let result = await BSDialog.Prompt({
-     Title: "Prompt",
-     Message: "This is a prompt",
-     Size: "md",
-     Buttons: [
-         { Label: "Yes", Value: "Yes", Colour: "primary" },
-         { Label: "No", Value: "No", Colour: "secondary" },
-         { Label: "Cancel", Value: "Cancel", Colour: "secondary" }
-     ]
- });
-
- alert(result);
+
+

Example. Toast Modal. Deprecated

+

Show a toast-style modal

+
+ 
+BSDialog.ShowToast('abc123', 'My Modal Box 123', 'Help! I\'m toast.', 'sm');
+
+
+

+
-

+
- - \ No newline at end of file diff --git a/bsdialog4.js b/bsdialog4.js index 454e4b8..bf78007 100644 --- a/bsdialog4.js +++ b/bsdialog4.js @@ -1,6 +1,6 @@ /** * BSDialog4 - * @version v0.1.2.043 (2023/08/20 00:39) + * @version v0.1.2.046 (2023/08/20 00:39) */ var BSDialog = { Create: async function (id, title, url, size) { @@ -133,7 +133,7 @@ var BSDialog = { a.body = document.getElementsByTagName("body")[0]; a.addBackdrop(); - a.addModal(_options.ID, _options.Title, _options.Size, _options.Colour); + a.addModal(_options.ID, _options.Title, _options.Size, true, _options.Colour); if (_options.URL == null) { await a.UpdateBody(_options.ID, _options.Message); @@ -149,26 +149,18 @@ var BSDialog = { } } }, - Toast: function (options) { + Toast: async function (options) { const a = this; const _options = Object.assign(a.DefaultToastOptions, options); - a.Create(_options.ID, _options.Title, null, _options.Size); - a.UpdateBody(_options.ID, _options.Message); - - const modal = a.Find(_options.ID); - - modal.Footer.forEach(function(e) { - e.parentNode.removeChild(e); - }); - - }, - ShowToast: function (id, title, message, size) { - this.Toast({ - ID: id, - Title: title, - Message: message, - Size: size + await this.Show({ + ID: _options.ID, + Title: _options.Title, + Message: _options.Message, + URL: null, + Size: _options.Size, + Colour: "secondary", + ShowFooter: false }); }, Prompt: async function (options) { @@ -222,7 +214,8 @@ var BSDialog = { Message: "", URL: null, Size: "md", - Colour: "secondary" + Colour: "secondary", + ShowFooter: true }, DefaultToastOptions: { ID: null, @@ -240,6 +233,14 @@ var BSDialog = { { Label: "Cancel", Value: "Cancel", Colour: "secondary" } ] }, + ShowToast: function (id, title, message, size) { + this.Toast({ + ID: id, + Title: title, + Message: message, + Size: size + }); + }, addBackdrop: function () { let a = this; @@ -263,7 +264,7 @@ var BSDialog = { a.Clear(); }); }, - addModal: function (id, title, size, closeColour) { + addModal: function (id, title, size, showFooter, closeColour) { var a = this; // don't allow duplicates @@ -293,9 +294,13 @@ var BSDialog = { html += '
'; html += '
'; - html += '
'; - html += ' '; - html += '
'; + + if (showFooter === true) { + html += '
'; + html += ' '; + html += '
'; + } + html += '
'; html += '
'; html += '
'; diff --git a/bsdialog4.min.js b/bsdialog4.min.js index 00bf345..2f8ab3c 100644 --- a/bsdialog4.min.js +++ b/bsdialog4.min.js @@ -1,5 +1,5 @@ /** * BSDialog4 - * @version v0.1.2.043 (2023/08/20 00:39) + * @version v0.1.2.046 (2023/08/20 00:39) */ -var BSDialog={Create:async function(t,e,o,l){await this.Show({ID:t,Title:e,Message:o,URL:o,Size:l,Colour:"secondary"})},Clear:function(){this.body.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())},UpdateTitle:function(t,e){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=e}))},UpdateSize:function(t,e){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){let o=t.querySelectorAll(".modal-dialog")[0];o.classList.remove("modal-sm"),o.classList.remove("modal-md"),o.classList.remove("modal-lg"),o.classList.remove("modal-xl"),o.classList.add("modal-"+e)}))},UpdateBody:function(t,e){var o=this;let l=o.Find(t);null!==l&&l.Body.forEach((function(t){o.html(t,e)}))},UpdateBodyRemote:async function(t,e){var o=this;o.Exists(t)&&await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((e=>{o.UpdateBody(t,e)})).catch((e=>{o.UpdateBody(t,"Error: "+e)}))},UpdateFooter:function(t,e){var o=this;let l=o.Find(t);null!==l&&l.Footer.forEach((function(t){o.html(t,e)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let e=this.body.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-dismiss='modal']"),Modal:e}:null},Show:async function(t){const e=this,o=Object.assign(e.DefaultShowOptions,t);e.id=o.ID,e.pfx="bsdia4_",e.body=document.getElementsByTagName("body")[0],e.addBackdrop(),e.addModal(o.ID,o.Title,o.Size),null==o.URL?await e.UpdateBody(o.ID,o.Message):e.isNullOrWhitespace(o.URL)?await e.UpdateBody(o.ID,o.URL):o.URL.startsWith("http://")||o.URL.startsWith("https://")||o.URL.startsWith("/")?await e.UpdateBodyRemote(o.ID,o.URL):await e.UpdateBody(o.ID,o.URL)},Toast:function(t){const e=this,o=Object.assign(e.DefaultToastOptions,t);e.Create(o.ID,o.Title,null,o.Size),e.UpdateBody(o.ID,o.Message);e.Find(o.ID).Footer.forEach((function(t){t.parentNode.removeChild(t)}))},ShowToast:function(t,e,o,l){this.Toast({ID:t,Title:e,Message:o,Size:l})},Prompt:async function(t){const e=this;let o="prompt"+Math.floor(1e4*Math.random())+1e3;const l=Object.assign(e.DefaultPromptOptions,t);return await new Promise(((t,a)=>{e.Create(o,l.Title,l.Message,l.Size);let s="";l.Buttons.forEach((function(t){s+='"})),e.UpdateFooter(o,s);const n=e.Find(o);n.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)}))})),n.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(o),t("")}))}))}))},DefaultShowOptions:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary"},DefaultToastOptions:{ID:null,Title:"",Message:"",Size:"md"},DefaultPromptOptions:{Title:"",Message:"",Size:"md",Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}]},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(e){e.stopPropagation(),e.preventDefault(),t.Clear()})))},addModal:function(t,e,o){var l=this;let a=l.Find(t);if(null!==a)return;let s="";s+='",l.appendHtml(l.body,s),a=l.Find(t),null!==a&&a.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),l.Close(t)})),e.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&l.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(){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 e=t.Modal[0].querySelectorAll(".modal-dialog")[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 +var BSDialog={Create:async function(t,e,o,l){await this.Show({ID:t,Title:e,Message:o,URL:o,Size:l,Colour:"secondary"})},Clear:function(){this.body.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())},UpdateTitle:function(t,e){let o=this.Find(t);null!==o&&o.Title.forEach((function(t){t.innerHTML=e}))},UpdateSize:function(t,e){let o=this.Find(t);null!==o&&o.Modal.forEach((function(t){let o=t.querySelectorAll(".modal-dialog")[0];o.classList.remove("modal-sm"),o.classList.remove("modal-md"),o.classList.remove("modal-lg"),o.classList.remove("modal-xl"),o.classList.add("modal-"+e)}))},UpdateBody:function(t,e){var o=this;let l=o.Find(t);null!==l&&l.Body.forEach((function(t){o.html(t,e)}))},UpdateBodyRemote:async function(t,e){var o=this;o.Exists(t)&&await fetch(e,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((e=>{o.UpdateBody(t,e)})).catch((e=>{o.UpdateBody(t,"Error: "+e)}))},UpdateFooter:function(t,e){var o=this;let l=o.Find(t);null!==l&&l.Footer.forEach((function(t){o.html(t,e)}))},Exists:function(t){return null!==this.Find(t)},Find:function(t){let e=this.body.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-dismiss='modal']"),Modal:e}:null},Show:async function(t){const e=this,o=Object.assign(e.DefaultShowOptions,t);e.id=o.ID,e.pfx="bsdia4_",e.body=document.getElementsByTagName("body")[0],e.addBackdrop(),e.addModal(o.ID,o.Title,o.Size,!0,o.Colour),null==o.URL?await e.UpdateBody(o.ID,o.Message):e.isNullOrWhitespace(o.URL)?await e.UpdateBody(o.ID,o.URL):o.URL.startsWith("http://")||o.URL.startsWith("https://")||o.URL.startsWith("/")?await e.UpdateBodyRemote(o.ID,o.URL):await e.UpdateBody(o.ID,o.URL)},Toast:async function(t){const e=Object.assign(this.DefaultToastOptions,t);await this.Show({ID:e.ID,Title:e.Title,Message:e.Message,URL:null,Size:e.Size,Colour:"secondary",ShowFooter:!1})},Prompt:async function(t){const e=this;let o="prompt"+Math.floor(1e4*Math.random())+1e3;const l=Object.assign(e.DefaultPromptOptions,t);return await new Promise(((t,a)=>{e.Create(o,l.Title,l.Message,l.Size);let s="";l.Buttons.forEach((function(t){s+='"})),e.UpdateFooter(o,s);const i=e.Find(o);i.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)}))})),i.Close.forEach((function(l){l.addEventListener("click",(function(l){l.stopPropagation(),l.preventDefault(),e.Close(o),t("")}))}))}))},DefaultShowOptions:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0},DefaultToastOptions:{ID:null,Title:"",Message:"",Size:"md"},DefaultPromptOptions:{Title:"",Message:"",Size:"md",Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}]},ShowToast:function(t,e,o,l){this.Toast({ID:t,Title:e,Message:o,Size:l})},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(e){e.stopPropagation(),e.preventDefault(),t.Clear()})))},addModal:function(t,e,o,l,a){var s=this;let i=s.Find(t);if(null!==i)return;let n="";n+='",s.appendHtml(s.body,n),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(){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 e=t.Modal[0].querySelectorAll(".modal-dialog")[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