Added: bsdialog4 release
This commit is contained in:
Ray
parent
cb737410a4
commit
51a3dde03e
182
2020/01/bsdialog4-v0.1.0.001.js
Normal file
182
2020/01/bsdialog4-v0.1.0.001.js
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
/**
|
||||||
|
* BSDialog4
|
||||||
|
* @version v0.1.0.001 (2019/12/27 0531)
|
||||||
|
*/
|
||||||
|
var BSDialog = {
|
||||||
|
Create: function (id, title, url, size) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
a.id = id;
|
||||||
|
a.title = title;
|
||||||
|
a.url = url;
|
||||||
|
a.size = ((typeof (size) == "undefined") ? "md" : size);
|
||||||
|
|
||||||
|
if (!a.Exists(id)) {
|
||||||
|
a.renderContent(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url != null) {
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
cache: false,
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials:true
|
||||||
|
},
|
||||||
|
timeout: 20000,
|
||||||
|
success: function (result, status, xhr) {
|
||||||
|
if ((xhr.status == 200) || (xhr.status == 302) || (xhr.status == 301)) {
|
||||||
|
a.updateContentBody(id, 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();
|
||||||
|
},
|
||||||
|
Close: function (id) {
|
||||||
|
$("#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, size) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
if (a.Exists(id)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.id = id;
|
||||||
|
a.title = title;
|
||||||
|
a.url = null;
|
||||||
|
a.size = ((typeof (size) == "undefined") ? "md" : size);
|
||||||
|
|
||||||
|
a.renderContent(message);
|
||||||
|
a.initialiseComponents();
|
||||||
|
},
|
||||||
|
Exists: function (id) {
|
||||||
|
return ($("body > div[id='dlg" + id + "']").length > 0);
|
||||||
|
},
|
||||||
|
generateModalHtml: function (message) {
|
||||||
|
var a = this;
|
||||||
|
|
||||||
|
var html = "";
|
||||||
|
html += "<div class=\"modal fade\" id=\"dlg" + a.id + "\" tabindex=\"-1\" role=\"dialog\">";
|
||||||
|
html += " <div class=\"modal-dialog modal-" + a.size + "\">";
|
||||||
|
html += " <div class=\"modal-content\">";
|
||||||
|
html += " <div class=\"modal-header\">";
|
||||||
|
html += " <strong class=\"modal-title\" style=\"cursor:default; \">" + a.title + "</strong>";
|
||||||
|
html += " <button type=\"button\" class=\"close\" data-modal-action=\"restore\" aria-hidden=\"true\">−</button>";
|
||||||
|
html += " <button type=\"button\" class=\"close ml-0\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
|
||||||
|
|
||||||
|
html += " </div>";
|
||||||
|
|
||||||
|
if ($.trim(message).length <= 0) {
|
||||||
|
html += " <div class=\"modal-body\">";
|
||||||
|
html += " <div class=\"text-center\">";
|
||||||
|
html += " <div class=\"spinner-border text-secondary text-center\" role=\"status\">";
|
||||||
|
html += " <span class=\"sr-only\">Loading...</span>";
|
||||||
|
html += " </div>";
|
||||||
|
html += " </div>";
|
||||||
|
html += " </div>";
|
||||||
|
} else {
|
||||||
|
html += " <div class=\"modal-body\">" + message + "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += " <div class=\"modal-footer\">";
|
||||||
|
html += " <button type=\"button\" class=\"btn btn-outline-dark\" data-dismiss=\"modal\">Close</button>";
|
||||||
|
html += " </div>";
|
||||||
|
html += " </div>";
|
||||||
|
html += " </div>";
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
return html;
|
||||||
|
},
|
||||||
|
renderContent: function (content) {
|
||||||
|
$("body").append(this.generateModalHtml(content));
|
||||||
|
},
|
||||||
|
initialiseComponents: function () {
|
||||||
|
var a = this;
|
||||||
|
var dialog = a.getElement();
|
||||||
|
|
||||||
|
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-xl");
|
||||||
|
} else if ($(div).hasClass("modal-xl")) {
|
||||||
|
$(div).removeClass("modal-xl");
|
||||||
|
$(div).addClass("modal-sm");
|
||||||
|
} else if ($(div).hasClass("modal-sm")) {
|
||||||
|
$(div).removeClass("modal-sm");
|
||||||
|
$(div).addClass("modal-md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
5
2020/01/bsdialog4-v0.1.0.001.min.js
vendored
Normal file
5
2020/01/bsdialog4-v0.1.0.001.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/**
|
||||||
|
* BSDialog4
|
||||||
|
* @version v0.1.0.001 (2019/12/27 0531)
|
||||||
|
*/
|
||||||
|
var BSDialog={Create:function(o,t,e,d){var a=this;a.id=o,a.title=t,a.url=e,a.size=void 0===d?"md":d,a.Exists(o)||a.renderContent(null),null!=e&&$.ajax({url:e,cache:!1,xhrFields:{withCredentials:!0},timeout:2e4,success:function(t,e,d){200==d.status||302==d.status||301==d.status?a.updateContentBody(o,t):a.updateContentBody(o,d.statusText+" ("+d.status+")")},error:function(t){a.updateContentBody(o,t.statusText+" ("+t.status+")")},complete:function(o,t){}}),a.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.size=void 0===d?"md":d,a.renderContent(e),a.initialiseComponents())},Exists:function(o){return $("body > div[id='dlg"+o+"']").length>0},generateModalHtml:function(o){var t=this,e="";return e+='<div class="modal fade" id="dlg'+t.id+'" tabindex="-1" role="dialog">',e+=' <div class="modal-dialog modal-'+t.size+'">',e+=' <div class="modal-content">',e+=' <div class="modal-header">',e+=' <strong class="modal-title" style="cursor:default; ">'+t.title+"</strong>",e+=' <button type="button" class="close" data-modal-action="restore" aria-hidden="true">−</button>',e+=' <button type="button" class="close ml-0" data-dismiss="modal" aria-hidden="true">×</button>',e+=" </div>",$.trim(o).length<=0?(e+=' <div class="modal-body">',e+=' <div class="text-center">',e+=' <div class="spinner-border text-secondary text-center" role="status">',e+=' <span class="sr-only">Loading...</span>',e+=" </div>",e+=" </div>",e+=" </div>"):e+=' <div class="modal-body">'+o+"</div>",e+=' <div class="modal-footer">',e+=' <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>',e+=" </div>",e+=" </div>",e+=" </div>",e+="</div>"},renderContent:function(o){$("body").append(this.generateModalHtml(o))},initialiseComponents:function(){var o=this,t=o.getElement(),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-xl")):$(o).hasClass("modal-xl")?($(o).removeClass("modal-xl"),$(o).addClass("modal-sm")):$(o).hasClass("modal-sm")&&($(o).removeClass("modal-sm"),$(o).addClass("modal-md")))}};
|
||||||
Loading…
Reference in New Issue
Block a user