/** * BSDialog4 * @version v0.1.5.038 (2023/11/18 19:40) */ class BSDialog4 { constructor() { } get Options() { return { ShowModal: { ID: null, Title: "", Message: "", URL: null, Size: "md", Colour: "secondary", ShowFooter: true, EasyClose: true }, ShowPrompt: { 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 } }, UpdateModal: { ID: null, Title: null, Body: null, URL: null, Footer: null, Size: null } } } get #prefix() { return "bsdia4_"; } get #body() { return document.getElementsByTagName("body")[0]; } get #sizeList() { return [ "modal-sm", "modal-md", "modal-lg", "modal-xl", "modal-xxl" ]; } 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.#isURL(_options.URL)) { const response = await a.#retrieveURL(_options.URL); await a.Update({ ID: _options.ID, Body: response }); } 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; document.querySelectorAll('.modal').forEach(function(e) { $(e).modal('hide'); }); } Close(id) { const a = this; if (id.toString().startsWith(a.#prefix)) { id = id.toString().substr(a.#prefix.length); } const node = document.getElementById(a.#prefix + id); if (node) { $(node).modal('hide'); node.parentNode.removeChild(node); } } 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 (!this.#isNullOrWhitespace(_options.Body)) { a.#html(modal.Body, _options.Body); } else { if (this.#isURL(_options.URL)) { const response = await a.#retrieveURL(_options.URL); await a.Update({ ID: _options.ID, Body: response }); } } if (!a.#isNullOrWhitespace(_options.Footer)) { a.#html(modal.Footer, _options.Footer); } if (!a.#isNullOrWhitespace(_options.Size)) { a.#setSize(_options.ID, "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 let modal = a.Find(id); if (modal !== null) { return; } let html = ""; html += '
'; a.#appendHtml(a.#body, html); modal = a.Find(id); if (modal === null) { return; } $("#" + a.#prefix + id).on('hidden.bs.modal', function (event) { a.Close(id); }) modal.Title.addEventListener("dblclick", function(e){ e.stopPropagation(); e.preventDefault(); a.#toggleSize(id); }); } async #showButtonPrompt(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(""); }); }); }); } async #showTextboxPrompt(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 += '