Compare commits
No commits in common. "master" and "release/0.1.0.024" have entirely different histories.
master
...
release/0.
34
README.md
34
README.md
@ -1,34 +0,0 @@
|
|||||||
# BSDialog
|
|
||||||
|
|
||||||
> BSDialog is a JavaScript helper for improving Bootstrap 3 modals. Add (and remove) modals to a page dynamically and load content with jQuery/AJAX. Bootstrap 3 is required.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Add (inject) and remove modals into a page
|
|
||||||
- Load modal-content or modal-body from URL with jQuery-AJAX
|
|
||||||
- Stack multiple modals
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Releases & Builds
|
|
||||||
|
|
||||||
See [Releases](/Ray/bsdialog)
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
See [Usage](wiki/USAGE.md)
|
|
||||||
|
|
||||||
## Acknowledgements
|
|
||||||
|
|
||||||
This software uses a number of dependencies and assets from third-parties.
|
|
||||||
These developers and artists deserve due credit for their work and for their commitment to sharing their work freely.
|
|
||||||
Each product is released under their own particular license, for more information please visit their websites.
|
|
||||||
|
|
||||||
- [Bootstrap](https://getbootstrap.com/)
|
|
||||||
- [jQuery](https://jquery.com/)
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
This project is licensed under the least restrictive terms of its dependencies, viz. MIT License.
|
|
||||||
258
bsdialog.js
258
bsdialog.js
@ -1,186 +1,112 @@
|
|||||||
/**
|
/**
|
||||||
* BSDialog
|
* BSDialog
|
||||||
* @version v0.1.0.029a (2019/11/09 2239)
|
* @version v0.1.0.024 (2019/07/05 2210)
|
||||||
*/
|
*/
|
||||||
var BSDialog = {
|
var BSDialog = {
|
||||||
Create: function (id, title, url, is_big, update_body, show_size) {
|
Create: function(id, title, url, is_big, update_body) {
|
||||||
var a = this;
|
var a = this;
|
||||||
|
var isBig = ((typeof(is_big) == "undefined") ? false : (is_big == true) ? true : false);
|
||||||
|
var updateBody = ((typeof(update_body) == "undefined") ? false : (update_body == true) ? true : false);
|
||||||
|
|
||||||
a.id = id;
|
if (!a.hasDialog(id)) {
|
||||||
a.title = title;
|
var html = a.generateModalHtml(id, title, null, isBig);
|
||||||
a.url = url;
|
|
||||||
a.isBig = ((typeof (is_big) == "undefined") ? false : (is_big == true) ? true : false);
|
|
||||||
a.showSize = ((typeof (show_size) == "undefined") ? true : (show_size == true) ? true : false);
|
|
||||||
|
|
||||||
var updateBody = ((typeof (update_body) == "undefined") ? true : (update_body == true) ? true : false);
|
$("body").append(html);
|
||||||
|
}
|
||||||
|
|
||||||
if (!a.Exists(id)) {
|
$.ajax({
|
||||||
a.renderContent(null);
|
url: url,
|
||||||
}
|
cache: false,
|
||||||
|
timeout: 10000,
|
||||||
|
success: function(result, status, xhr){
|
||||||
|
if ((xhr.status == 200) || (xhr.status == 302) || (xhr.status == 301))
|
||||||
|
{
|
||||||
|
if (updateBody)
|
||||||
|
{
|
||||||
|
a.updateContentBody(id, result);
|
||||||
|
} else {
|
||||||
|
$("#dlg" + id).find(".modal-content").html(result);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr){
|
||||||
|
a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
|
||||||
|
},
|
||||||
|
complete: function(xhr, status){
|
||||||
|
// do nothing yet
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
if (url != null) {
|
a.show(id);
|
||||||
$.ajax({
|
},
|
||||||
url: url,
|
Close: function(id) {
|
||||||
cache: false,
|
if (!this.hasDialog(id)) return;
|
||||||
xhrFields: {
|
|
||||||
withCredentials:true
|
|
||||||
},
|
|
||||||
timeout: 60000,
|
|
||||||
success: function (result, status, xhr) {
|
|
||||||
if ((xhr.status == 200) || (xhr.status == 302) || (xhr.status == 301)) {
|
|
||||||
if (updateBody) {
|
|
||||||
a.updateContentBody(id, result);
|
|
||||||
} else {
|
|
||||||
$("#dlg" + id).find(".modal-content").html(result);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function (xhr) {
|
|
||||||
a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
|
|
||||||
},
|
|
||||||
complete: function (xhr, status) {
|
|
||||||
// do nothing yet
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
a.initialiseComponents();
|
$("#dlg" + id).modal('hide');
|
||||||
},
|
},
|
||||||
Close: function (id) {
|
Clear: function() {
|
||||||
$("#dlg" + id).modal('hide');
|
$("body > div[class~='modal'][role='dialog']").remove();
|
||||||
},
|
$("body > div[class~='modal-backdrop']").remove();
|
||||||
Clear: function () {
|
$("body").removeClass("modal-open");
|
||||||
$("body > div[class~='modal'][role='dialog']").remove();
|
},
|
||||||
$("body > div[class~='modal-backdrop']").remove();
|
ShowToast: function(id, title, message, is_big) {
|
||||||
$("body").removeClass("modal-open");
|
if (this.hasDialog(id)) return;
|
||||||
},
|
|
||||||
ShowToast: function (id, title, message, is_big) {
|
|
||||||
var a = this;
|
|
||||||
|
|
||||||
if (a.Exists(id)) {
|
var html = this.generateModalHtml(id, title, message, is_big);
|
||||||
return;
|
$("body").append(html);
|
||||||
}
|
|
||||||
|
|
||||||
a.id = id;
|
this.show(id);
|
||||||
a.title = title;
|
},
|
||||||
a.url = null;
|
hasDialog: function(id) {
|
||||||
a.isBig = ((typeof (is_big) == "undefined") ? false : (is_big == true) ? true : false);
|
return ($("body > div[id='dlg" + id + "']").length > 0);
|
||||||
|
},
|
||||||
|
generateModalHtml: function(id, title, message, is_big) {
|
||||||
|
var size = ((typeof(is_big) == "undefined") ? "sm" : (is_big == true ? "lg" : "sm"));
|
||||||
|
|
||||||
a.renderContent(message);
|
var html = "";
|
||||||
a.initialiseComponents();
|
html += "<div class=\"modal fade\" id=\"dlg" + id + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dlg" + id + "Label\" aria-hidden=\"true\">";
|
||||||
},
|
html += " <div class=\"modal-dialog modal-" + size + "\">";
|
||||||
Exists: function (id) {
|
html += " <div class=\"modal-content\">";
|
||||||
return ($("body > div[id='dlg" + id + "']").length > 0);
|
html += " <div class=\"modal-header\">";
|
||||||
},
|
html += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
|
||||||
generateModalHtml: function (message) {
|
html += " <strong class=\"modal-title\">" + title + "</strong>";
|
||||||
var a = this;
|
html += " </div>";
|
||||||
var size = (a.isBig == true ? "lg" : "md");
|
|
||||||
|
|
||||||
var html = "";
|
if ($.trim(message).length <= 0)
|
||||||
html += "<div class=\"modal fade\" id=\"dlg" + a.id + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dlg" + a.id + "Label\" aria-hidden=\"true\">";
|
{
|
||||||
html += " <div class=\"modal-dialog modal-" + size + "\">";
|
html += " <div class=\"modal-body custom-loading\"></div>";
|
||||||
html += " <div class=\"modal-content\">";
|
} else {
|
||||||
html += " <div class=\"modal-header\">";
|
html += " <div class=\"modal-body\">" + message + "</div>";
|
||||||
html += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
|
}
|
||||||
|
|
||||||
if (a.showSize)
|
html += " <div class=\"modal-footer\">";
|
||||||
{
|
html += " <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
|
||||||
html += " <span class=\"close\"> </span>";
|
html += " </div>";
|
||||||
html += " <button type=\"button\" class=\"close\" data-modal-action=\"restore\" aria-hidden=\"true\">−</button>";
|
html += " </div>";
|
||||||
}
|
html += " </div>";
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
html += " <strong class=\"modal-title\" style=\"cursor:default; \">" + a.title + "</strong>";
|
return html;
|
||||||
html += " </div>";
|
},
|
||||||
|
show: function(id) {
|
||||||
|
$("#dlg" + id).modal('show');
|
||||||
|
$("#dlg" + id).off('hide.bs.modal');
|
||||||
|
$("#dlg" + id).on('hide.bs.modal', function() {
|
||||||
|
if ($("body > div[id='dlg" + id + "']").next().is("div[class~='modal-backdrop']")) {
|
||||||
|
$("body > div[id='dlg" + id + "']").next().remove();
|
||||||
|
}
|
||||||
|
|
||||||
if ($.trim(message).length <= 0) {
|
$("body > div[id='dlg" + id + "']").remove();
|
||||||
html += " <div class=\"modal-body custom-loading\" style=\"background-position: center center; background-repeat: no-repeat;\"></div>";
|
|
||||||
} else {
|
|
||||||
html += " <div class=\"modal-body\">" + message + "</div>";
|
|
||||||
}
|
|
||||||
|
|
||||||
html += " <div class=\"modal-footer\">";
|
});
|
||||||
html += " <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
|
},
|
||||||
html += " </div>";
|
updateContentBody: function(id, text) {
|
||||||
html += " </div>";
|
var body = $("#dlg" + id).find(".modal-body");
|
||||||
html += " </div>";
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
return html;
|
if ($(body).hasClass("custom-loading")) $(body).removeClass("custom-loading");
|
||||||
},
|
|
||||||
renderContent: function (content) {
|
|
||||||
$("body").append(this.generateModalHtml(content));
|
|
||||||
},
|
|
||||||
initialiseComponents: function () {
|
|
||||||
var a = this;
|
|
||||||
var dialog = a.getElement();
|
|
||||||
|
|
||||||
if (a.showSize)
|
$(body).html(text);
|
||||||
{
|
}
|
||||||
var btnToggleSize = $(dialog).find("button[data-modal-action='restore']");
|
|
||||||
if ($(btnToggleSize).length > 0) {
|
|
||||||
$(btnToggleSize).off('click');
|
|
||||||
$(btnToggleSize).on('click', function () {
|
|
||||||
a.toggleSize();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(dialog).modal('show');
|
|
||||||
|
|
||||||
$(dialog).off('hide.bs.modal');
|
|
||||||
$(dialog).on('hide.bs.modal', function () {
|
|
||||||
if ($(dialog).next().is("div[class~='modal-backdrop']")) {
|
|
||||||
$(dialog).next().remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
$(dialog).remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(dialog).find(".modal-header").off("mousedown");
|
|
||||||
$(dialog).find(".modal-header").on("mousedown", function(e) {
|
|
||||||
var posX = e.pageX - $(this).offset().left;
|
|
||||||
var posY = e.pageY - $(this).offset().top;
|
|
||||||
|
|
||||||
$("body").off("mousemove.draggable");
|
|
||||||
$("body").on("mousemove.draggable", function(e2) {
|
|
||||||
$(dialog).children(".modal-dialog").offset({ "left": (e2.pageX - posX), "top": (e2.pageY - posY) });
|
|
||||||
});
|
|
||||||
|
|
||||||
$("body").off("mouseup");
|
|
||||||
$("body").on("mouseup", function() {
|
|
||||||
$("body").off("mousemove.draggable");
|
|
||||||
});
|
|
||||||
|
|
||||||
$(dialog).off("bs.modal.hide");
|
|
||||||
$(dialog).on("bs.modal.hide", function() {
|
|
||||||
$("body").off("mousemove.draggable");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateContentBody: function (id, text) {
|
|
||||||
var body = $("#dlg" + id).find(".modal-body");
|
|
||||||
|
|
||||||
if ($(body).hasClass("custom-loading")) $(body).removeClass("custom-loading");
|
|
||||||
|
|
||||||
$(body).html(text);
|
|
||||||
},
|
|
||||||
getElement: function () {
|
|
||||||
return $("#dlg" + this.id);
|
|
||||||
},
|
|
||||||
toggleSize: function () {
|
|
||||||
var div = $(this.getElement()).find("div[class^='modal-dialog']");
|
|
||||||
if ($(div).length <= 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($(div).hasClass("modal-md")) {
|
|
||||||
$(div).removeClass("modal-md");
|
|
||||||
$(div).addClass("modal-lg");
|
|
||||||
} else if ($(div).hasClass("modal-lg")) {
|
|
||||||
$(div).removeClass("modal-lg");
|
|
||||||
$(div).addClass("modal-md");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
7
bsdialog.min.js
vendored
7
bsdialog.min.js
vendored
@ -1,5 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* BSDialog
|
* BSDialog
|
||||||
* @version v0.1.0.029a (2019/11/09 2239)
|
* @version v0.1.0.024 (2019/07/05 2210)
|
||||||
*/
|
*/
|
||||||
var BSDialog={Create:function(o,t,e,d,a,s){var l=this;l.id=o,l.title=t,l.url=e,l.isBig=void 0!==d&&1==d,l.showSize=void 0===s||1==s;var n=void 0===a||1==a;l.Exists(o)||l.renderContent(null),null!=e&&$.ajax({url:e,cache:!1,xhrFields:{withCredentials:!0},timeout:6e4,success:function(t,e,d){200==d.status||302==d.status||301==d.status?n?l.updateContentBody(o,t):$("#dlg"+o).find(".modal-content").html(t):l.updateContentBody(o,d.statusText+" ("+d.status+")")},error:function(t){l.updateContentBody(o,t.statusText+" ("+t.status+")")},complete:function(o,t){}}),l.initialiseComponents()},Close:function(o){$("#dlg"+o).modal("hide")},Clear:function(){$("body > div[class~='modal'][role='dialog']").remove(),$("body > div[class~='modal-backdrop']").remove(),$("body").removeClass("modal-open")},ShowToast:function(o,t,e,d){var a=this;a.Exists(o)||(a.id=o,a.title=t,a.url=null,a.isBig=void 0!==d&&1==d,a.renderContent(e),a.initialiseComponents())},Exists:function(o){return $("body > div[id='dlg"+o+"']").length>0},generateModalHtml:function(o){var t=this,e=1==t.isBig?"lg":"md",d="";return d+='<div class="modal fade" id="dlg'+t.id+'" tabindex="-1" role="dialog" aria-labelledby="dlg'+t.id+'Label" aria-hidden="true">',d+=' <div class="modal-dialog modal-'+e+'">',d+=' <div class="modal-content">',d+=' <div class="modal-header">',d+=' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',t.showSize&&(d+=' <span class="close"> </span>',d+=' <button type="button" class="close" data-modal-action="restore" aria-hidden="true">−</button>'),d+=' <strong class="modal-title" style="cursor:default; ">'+t.title+"</strong>",d+=" </div>",$.trim(o).length<=0?d+=' <div class="modal-body custom-loading" style="background-position: center center; background-repeat: no-repeat;"></div>':d+=' <div class="modal-body">'+o+"</div>",d+=' <div class="modal-footer">',d+=' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',d+=" </div>",d+=" </div>",d+=" </div>",d+="</div>"},renderContent:function(o){$("body").append(this.generateModalHtml(o))},initialiseComponents:function(){var o=this,t=o.getElement();if(o.showSize){var e=$(t).find("button[data-modal-action='restore']");$(e).length>0&&($(e).off("click"),$(e).on("click",function(){o.toggleSize()}))}$(t).modal("show"),$(t).off("hide.bs.modal"),$(t).on("hide.bs.modal",function(){$(t).next().is("div[class~='modal-backdrop']")&&$(t).next().remove(),$(t).remove()}),$(t).find(".modal-header").off("mousedown"),$(t).find(".modal-header").on("mousedown",function(o){var e=o.pageX-$(this).offset().left,d=o.pageY-$(this).offset().top;$("body").off("mousemove.draggable"),$("body").on("mousemove.draggable",function(o){$(t).children(".modal-dialog").offset({left:o.pageX-e,top:o.pageY-d})}),$("body").off("mouseup"),$("body").on("mouseup",function(){$("body").off("mousemove.draggable")}),$(t).off("bs.modal.hide"),$(t).on("bs.modal.hide",function(){$("body").off("mousemove.draggable")})})},updateContentBody:function(o,t){var e=$("#dlg"+o).find(".modal-body");$(e).hasClass("custom-loading")&&$(e).removeClass("custom-loading"),$(e).html(t)},getElement:function(){return $("#dlg"+this.id)},toggleSize:function(){var o=$(this.getElement()).find("div[class^='modal-dialog']");$(o).length<=0||($(o).hasClass("modal-md")?($(o).removeClass("modal-md"),$(o).addClass("modal-lg")):$(o).hasClass("modal-lg")&&($(o).removeClass("modal-lg"),$(o).addClass("modal-md")))}};
|
var BSDialog={Create:function(id,title,url,is_big,update_body){var a=this;var isBig=((typeof(is_big)=="undefined")?!1:(is_big==!0)?!0:!1);var updateBody=((typeof(update_body)=="undefined")?!1:(update_body==!0)?!0:!1);if(!a.hasDialog(id)){var html=a.generateModalHtml(id,title,null,isBig);$("body").append(html)}
|
||||||
|
$.ajax({url:url,cache:!1,timeout:10000,success:function(result,status,xhr){if((xhr.status==200)||(xhr.status==302)||(xhr.status==301)){if(updateBody){a.updateContentBody(id,result)}else{$("#dlg"+id).find(".modal-content").html(result)}}else{a.updateContentBody(id,xhr.statusText+" ("+xhr.status+")")}},error:function(xhr){a.updateContentBody(id,xhr.statusText+" ("+xhr.status+")")},complete:function(xhr,status){}});a.show(id)},Close:function(id){if(!this.hasDialog(id))return;$("#dlg"+id).modal('hide')},Clear:function(){$("body > div[class~='modal'][role='dialog']").remove();$("body > div[class~='modal-backdrop']").remove();$("body").removeClass("modal-open")},ShowToast:function(id,title,message,is_big){if(this.hasDialog(id))return;var html=this.generateModalHtml(id,title,message,is_big);$("body").append(html);this.show(id)},hasDialog:function(id){return($("body > div[id='dlg"+id+"']").length>0)},generateModalHtml:function(id,title,message,is_big){var size=((typeof(is_big)=="undefined")?"sm":(is_big==!0?"lg":"sm"));var html="";html+="<div class=\"modal fade\" id=\"dlg"+id+"\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dlg"+id+"Label\" aria-hidden=\"true\">";html+=" <div class=\"modal-dialog modal-"+size+"\">";html+=" <div class=\"modal-content\">";html+=" <div class=\"modal-header\">";html+=" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";html+=" <strong class=\"modal-title\">"+title+"</strong>";html+=" </div>";if($.trim(message).length<=0){html+=" <div class=\"modal-body custom-loading\"></div>"}else{html+=" <div class=\"modal-body\">"+message+"</div>"}
|
||||||
|
html+=" <div class=\"modal-footer\">";html+=" <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";html+=" </div>";html+=" </div>";html+=" </div>";html+="</div>";return html},show:function(id){$("#dlg"+id).modal('show');$("#dlg"+id).off('hide.bs.modal');$("#dlg"+id).on('hide.bs.modal',function(){if($("body > div[id='dlg"+id+"']").next().is("div[class~='modal-backdrop']")){$("body > div[id='dlg"+id+"']").next().remove()}
|
||||||
|
$("body > div[id='dlg"+id+"']").remove()})},updateContentBody:function(id,text){var body=$("#dlg"+id).find(".modal-body");if($(body).hasClass("custom-loading"))$(body).removeClass("custom-loading");$(body).html(text)}}
|
||||||
@ -1,43 +0,0 @@
|
|||||||
# Usage: v0.1.0.029a
|
|
||||||
|
|
||||||
This is the usage guide for [BSDialog](/bootstrapjs-bsdialog), v0.1.0.029a.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Create(id, title, url, [is_big], [update_body])
|
|
||||||
|
|
||||||
| Parameter | Type | Description |
|
|
||||||
|-----------|------|-------------|
|
|
||||||
| id | string | Unique identifier for the modal, so you can refer to multiple modal |
|
|
||||||
| title | string | Label at the top of the modal |
|
|
||||||
| url | string | URL to load into the modal body |
|
|
||||||
| is_big | boolean | Use large width or small width on the modal. (Optional. Default is false) |
|
|
||||||
| update_body | boolean | Update modal-body with content, otherwise model-content. (Optional. Default is false) |
|
|
||||||
|
|
||||||
Creates the Modal on the page and loads the body from a URL. An existing box will be reused if the ID already exists.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html");
|
|
||||||
BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html", false);
|
|
||||||
BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html", false, false);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Close(id)
|
|
||||||
|
|
||||||
| Parameter | Type | Description |
|
|
||||||
|-----------|------|-------------|
|
|
||||||
| id | string | Unique identifier for the modal, so you can refer to multiple modal |
|
|
||||||
|
|
||||||
Close the Modal box by the box identifier.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
BSDialog.Close("123");
|
|
||||||
```
|
|
||||||
|
|
||||||
### Clear()
|
|
||||||
|
|
||||||
Close all Modal boxes on the page.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
BSDialog.Clear();
|
|
||||||
```
|
|
||||||
Loading…
Reference in New Issue
Block a user