commit 11303c9f7ae85b5f58438e08bc20dff7c72e64c2 Author: Ray Date: Sun Jul 30 14:21:02 2023 +0100 Initial commit (0.1.0.001 pre-alpha) diff --git a/bsdialog5.css b/bsdialog5.css new file mode 100644 index 0000000..83f0c0a --- /dev/null +++ b/bsdialog5.css @@ -0,0 +1,65 @@ +.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 new file mode 100644 index 0000000..4a7117b --- /dev/null +++ b/bsdialog5.js @@ -0,0 +1,296 @@ +/** + * BSDialog5 + * @version v0.1.0.001 (2022/10/15 1713) + */ +var BSDialog5 = { + Create: function (id, title, url, size) { + var a = this; + + a.id = id; + a.title = title; + a.url = url; + a.size = a.sanitiseSize(size); + + a.addBackdrop(a.id); + a.addModal(a.id); + + if (a.isNullOrWhitespace(a.url)) { + a.Update(a.id, "No URL specified"); + } 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 + }); + } + }, + Clear: function () { + var a = this; + + // 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"; + }, + Close: function (id) { + var a = this; + + // remove modal + var modal = a.getModal(id); + if (modal !== null) + { + modal.parentNode.removeChild(modal); + } + + // remove backdrop + var backdrop = a.getBackdrop(id); + if (backdrop !== null) + { + backdrop.parentNode.removeChild(backdrop); + } + + // lock background + document.getElementsByTagName("body")[0].style.overflow = "auto"; + }, + Exists: function (id) { + return (document.body.querySelectorAll("#bsdia5-dlg" + id).length > 0); + }, + 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); + }, + 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('
'); + } 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; + + // don't allow duplicates + if (a.hasBackdrop(id)) { + return; + } + + a.appendToBody('
'); + + // lock background + document.getElementsByTagName("body")[0].style.overflow = "hidden"; + + // close + var backdropElList = document.body.querySelectorAll("#bsdia5-bck" + id); + if (backdropElList.length > 0) { + backdropElList[0].addEventListener("click", function(){ + a.Clear(); + }); + } + }, + addModal: function (id) { + var a = this; + + // don't allow duplicates + if (a.hasModal(id)) { + return; + } + + var html = ""; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + a.title + ''; + html += ' '; + html += ' '; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + html += '
'; + + a.appendToBody(html); + + var dialog = a.getModal(id); + if (dialog === null) { + return; + } + + // close backdrop + dialog.addEventListener("click", function(e){ + if (this === (window.event || e).target) { + a.Clear(); + } + }); + + // Resize + var result = dialog.querySelectorAll("button[data-action='restore']"); + if (result.length > 0) { + result[0].addEventListener("click", function(e){ + a.ToggleSize(id); + }); + } + + // 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; + + 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 new file mode 100644 index 0000000..537cde3 --- /dev/null +++ b/bsdialog5.min.css @@ -0,0 +1 @@ +.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 new file mode 100644 index 0000000..94aedcf --- /dev/null +++ b/bsdialog5.min.js @@ -0,0 +1,5 @@ +/** + * BSDialog5 + * @version v0.1.0.001 (2022/10/15 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