diff --git a/bs5-test.html b/bs5-test.html index c84d425..a1f9721 100644 --- a/bs5-test.html +++ b/bs5-test.html @@ -166,6 +166,44 @@ BSDialog5.Show({
+
+

Example. Prompt Modal (Textbox)

+

Launch a prompt modal and wait for a textbox response

+
+ 
+let response = await BSDialog5.Prompt({
+  Type: "textbox",
+  Title: "Modal Title",
+  Message: "Are you sure want to wait for a response?",
+  Size: "md",
+  Label: "",
+  Placeholder: ""
+});
+
+alert(response);
+
+
+

+ +
+

Example. Text Modal with Updates

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

diff --git a/bsdialog5.js b/bsdialog5.js index 0f7ccd4..15750f9 100644 --- a/bsdialog5.js +++ b/bsdialog5.js @@ -1,6 +1,6 @@ /** * BSDialog5 - * @version v0.2.0.013 (2023/08/21 1945) + * @version v0.2.0.055 (2023/11/12 1428) */ var BSDialog5 = { Default: function() { @@ -12,17 +12,27 @@ var BSDialog5 = { URL: null, Size: "md", Colour: "secondary", - ShowFooter: true + ShowFooter: true, + EasyClose: true }, PromptOptions: { + 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 + } }, UpdateOptions: { ID: null, @@ -42,7 +52,7 @@ var BSDialog5 = { a.pfx = "bsdia5_"; a.addBackdrop(); - a.addModal(_options.ID, _options.Title, _options.Size, true, _options.Colour); + a.addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.EasyClose, _options.Colour); if (_options.URL == null) { await a.Update({ ID: _options.ID, Body: _options.Message }); @@ -61,52 +71,15 @@ var BSDialog5 = { 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(""); - }); - }); - - }); + switch (_options.Type) { + case "textbox": + return await a.showTextboxPrompt(id, _options); + case "button": + default: + return await a.showButtonPrompt(id, _options); + } }, Clear: function () { this.GetBody().querySelectorAll(".modal").forEach(function(e) { @@ -121,9 +94,7 @@ var BSDialog5 = { return; } - modal.Modal.forEach(function(e) { - e.parentNode.removeChild(e); - }); + modal.Modal.parentNode.removeChild(modal.Modal); modal = this.Find(id); if (modal !== null) { @@ -141,17 +112,9 @@ var BSDialog5 = { return; } - if (!this.isNullOrWhitespace(_options.Title)) { - modal.Title.forEach(function(e) { - e.innerHTML = _options.Title; - }); - } + if (!this.isNullOrWhitespace(_options.Title)) modal.Title.innerHTML = _options.Title; - if (!this.isNullOrWhitespace(_options.Body)) { - modal.Body.forEach(function(e) { - a.html(e, _options.Body); - }); - } + 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("/")) { @@ -165,20 +128,14 @@ var BSDialog5 = { 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.Footer)) a.html(modal.Footer, _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.Modal.classList.remove("modal-sm"); + modal.Modal.classList.remove("modal-md"); + modal.Modal.classList.remove("modal-lg"); + modal.Modal.classList.remove("modal-xl"); + modal.Modal.classList.add("modal-" + _options.Size); } }, @@ -212,11 +169,12 @@ var BSDialog5 = { } return { - Title: modal[0].querySelectorAll(".modal-title"), - Body: modal[0].querySelectorAll(".modal-body"), - Footer: modal[0].querySelectorAll(".modal-footer"), + 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-bs-dismiss='modal']"), - Modal: modal + Modal: modal[0] }; }, GetBody: function() { @@ -235,17 +193,8 @@ var BSDialog5 = { // lock background a.GetBody().classList.add("modal-open"); a.GetBody().style.overflow = "hidden"; - - // close - let backdrop = a.GetBody().querySelectorAll(".modal-backdrop")[0]; - backdrop.addEventListener("click", function(e){ - e.stopPropagation(); - e.preventDefault(); - - a.Clear(); - }); }, - addModal: function (id, title, size, showFooter, closeColour) { + addModal: function (id, title, size, showFooter, easyClose, closeColour) { const a = this; // don't allow duplicates @@ -259,8 +208,8 @@ var BSDialog5 = { html += '
'; html += '
'; html += '
'; - html += ' ' + title + ''; - html += ' '; + html += ' ' + title + ''; + html += ' '; html += '
'; html += '
'; @@ -291,32 +240,175 @@ var BSDialog5 = { return; } - // modal.addEventListener("click", function(e){ - // e.stopPropagation(); - // e.preventDefault(); + // Close on backdrp + if (easyClose === true) { + modal.Modal.addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); - // a.Close(id); - // }); + a.Close(id); + }); + + const modalContent = modal.Modal.querySelectorAll(".modal-content")[0]; + modalContent.addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + }); + } modal.Close.forEach(function(e){ e.addEventListener("click", function(e){ e.stopPropagation(); e.preventDefault(); - a.Close(id); - }); + a.Close(id); + }); + }); - e.addEventListener("auxclick", function(e){ + modal.Title.addEventListener("dblclick", function(e){ e.stopPropagation(); e.preventDefault(); - if (e.button === 1) { - a.toggleSize(); - } + a.toggleSize(); }); + }, + + + + showButtonPrompt: async function (id, options) { + const a = this; + + return await new Promise(async (resolve, reject) => { + await a.Show({ + ID: id, + Title: options.Title, + Message: options.Message, + Size: options.Size, + EasyClose: options.EasyClose + }); + + let html = ''; + options.Buttons.forEach(function(e) { + html += ''; + }); + + a.Update({ ID: id, Footer: html }); + + const modal = a.Find(id); + modal.Footer.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, + EasyClose: options.EasyClose + }); + + let body = ''; + + if (!a.isNullOrWhitespace(options.Message)) { + body += '

' + options.Message + '

'; + } + + body += '
'; + + if (a.isNullOrWhitespace(options.Textbox.Label) || (options.Textbox.LabelSize <= 0)) { + body += '
'; + body += ''; + body += '
'; + } else { + body += ''; + body += '
'; + body += ''; + body += '
'; + } + + 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.querySelectorAll("button"); + + buttons[0].addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + + const value = modal.Body.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; @@ -374,25 +466,28 @@ var BSDialog5 = { return; } - let modalDialog = modal.Modal[0]; - if (modalDialog.classList.contains('modal-sm')) { - modalDialog.classList.remove("modal-sm"); - modalDialog.classList.add("modal-md"); - } else if (modalDialog.classList.contains('modal-md')) { - modalDialog.classList.remove("modal-md"); - modalDialog.classList.add("modal-lg"); - } else if (modalDialog.classList.contains('modal-lg')) { - modalDialog.classList.remove("modal-lg"); - modalDialog.classList.add("modal-xl"); - } else if (modalDialog.classList.contains('modal-xl')) { - modalDialog.classList.remove("modal-xl"); - modalDialog.classList.add("modal-sm"); + if (modal.Modal.classList.contains('modal-sm')) { + modal.Modal.classList.remove("modal-sm"); + modal.Modal.classList.add("modal-md"); + } else if (modal.Modal.classList.contains('modal-md')) { + modal.Modal.classList.remove("modal-md"); + modal.Modal.classList.add("modal-lg"); + } else if (modal.Modal.classList.contains('modal-lg')) { + modal.Modal.classList.remove("modal-lg"); + modal.Modal.classList.add("modal-xl"); + } else if (modal.Modal.classList.contains('modal-xl')) { + modal.Modal.classList.remove("modal-xl"); + modal.Modal.classList.add("modal-xxl"); + } else if (modal.Modal.classList.contains('modal-xxl')) { + modal.Modal.classList.remove("modal-xxl"); + modal.Modal.classList.add("modal-sm"); } else { - modalDialog.classList.remove("modal-sm"); - modalDialog.classList.remove("modal-md"); - modalDialog.classList.remove("modal-lg"); - modalDialog.classList.remove("modal-xl"); - modalDialog.classList.add("modal-md"); + modal.Modal.classList.remove("modal-sm"); + modal.Modal.classList.remove("modal-md"); + modal.Modal.classList.remove("modal-lg"); + modal.Modal.classList.remove("modal-xl"); + modal.Modal.classList.remove("modal-xxl"); + modal.Modal.classList.add("modal-md"); } } }; \ No newline at end of file diff --git a/bsdialog5.min.js b/bsdialog5.min.js index aacc629..920c0bb 100644 --- a/bsdialog5.min.js +++ b/bsdialog5.min.js @@ -1,5 +1,4 @@ /** * BSDialog5 - * @version v0.2.0.013 (2023/08/21 1945) - */ -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 + * @version v0.2.0.055 (2023/11/12 1428) + */ \ No newline at end of file