Example. Simple Text Modal Deprecated
Launch an empty modal
diff --git a/bsdialog4.js b/bsdialog4.js
index c7385ee..381b071 100644
--- a/bsdialog4.js
+++ b/bsdialog4.js
@@ -30,47 +30,17 @@ var BSDialog = {
},
Prompt: async function (options) {
const a = this;
- let id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
+ let id = Math.floor(Math.random() * 10000) + 1000;
const _options = Object.assign(a.Default().PromptOptions, options);
- return await new Promise((resolve, reject) => {
- a.Create(id, _options.Title, _options.Message, _options.Size);
-
- let html = '';
- _options.Buttons.forEach(function(e) {
- html += '
';
- });
-
- a.UpdateFooter(id, 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("");
- });
- });
-
- });
+ 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) {
@@ -201,6 +171,7 @@ var BSDialog = {
ShowFooter: true
},
PromptOptions: {
+ Type: "button",
Title: "",
Message: "",
Size: "md",
@@ -208,7 +179,9 @@ var BSDialog = {
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
- ]
+ ],
+ Label: "",
+ Placeholder: ""
},
ToastOptions: {
ID: null,
@@ -316,6 +289,131 @@ var BSDialog = {
});
},
+ showButtonPrompt: async function (id, options) {
+ const a = this;
+
+ return await new Promise(async (resolve, reject) => {
+ await a.Show(id, options.Title, options.Message, options.Size);
+
+ let html = '';
+ options.Buttons.forEach(function(e) {
+ html += '
';
+ });
+
+ a.UpdateFooter(id, 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("");
+ });
+ });
+
+ });
+ },
+ showTextboxPrompt: async function (id, options) {
+ const a = this;
+
+ return await new Promise(async (resolve, reject) => {
+ options.Buttons = [
+ { Label: "OK", Value: "", Colour: "primary" },
+ { Label: "Cancel", Value: "", Colour: "secondary" }
+ ];
+
+ await a.Show({
+ ID: id,
+ Title: options.Title,
+ Message: options.Message,
+ Size: options.Size
+ });
+
+ let body = '';
+
+ if (!a.isNullOrWhitespace(options.Message)) {
+ body += '
' + options.Message + '
';
+ }
+
+ body += '
';
+
+ let footer = '';
+ options.Buttons.forEach(function(e) {
+ footer += '
';
+ });
+
+ a.Update({
+ ID: id,
+ Body: body,
+ Footer: footer
+ });
+
+ const modal = a.Find(id);
+ const buttons = modal.Footer[0].querySelectorAll("button");
+
+ buttons[0].addEventListener("click", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ const value = modal.Body[0].querySelectorAll("input")[0].value;
+
+ a.Close(id);
+
+ resolve(value);
+ });
+
+ buttons[1].addEventListener("click", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ a.Close(id);
+
+ resolve("");
+ });
+
+ modal.Close.forEach(function(sender) {
+ sender.addEventListener("click", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+
+ a.Close(id);
+
+ resolve("");
+ });
+ });
+
+ });
+ },
appendHtml: function (el, html) {
let node = document.createElement('template');
node.innerHTML = html;
diff --git a/bsdialog4.min.js b/bsdialog4.min.js
index 6917ea4..0e0f920 100644
--- a/bsdialog4.min.js
+++ b/bsdialog4.min.js
@@ -1,4 +1,5 @@
/**
* BSDialog4
* @version v0.1.3.017 (2023/08/30 00:17)
- */
\ No newline at end of file
+ */
+var BSDialog={Show:async function(t){const e=this,o=Object.assign(e.Default().ShowOptions,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)},Prompt:async function(t){const e=this;let o=Math.floor(1e4*Math.random())+1e3;const l=Object.assign(e.Default().PromptOptions,t);return"textbox"===l.Type?await e.showTextboxPrompt(o,l):await e.showButtonPrompt(o,l)},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())},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[0].querySelectorAll(".modal-dialog").forEach((function(t){t.classList.forEach((function(e){"modal-dialog"!=e&&e.startsWith("modal-")&&t.classList.remove(e)})),t.classList.add("modal-"+o.Size)})))},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)}))},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},Default:function(){return{ShowOptions:{ID:null,Title:"",Message:"",URL:null,Size:"md",Colour:"secondary",ShowFooter:!0},PromptOptions:{Type:"button",Title:"",Message:"",Size:"md",Buttons:[{Label:"Yes",Value:"Yes",Colour:"primary"},{Label:"No",Value:"No",Colour:"secondary"},{Label:"Cancel",Value:"Cancel",Colour:"secondary"}],Label:"",Placeholder:""},ToastOptions:{ID:null,Title:"",Message:"",Size:"md"},UpdateOptions:{ID:null,Title:null,Body:null,BodyURL:null,Footer:null,Size:null}}},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 i=this;let n=i.Find(t);if(null!==n)return;let s="";s+='
',s+='
',s+='
',s+=' ",s+='
',s+='
',s+='
',s+='
',s+='\t Loading...',s+="
",s+="
",s+="
",s+="
",!0===l&&(s+=' "),s+="
",s+="
",s+="
",i.appendHtml(i.body,s),n=i.Find(t),null!==n&&n.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),i.Close(t)})),e.addEventListener("auxclick",(function(t){t.stopPropagation(),t.preventDefault(),1===t.button&&i.toggleSize()}))}))},showButtonPrompt:async function(t,e){const o=this;return await new Promise((async(l,a)=>{await o.Show(t,e.Title,e.Message,e.Size);let i="";e.Buttons.forEach((function(t){i+='
"})),o.UpdateFooter(t,i);const n=o.Find(t);n.Footer[0].querySelectorAll("button").forEach((function(e){e.addEventListener("click",(function(a){a.stopPropagation(),a.preventDefault();const i=e.getAttribute("data-prompt-value");o.Close(t),l(i)}))})),n.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")}))}))}))},showTextboxPrompt:async function(t,e){const o=this;return await new Promise((async(l,a)=>{e.Buttons=[{Label:"OK",Value:"",Colour:"primary"},{Label:"Cancel",Value:"",Colour:"secondary"}],await o.Show({ID:t,Title:e.Title,Message:e.Message,Size:e.Size});let i="";o.isNullOrWhitespace(e.Message)||(i+="
"+e.Message+"
"),i+='
";let n="";e.Buttons.forEach((function(t){n+='
"})),o.Update({ID:t,Body:i,Footer:n});const s=o.Find(t),d=s.Footer[0].querySelectorAll("button");d[0].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault();const a=s.Body[0].querySelectorAll("input")[0].value;o.Close(t),l(a)})),d[1].addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")})),s.Close.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault(),o.Close(t),l("")}))}))}))},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(){var t=this;let e=t.Find(t.id);if(null===e)return;let o=e.Modal[0].querySelectorAll(".modal-dialog")[0];o.classList.contains("modal-sm")?t.Update({ID:t.id,Size:"md"}):o.classList.contains("modal-md")?t.Update({ID:t.id,Size:"lg"}):o.classList.contains("modal-lg")?t.Update({ID:t.id,Size:"xl"}):o.classList.contains("modal-xl")?t.Update({ID:t.id,Size:"sm"}):t.Update({ID:t.id,Size:"md"})},Create:async function(t,e,o,l){await this.Show({ID:t,Title:e,Message:o,URL:o,Size:l,Colour:"secondary"})},UpdateTitle:function(t,e){this.Update({ID:t,Title:e})},UpdateSize:function(t,e){this.Update({ID:t,Size:e})},UpdateBody:function(t,e){this.Update({ID:t,Body:e})},UpdateFooter:function(t,e){this.Update({ID:t,Footer:e})},Toast:async function(t){const e=Object.assign(this.Default().ToastOptions,t);await this.Show({ID:e.ID,Title:e.Title,Message:e.Message,URL:null,Size:e.Size,Colour:"secondary",ShowFooter:!1})},ShowToast:function(t,e,o,l){this.Toast({ID:t,Title:e,Message:o,Size:l})}};
\ No newline at end of file