diff --git a/bsdialog5.css b/bsdialog5.css deleted file mode 100644 index 83f0c0a..0000000 --- a/bsdialog5.css +++ /dev/null @@ -1,65 +0,0 @@ -.bsdia5-backdrop { - position:fixed; - top:0; - right:0; - bottom:0; - left:0; - z-index:1024; - background-color:#000000; - opacity:0.4; -} - -.bsdia5 { - position: fixed; - top:0; - right:0; - bottom:0; - left:0; - z-index:1024; - overflow: auto; -} - -.bsdia5-body { - border-radius:5px; - background-color:#ffffff; - margin:2em auto; -} - -.bsdia5-sm > .bsdia5-body { - width:30%; -} -.bsdia5-md > .bsdia5-body { - width:50%; -} -.bsdia5-lg > .bsdia5-body { - width:75%; -} -.bsdia5-xl > .bsdia5-body { - width:90%; -} - -.bsdia5-header { - display:block; - padding:0 0 0 1em; - border-style:solid; - border-width:0 0 1px 0; - border-color:#efefef; -} -.bsdia5-header strong { - cursor:default; - font-size:1.2em; - line-height:3em; -} -.bsdia5-header button { - background-color:transparent; - border:none; - padding:1em; - float:right; -} - -.bsdia5-content { - padding:1em 1em 2em 1em; -} -.bsdia5-content .text-center { - text-align:center; -} \ No newline at end of file diff --git a/bsdialog5.js b/bsdialog5.js index 4a7117b..9d6cfe0 100644 --- a/bsdialog5.js +++ b/bsdialog5.js @@ -1,296 +1,246 @@ /** * BSDialog5 - * @version v0.1.0.001 (2022/10/15 1713) + * @version v0.1.1.063 (2023/07/275 1713) */ var BSDialog5 = { - Create: function (id, title, url, size) { + Create: async function (id, title, url, size) { var a = this; - a.id = id; - a.title = title; - a.url = url; - a.size = a.sanitiseSize(size); + a.pfx = "bsdia5_"; + a.body = document.getElementsByTagName("body")[0]; - a.addBackdrop(a.id); - a.addModal(a.id); + a.addBackdrop(); + a.addModal(id, title, size); - if (a.isNullOrWhitespace(a.url)) { - a.Update(a.id, "No URL specified"); + if (a.isNullOrWhitespace(url)) { + a.UpdateBody(id, ""); } else { - a.Update(a.id, null); - - fetch(a.url, { - cache: 'no-cache', - credentials: 'same-origin' - }).then(data => data.text()).then(data => { - a.Update(a.id, data); - }).catch((error) => { - a.Update(a.id, "Error: " + error); - }).then(function(){ - // do nothing - }); + await a.UpdateBodyRemote(id, url); } }, Clear: function () { - var a = this; + this.body.querySelectorAll(".modal").forEach(function(e) { + e.parentNode.removeChild(e); + }); - // remove all backdrop - var result = document.body.querySelectorAll(".bsdia5-backdrop"); - for (var i=0; i< result.length; i++) - { - result[i].parentNode.removeChild(result[i]); - } - - // remove all dialog - result = document.body.querySelectorAll(".bsdia5"); - for (var i=0; i< result.length; i++) - { - result[i].parentNode.removeChild(result[i]); - } - - // lock background - document.getElementsByTagName("body")[0].style.overflow = "auto"; + this.removeBackdrop(); }, Close: function (id) { + let model = this.Find(id); + if (model === null) { + return; + } + + modal.Modal.forEach(function(e) { + e.parentNode.removeChild(e); + }); + + model = this.Find(id); + if (model !== null) { + return; + } + + this.removeBackdrop(); + }, + UpdateTitle: function (id, title) { + let model = this.Find(id); + if (model === null) { + return; + } + + model.Title.forEach(function(e) { + e.innerHTML = title; + }); + }, + UpdateSize: function (id, size) { + let model = this.Find(id); + if (model === null) { + return; + } + + model.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; - // remove modal - var modal = a.getModal(id); - if (modal !== null) - { - modal.parentNode.removeChild(modal); + let model = a.Find(id); + if (model === null) { + return; } - // remove backdrop - var backdrop = a.getBackdrop(id); - if (backdrop !== null) - { - backdrop.parentNode.removeChild(backdrop); + model.Body.forEach(function(e) { + a.html(e, content); + }); + }, + UpdateBodyRemote: async function (id, url) { + var a = this; + + if (!a.Exists(id)) { + return; } - // lock background - document.getElementsByTagName("body")[0].style.overflow = "auto"; + await fetch(url, { + cache: 'no-cache', + credentials: 'same-origin' + }).then(data => data.text()).then(data => { + a.UpdateBody(id, data); + }).catch((error) => { + a.UpdateBody(id, "Error: " + error); + }); }, Exists: function (id) { - return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0); + return (this.Find(id) !== null); + }, + Find: function (id) { + let modal = this.body.querySelectorAll("#" + this.pfx + id + ".modal"); + if (!modal) { + return null; + } + + if (modal.length <= 0) { + return null; + } + + return { + Title: modal[0].querySelectorAll(".modal-title"), + Body: modal[0].querySelectorAll(".modal-body"), + Footer: modal[0].querySelectorAll(".modal-footer"), + Close: modal[0].querySelectorAll("[data-bs-dismiss='modal']"), + Modal: modal + }; }, ShowToast: function (id, title, message, size) { - var a = this; - - a.id = id; - a.title = title; - a.size = a.sanitiseSize(size); - - a.addBackdrop(a.id); - a.addModal(a.id); - - a.Update(a.id, message); + this.Create(id, title, null, size); + this.UpdateBody(id, message); }, - ToggleSize: function (id) { - var a = this; - - var modal = a.getModal(id); - if (modal == null) - { - return; - } - - if (modal.classList.contains("bsdia5-md")) { - modal.classList.remove("bsdia5-md"); - modal.classList.add("bsdia5-lg"); - } else if (modal.classList.contains("bsdia5-lg")) { - modal.classList.remove("bsdia5-lg"); - modal.classList.add("bsdia5-xl"); - } else if (modal.classList.contains("bsdia5-xl")) { - modal.classList.remove("bsdia5-xl"); - modal.classList.add("bsdia5-sm"); - } else if (modal.classList.contains("bsdia5-sm")) { - modal.classList.remove("bsdia5-sm"); - modal.classList.add("bsdia5-md"); - } - }, - Update: function (id, html) { - var a = this; - - var content = a.getModalContent(id); - if (content === null) { - return; - } - - if (html === null) { - // $(content).html('Loading...'); - $(content).html('