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..44a69ec 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 modal = this.Find(id); + if (modal === null) { + return; + } + + modal.Modal.forEach(function(e) { + e.parentNode.removeChild(e); + }); + + modal = this.Find(id); + if (modal !== null) { + return; + } + + this.removeBackdrop(); + }, + UpdateTitle: function (id, title) { + let modal = this.Find(id); + if (modal === null) { + return; + } + + modal.Title.forEach(function(e) { + e.innerHTML = title; + }); + }, + UpdateSize: function (id, size) { + let modal = this.Find(id); + if (modal === null) { + return; + } + + 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-" + size); + }); + }, + UpdateBody: function (id, content) { var a = this; - // remove modal - var modal = a.getModal(id); - if (modal !== null) - { - modal.parentNode.removeChild(modal); + let modal = a.Find(id); + if (modal === null) { + return; } - // remove backdrop - var backdrop = a.getBackdrop(id); - if (backdrop !== null) - { - backdrop.parentNode.removeChild(backdrop); + modal.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('
Loading...
'); - } else { - $(content).html(html); - } - }, - UpdateTitle: function (id, text) { - var a = this; - - var header = a.getModalHeader(id); - if (header === null) - { - return; - } - - var result = header.querySelectorAll("strong"); - if (result.length <= 0) - { - return; - } - - result[0].innerHTML = text; - }, - addBackdrop: function (id) { - var a = this; + addBackdrop: function () { + let a = this; // don't allow duplicates - if (a.hasBackdrop(id)) { + if (a.body.querySelectorAll(".modal-backdrop").length > 0) { return; } - a.appendToBody('
'); + a.appendHtml(a.body, ''); // lock background - document.getElementsByTagName("body")[0].style.overflow = "hidden"; + a.body.classList.add("modal-open"); + a.body.style.overflow = "hidden"; // close - var backdropElList = document.body.querySelectorAll("#bsdia5-bck" + id); - if (backdropElList.length > 0) { - backdropElList[0].addEventListener("click", function(){ - a.Clear(); - }); - } + let backdrop = a.body.querySelectorAll(".modal-backdrop")[0]; + backdrop.addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + + a.Clear(); + }); }, - addModal: function (id) { + addModal: function (id, title, size) { var a = this; // don't allow duplicates - if (a.hasModal(id)) { - return; + let modal = a.Find(id); + if (modal !== null) { + return; } - var html = ""; - html += '
'; - html += '
'; - html += '
'; - html += '
'; - html += ' ' + a.title + ''; - html += ' '; - html += ' '; + let html = ""; + html += ''; - var dialog = a.getModal(id); - if (dialog === null) { + a.appendHtml(a.body, html); + + modal = a.Find(id); + if (modal === null) { + return; + } + + // modal.addEventListener("click", function(e){ + // e.stopPropagation(); + // e.preventDefault(); + + // a.Close(id); + // }); + + modal.Close.forEach(function(e){ + e.addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + + a.Close(id); + }); + }); + }, + removeBackdrop: function () { + if (this.body.querySelectorAll(".modal-backdrop").length <= 0) { return; } - // close backdrop - dialog.addEventListener("click", function(e){ - if (this === (window.event || e).target) { - a.Clear(); - } - }); + let backdrop = this.body.querySelectorAll(".modal-backdrop")[0]; + backdrop.parentNode.removeChild(backdrop); - // Resize - var result = dialog.querySelectorAll("button[data-action='restore']"); - if (result.length > 0) { - result[0].addEventListener("click", function(e){ - a.ToggleSize(id); - }); + // unlock background + this.body.classList.remove("modal-open"); + this.body.style.overflow = null; + }, + appendHtml: function (el, html) { + let node = document.createElement('template'); + node.innerHTML = html; + + node = node.content.firstChild; + + el.appendChild(node); + }, + html: function (el, newHtml) { + /// todo: replace with pure JS + if (jQuery) { + jQuery(el).html(newHtml); + } else { + el.innerHTML = newHtml; } - - // close - var result = dialog.querySelectorAll("button[data-action='close']"); - if (result.length > 0) { - result[0].addEventListener("click", function(e){ - a.Clear(); - }); - } - }, - appendToBody: function (html) { - document.querySelector("body").appendChild(this.convertHtmlToNode(html)); - }, - convertHtmlToNode: function(html) { - var node = document.createElement('template'); - node.innerHTML = html; - - return node.content.firstChild; - }, - getBackdrop: function (id) { - var result = document.body.querySelectorAll("#bsdia5-bck" + id); - return ((result.length > 0)? result[0] : null); - }, - getModal: function (id) { - var result = document.body.querySelectorAll("#bsdia5-dlg" + id); - return ((result.length > 0)? result[0] : null); - }, - getModalContent: function (id) { - var a = this; - - var result = a.getModal(id); - if (result == null) - { - return null; - } - - var contentList = result.querySelectorAll("div[class='bsdia5-content']"); - if (contentList.length <= 0) - { - return null; - } - - return contentList[0]; - }, - getModalHeader: function (id) { - var a = this; - - var result = a.getModal(id); - if (result == null) - { - return null; - } - - var contentList = result.querySelectorAll("div[class='bsdia5-header']"); - if (contentList.length <= 0) - { - return null; - } - - return contentList[0]; - }, - hasBackdrop: function (id) { - return (document.body.querySelectorAll("#bsdia5-bck" + id).length > 0); - }, - hasModal: function (id) { - return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0); }, isNullOrWhitespace: function(e) { - if (typeof (e) == "undefined") return true; - if (e == null) return true; - if (e == false) return true; + if (typeof (e) == "undefined") { + return true; + } + + if (e == null) { + return true; + } + + if (e == false) { + return true; + } return (e.trim().length <= 0); - }, - sanitiseSize: function(e) { - if (!e) { - return "md"; - } - - if (e === true) { - return "lg"; - } - - if (e === false) { - return "md"; - } - - return e; } }; \ No newline at end of file diff --git a/bsdialog5.min.css b/bsdialog5.min.css deleted file mode 100644 index 537cde3..0000000 --- a/bsdialog5.min.css +++ /dev/null @@ -1 +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.min.js b/bsdialog5.min.js index 94aedcf..389617d 100644 --- a/bsdialog5.min.js +++ b/bsdialog5.min.js @@ -1,5 +1,5 @@ /** * BSDialog5 - * @version v0.1.0.001 (2022/10/15 1713) + * @version v0.1.1.063 (2023/07/275 1713) */ -var BSDialog5={Create:function(t,e,d,i){var n=this;n.id=t,n.title=e,n.url=d,n.size=n.sanitiseSize(i),n.addBackdrop(n.id),n.addModal(n.id),n.isNullOrWhitespace(n.url)?n.Update(n.id,"No URL specified"):(n.Update(n.id,null),fetch(n.url,{cache:"no-cache",credentials:"same-origin"}).then((t=>t.text())).then((t=>{n.Update(n.id,t)})).catch((t=>{n.Update(n.id,"Error: "+t)})).then((function(){})))},Clear:function(){for(var t=document.body.querySelectorAll(".bsdia5-backdrop"),e=0;e0},ShowToast:function(t,e,d,i){var n=this;n.id=t,n.title=e,n.size=n.sanitiseSize(i),n.addBackdrop(n.id),n.addModal(n.id),n.Update(n.id,d)},ToggleSize:function(t){var e=this.getModal(t);null!=e&&(e.classList.contains("bsdia5-md")?(e.classList.remove("bsdia5-md"),e.classList.add("bsdia5-lg")):e.classList.contains("bsdia5-lg")?(e.classList.remove("bsdia5-lg"),e.classList.add("bsdia5-xl")):e.classList.contains("bsdia5-xl")?(e.classList.remove("bsdia5-xl"),e.classList.add("bsdia5-sm")):e.classList.contains("bsdia5-sm")&&(e.classList.remove("bsdia5-sm"),e.classList.add("bsdia5-md")))},Update:function(t,e){var d=this.getModalContent(t);null!==d&&(d.innerHTML=null===e?'Loading...':e)},addBackdrop:function(t){var e=this;if(!e.hasBackdrop(t)){e.appendToBody('
');var d=document.body.querySelectorAll("#bsdia5-bck"+t);d.length>0&&d[0].addEventListener("click",(function(){e.Clear()}))}},addModal:function(t){var e=this;if(!e.hasModal(t)){var d="";d+='
',d+='
',d+="
",d+='
',d+=" "+e.title+"",d+=' ',d+=' ',d+="
",d+='
',d+="
",d+="
",d+="
",e.appendToBody(d);var i,n=e.getModal(t);if(null!==n)n.addEventListener("click",(function(t){this===(window.event||t).target&&e.Clear()})),(i=n.querySelectorAll("button[data-action='restore']")).length>0&&i[0].addEventListener("click",(function(d){e.ToggleSize(t)})),(i=n.querySelectorAll("button[data-action='close']")).length>0&&i[0].addEventListener("click",(function(t){e.Clear()}))}},appendToBody:function(t){document.querySelector("body").appendChild(this.convertHtmlToNode(t))},convertHtmlToNode:function(t){var e=document.createElement("template");return e.innerHTML=t,e.content.firstChild},getBackdrop:function(t){var e=document.body.querySelectorAll("#bsdia5-bck"+t);return e.length>0?e[0]:null},getModal:function(t){var e=document.body.querySelectorAll("#bsdia5-dlg"+t);return e.length>0?e[0]:null},getModalContent:function(t){var e=this.getModal(t);if(null==e)return null;var d=e.querySelectorAll("div[class='bsdia5-content']");return d.length<=0?null:d[0]},hasBackdrop:function(t){return document.body.querySelectorAll("#bsdia5-bck"+t).length>0},hasModal:function(t){return document.body.querySelectorAll("#bsdia5-dlg"+t).length>0},isNullOrWhitespace:function(t){return void 0===t||(null==t||(0==t||t.trim().length<=0))},sanitiseSize:function(t){return t?!0===t?"lg":!1===t?"md":t:"md"}}; \ No newline at end of file +var BSDialog5={Create:async function(e,t,l,o){var d=this;d.pfx="bsdia5_",d.body=document.getElementsByTagName("body")[0],d.addBackdrop(),d.addModal(e,t,o),d.isNullOrWhitespace(l)?d.UpdateBody(e,""):await d.UpdateBodyRemote(e,l)},Clear:function(){this.body.querySelectorAll(".modal").forEach((function(e){e.parentNode.removeChild(e)})),this.removeBackdrop()},Close:function(e){let t=this.Find(e);null!==t&&(t.Modal.forEach((function(e){e.parentNode.removeChild(e)})),t=this.Find(e),null===t&&this.removeBackdrop())},UpdateTitle:function(e,t){let l=this.Find(e);null!==l&&l.Title.forEach((function(e){e.innerHTML=t}))},UpdateSize:function(e,t){let l=this.Find(e);null!==l&&l.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-"+t)}))},UpdateBody:function(e,t){var l=this;let o=l.Find(e);null!==o&&o.Body.forEach((function(e){l.html(e,t)}))},UpdateBodyRemote:async function(e,t){var l=this;l.Exists(e)&&await fetch(t,{cache:"no-cache",credentials:"same-origin"}).then((e=>e.text())).then((t=>{l.UpdateBody(e,t)})).catch((t=>{l.UpdateBody(e,"Error: "+t)}))},Exists:function(e){return null!==this.Find(e)},Find:function(e){let t=this.body.querySelectorAll("#"+this.pfx+e+".modal");return t?t.length<=0?null:{Title:t[0].querySelectorAll(".modal-title"),Body:t[0].querySelectorAll(".modal-body"),Footer:t[0].querySelectorAll(".modal-footer"),Close:t[0].querySelectorAll("[data-bs-dismiss='modal']"),Modal:t}:null},ShowToast:function(e,t,l,o){this.Create(e,t,null,o),this.UpdateBody(e,l)},addBackdrop:function(){let e=this;e.body.querySelectorAll(".modal-backdrop").length>0||(e.appendHtml(e.body,''),e.body.classList.add("modal-open"),e.body.style.overflow="hidden",e.body.querySelectorAll(".modal-backdrop")[0].addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),e.Clear()})))},addModal:function(e,t,l){var o=this;let d=o.Find(e);if(null!==d)return;let a="";a+='",o.appendHtml(o.body,a),d=o.Find(e),null!==d&&d.Close.forEach((function(t){t.addEventListener("click",(function(t){t.stopPropagation(),t.preventDefault(),o.Close(e)}))}))},removeBackdrop:function(){if(this.body.querySelectorAll(".modal-backdrop").length<=0)return;let e=this.body.querySelectorAll(".modal-backdrop")[0];e.parentNode.removeChild(e),this.body.classList.remove("modal-open"),this.body.style.overflow=null},appendHtml:function(e,t){let l=document.createElement("template");l.innerHTML=t,l=l.content.firstChild,e.appendChild(l)},html:function(e,t){jQuery?jQuery(e).html(t):e.innerHTML=t},isNullOrWhitespace:function(e){return void 0===e||(null==e||(0==e||e.trim().length<=0))}}; \ No newline at end of file