Initial commit (0.1.0.001 pre-alpha)
This commit is contained in:
Ray
commit
11303c9f7a
65
bsdialog5.css
Normal file
65
bsdialog5.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
296
bsdialog5.js
Normal file
296
bsdialog5.js
Normal file
@ -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('<span class="text-center">Loading...</span>');
|
||||||
|
$(content).html('<div class="row mt-3 pb-3"><div class="col-12 text-center"><div class="spinner-border"><span class="visually-hidden">Loading...</span></div></div></div>');
|
||||||
|
} 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('<div id="bsdia5-bck' + id + '" class="bsdia5-backdrop"></div>');
|
||||||
|
|
||||||
|
// 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 += '<div class="bsdia5 bsdia5-' + a.size + '" id="bsdia5-dlg' + id + '">';
|
||||||
|
html += ' <div class="bsdia5-body">';
|
||||||
|
html += ' <div>';
|
||||||
|
html += ' <div class="bsdia5-header">';
|
||||||
|
html += ' <strong>' + a.title + '</strong>';
|
||||||
|
html += ' <button type="button" data-action="close">×</button>';
|
||||||
|
html += ' <button type="button" data-action="restore">−</button>';
|
||||||
|
html += ' </div>';
|
||||||
|
html += ' <div class="bsdia5-content"></div>';
|
||||||
|
html += ' </div>';
|
||||||
|
html += ' </div>';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
1
bsdialog5.min.css
vendored
Normal file
1
bsdialog5.min.css
vendored
Normal file
@ -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;}
|
||||||
5
bsdialog5.min.js
vendored
Normal file
5
bsdialog5.min.js
vendored
Normal file
@ -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;e<t.length;e++)t[e].parentNode.removeChild(t[e]);t=document.body.querySelectorAll(".bsdia5");for(e=0;e<t.length;e++)t[e].parentNode.removeChild(t[e])},Close:function(t){var e=this.getModal(t);null!==e&&e.parentNode.removeChild(e);var d=this.getBackdrop(t);null!==d&&d.parentNode.removeChild(d)},Exists:function(t){return document.body.querySelectorAll("#bsdia5-dlg"+t).length>0},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?'<span class="text-center">Loading...</span>':e)},addBackdrop:function(t){var e=this;if(!e.hasBackdrop(t)){e.appendToBody('<div id="bsdia5-bck'+t+'" class="bsdia5-backdrop"></div>');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+='<div class="bsdia5 bsdia5-'+e.size+'" id="bsdia5-dlg'+t+'">',d+=' <div class="bsdia5-body">',d+=" <div>",d+=' <div class="bsdia5-header">',d+=" <strong>"+e.title+"</strong>",d+=' <button type="button" data-action="close">×</button>',d+=' <button type="button" data-action="restore">−</button>',d+=" </div>",d+=' <div class="bsdia5-content"></div>',d+=" </div>",d+=" </div>",d+="</div>",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"}};
|
||||||
Loading…
Reference in New Issue
Block a user