$(document).on("mousedown", function (e) {
if ($(e.target).parents(".modal").length == 0) {
$(".modal:visible").last().find(".close").trigger("click");
}
});
const ModalFunctions = {
divify: function (val) {
if (val.length > 1)
return $.spawn("div").append(val);
return val;
},
jqueriefy: function (val) {
if ($.isFunction(val))
val = val();
switch (typeof val) {
case "string": return $("
" + val + "
");
case "object": return val;
case "undefined":
console.warn("Got undefined type!");
return $.spawn("div");
default:
console.error("Invalid type " + typeof val);
return $();
}
},
warpProperties(data) {
if (data instanceof ModalProperties)
return data;
else {
let props = new ModalProperties();
for (let key in data)
props[key] = data[key];
return props;
}
}
};
class ModalProperties {
constructor() {
this.header = () => "HEADER";
this.body = () => "BODY";
this.footer = () => "FOOTER";
this.closeListener = () => { };
this.width = "60%";
this.hight = "auto";
this.closeable = true;
}
}
class Modal {
constructor(props) {
this.properties = props;
this._create();
}
_create() {
let modal = $.spawn("div");
modal.addClass("modal");
let content = $.spawn("div");
content.addClass("modal-content");
content.css("width", this.properties.width);
let header = ModalFunctions.divify(ModalFunctions.jqueriefy(this.properties.header)).addClass("modal-header");
if (this.properties.closeable)
header.append("×");
let body = ModalFunctions.divify(ModalFunctions.jqueriefy(this.properties.body)).addClass("modal-body");
let footer = ModalFunctions.divify(ModalFunctions.jqueriefy(this.properties.footer)).addClass("modal-footer");
content.append(header);
content.append(body);
content.append(footer);
modal.append(content);
modal.find(".close").click(function () {
if (this.properties.closeable)
this.close();
}.bind(this));
this.htmlTag = modal;
}
open() {
this.htmlTag.appendTo($("body"));
this.htmlTag.show();
}
close() {
const _this = this;
this.htmlTag.animate({ opacity: 0 }, () => {
_this.htmlTag.detach();
});
this.properties.closeListener();
}
}
function createModal(data) {
return new Modal(ModalFunctions.warpProperties(data));
}
class InputModalProperties extends ModalProperties {
}
function createInputModal(headMessage, question, validator, callback, props = {}) {
props = ModalFunctions.warpProperties(props);
let head = $.spawn("div");
head.css("border-bottom", "grey solid");
head.css("border-width", "1px");
ModalFunctions.jqueriefy(headMessage).appendTo(head);
let body = $.spawn("div");
ModalFunctions.divify(ModalFunctions.jqueriefy(question)).appendTo(body);
let input = $.spawn("input");
input.width("100%");
if (props.maxLength)
input.attr("maxlength", props.maxLength);
input.appendTo(body);
let footer = $.spawn("div");
footer.addClass("modal-button-group");
footer.css("margin-top", "5px");
let buttonCancel = $.spawn("button");
buttonCancel.text("Cancel");
let buttonOk = $.spawn("button");
buttonOk.text("Ok");
footer.append(buttonCancel);
footer.append(buttonOk);
input.on("keydown", function (event) {
if (event.keyCode == 13 /* Enter */) {
buttonOk.trigger("click");
}
});
let updateValidation = function () {
let text = input.val().toString();
let flag = (!props.maxLength || text.length <= props.maxLength) && validator(text);
if (flag) {
input.removeClass("invalid_input");
buttonOk.removeAttr("disabled");
}
else {
if (!input.hasClass("invalid_input"))
input.addClass("invalid_input");
buttonOk.attr("disabled", "true");
}
};
input.on("keyup", updateValidation);
let callbackCalled = false;
let wrappedCallback = function (flag) {
if (callbackCalled)
return;
callbackCalled = true;
callback(flag);
};
let modal;
buttonOk.on("click", () => {
wrappedCallback(input.val().toString());
modal.close();
});
buttonCancel.on("click", () => {
wrappedCallback(false);
modal.close();
});
props.header = head;
props.body = body;
props.footer = footer;
props.closeListener = () => wrappedCallback(false);
modal = createModal(props);
return modal;
}
function createErrorModal(header, message, props = { footer: "" }) {
props = ModalFunctions.warpProperties(props);
let head = $.spawn("div");
head.addClass("modal-head-error");
ModalFunctions.divify(ModalFunctions.jqueriefy(header)).appendTo(head);
props.header = head;
props.body = ModalFunctions.divify(ModalFunctions.jqueriefy(message));
props.footer = ModalFunctions.divify(ModalFunctions.jqueriefy(""));
return createModal(props);
}
//# sourceMappingURL=modal.js.map