157 lines
4.3 KiB
TypeScript
157 lines
4.3 KiB
TypeScript
import {ButtonType} from "./ButtonType";
|
|
|
|
export class Modal {
|
|
|
|
private static currentModalId: string | undefined = "";
|
|
|
|
private _title: string = "iTender";
|
|
private _id: string = "";
|
|
private _loader: boolean = false;
|
|
private _buttons: { type: string, content: string, onclick: Function }[] = [];
|
|
private _leftCentered: boolean = false;
|
|
private _elements: HTMLElement[] = [];
|
|
|
|
set leftCentered(value: boolean) {
|
|
this._leftCentered = value;
|
|
}
|
|
|
|
private static modalInClose = false;
|
|
|
|
constructor(id, title: string) {
|
|
this._id = id;
|
|
this._title = title;
|
|
|
|
let t = document.createElement("h1");
|
|
t.innerText = title;
|
|
this._elements.push(t);
|
|
}
|
|
|
|
public static isModalOpen(): boolean {
|
|
return !(!this.currentModalId);
|
|
}
|
|
|
|
|
|
public addContent(element: HTMLElement) {
|
|
this._elements.push(element);
|
|
}
|
|
|
|
|
|
set id(value: string) {
|
|
this._id = value;
|
|
}
|
|
|
|
set loader(value: boolean) {
|
|
this._loader = value;
|
|
}
|
|
|
|
public addButton(type: ButtonType, content: string, onclick: Function = () => {
|
|
}): HTMLButtonElement {
|
|
let btn = document.createElement("button");
|
|
btn.classList.add("btn", "btn-" + type);
|
|
btn.onclick = () => onclick(btn);
|
|
btn.innerText = content;
|
|
btn.value = content;
|
|
|
|
this._elements.push(btn);
|
|
return btn;
|
|
}
|
|
|
|
|
|
public open(): Promise<void> {
|
|
return new Promise(async (resolve) => {
|
|
/* if (this._leftCentered) {
|
|
this._content = "<div style='text-align: left; padding-left: 2%;'>" + this._content;
|
|
}*/ //todo
|
|
|
|
if (this._loader) {
|
|
let div = document.createElement("div");
|
|
div.innerHTML = "<br><div class=\"lds-ellipsis\">\n" +
|
|
" <div></div><div></div><div></div><div></div>\n" +
|
|
"</div>";
|
|
this._elements.push(div);
|
|
}
|
|
|
|
/*if (this._leftCentered) {
|
|
this._content += "</div>";
|
|
}*/
|
|
|
|
let elements = this._elements;
|
|
let id = this._id;
|
|
|
|
function tryOpen() {
|
|
if (Modal.modalInClose) {
|
|
setTimeout(tryOpen, 50);
|
|
return;
|
|
}
|
|
resolve();
|
|
Modal.open(elements, id);
|
|
}
|
|
|
|
tryOpen();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param elements
|
|
* @param id
|
|
*/
|
|
private static open(elements: HTMLElement[], id?: string): Promise<void> {
|
|
return new Promise((resolve, reject) => {
|
|
const modal = document.getElementById("modal");
|
|
const modalContent = document.getElementById("modalInnerContent");
|
|
|
|
if (!modal || !modalContent) {
|
|
reject();
|
|
return;
|
|
}
|
|
|
|
modalContent.classList.add("modalBlendIn");
|
|
modal.classList.add("modalBlendIn");
|
|
|
|
setTimeout(() => {
|
|
modalContent.classList.remove("modalBlendIn");
|
|
modal.classList.remove("modalBlendIn");
|
|
resolve();
|
|
}, 800);
|
|
|
|
modalContent.innerHTML = "";
|
|
elements.forEach((val) => modalContent.append(val));
|
|
//modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
|
|
modal.style.display = "block";
|
|
|
|
this.currentModalId = id ? id : "null";
|
|
});
|
|
|
|
}
|
|
|
|
public close(): void {
|
|
Modal.close(this._id);
|
|
}
|
|
|
|
public static close(id?: string): void {
|
|
if (id && this.currentModalId != id)
|
|
return;
|
|
|
|
Modal.modalInClose = true;
|
|
|
|
const modal = document.getElementById("modal");
|
|
const modalContent = document.getElementById("modal-content");
|
|
const modalInnerContent = document.getElementById("modalInnerContent");
|
|
|
|
if (!modal || !modalContent || !modalInnerContent)
|
|
return;
|
|
|
|
modalContent.classList.add("modalBlendOut");
|
|
modal.classList.add("modalBlendOut");
|
|
|
|
setTimeout(() => {
|
|
modal.style.display = "none";
|
|
modalInnerContent.innerHTML = "";
|
|
modalContent.classList.remove("modalBlendOut");
|
|
modal.classList.remove("modalBlendOut");
|
|
this.modalInClose = false;
|
|
}, 800);
|
|
|
|
this.currentModalId = undefined;
|
|
}
|
|
} |