183 lines
5.2 KiB
JavaScript
183 lines
5.2 KiB
JavaScript
|
/**
|
||
|
* BSDialog
|
||
|
* @version v0.1.0.029 (2019/09/24 1112)
|
||
|
*/
|
||
|
var BSDialog = {
|
||
|
Create: function (id, title, url, is_big, update_body, show_size) {
|
||
|
var a = this;
|
||
|
|
||
|
a.id = id;
|
||
|
a.title = title;
|
||
|
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);
|
||
|
|
||
|
if (!a.Exists(id)) {
|
||
|
a.renderContent(null);
|
||
|
}
|
||
|
|
||
|
if (url != null) {
|
||
|
$.ajax({
|
||
|
url: url,
|
||
|
cache: false,
|
||
|
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();
|
||
|
},
|
||
|
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, is_big) {
|
||
|
var a = this;
|
||
|
|
||
|
if (a.Exists(id)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
a.id = id;
|
||
|
a.title = title;
|
||
|
a.url = null;
|
||
|
a.isBig = ((typeof (is_big) == "undefined") ? false : (is_big == true) ? true : false);
|
||
|
|
||
|
a.renderContent(message);
|
||
|
a.initialiseComponents();
|
||
|
},
|
||
|
Exists: function (id) {
|
||
|
return ($("body > div[id='dlg" + id + "']").length > 0);
|
||
|
},
|
||
|
generateModalHtml: function (message) {
|
||
|
var a = this;
|
||
|
var size = (a.isBig == true ? "lg" : "md");
|
||
|
|
||
|
var html = "";
|
||
|
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-content\">";
|
||
|
html += " <div class=\"modal-header\">";
|
||
|
html += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
|
||
|
|
||
|
if (a.showSize)
|
||
|
{
|
||
|
html += " <span class=\"close\"> </span>";
|
||
|
html += " <button type=\"button\" class=\"close\" data-modal-action=\"restore\" aria-hidden=\"true\">−</button>";
|
||
|
}
|
||
|
|
||
|
html += " <strong class=\"modal-title\" style=\"cursor:default; \">" + a.title + "</strong>";
|
||
|
html += " </div>";
|
||
|
|
||
|
if ($.trim(message).length <= 0) {
|
||
|
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>";
|
||
|
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();
|
||
|
|
||
|
if (a.showSize)
|
||
|
{
|
||
|
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");
|
||
|
}
|
||
|
}
|
||
|
};
|