93 lines
3.0 KiB
JavaScript
93 lines
3.0 KiB
JavaScript
import { Modal } from "bootstrap";
|
|
|
|
const wrapper = () => {
|
|
const wrapperElement = document.createElement("div");
|
|
wrapperElement.classList.add("modal");
|
|
wrapperElement.setAttribute("tabindex", -1);
|
|
return wrapperElement;
|
|
};
|
|
|
|
const container = (type) => {
|
|
const containerElement = document.createElement("div");
|
|
containerElement.classList.add(type);
|
|
return containerElement;
|
|
};
|
|
|
|
const closeButton = (closeCallback) => {
|
|
const closeElement = document.createElement("button");
|
|
closeElement.setAttribute("type", "button");
|
|
closeElement.addEventListener("click", () => closeCallback());
|
|
return closeElement;
|
|
};
|
|
|
|
const header = (title, closeCallback) => {
|
|
const containerElement = container("modal-header");
|
|
const titleElement = document.createElement("h5");
|
|
titleElement.innerText = title;
|
|
containerElement.appendChild(titleElement);
|
|
|
|
const closeElement = closeButton(closeCallback);
|
|
closeElement.classList.add("btn-close");
|
|
containerElement.appendChild(closeElement);
|
|
|
|
return containerElement;
|
|
};
|
|
|
|
const footer = (okTitle, okCallback, closeCallback) => {
|
|
const footerElement = container("modal-footer");
|
|
|
|
const okElement = document.createElement("button");
|
|
okElement.classList.add("btn", "btn-primary");
|
|
okElement.setAttribute("type", "button");
|
|
okElement.innerText = okTitle;
|
|
okElement.addEventListener("click", () => okCallback());
|
|
footerElement.appendChild(okElement);
|
|
|
|
const closeElement = closeButton(closeCallback);
|
|
closeElement.classList.add("btn", "btn-secondary");
|
|
closeElement.innerText = "Отмена";
|
|
footerElement.appendChild(closeElement);
|
|
|
|
return footerElement;
|
|
};
|
|
|
|
const modal = (title, okTitle, body, okCallback, closeCallback) => {
|
|
const wrapperElement = wrapper();
|
|
const dialogElement = container("modal-dialog");
|
|
const contentElement = container("modal-content");
|
|
|
|
const headerElement = header(title, closeCallback);
|
|
contentElement.appendChild(headerElement);
|
|
|
|
const bodyElement = container("modal-body");
|
|
bodyElement.appendChild(body);
|
|
contentElement.appendChild(bodyElement);
|
|
|
|
const footerElement = footer(okTitle, okCallback, closeCallback);
|
|
contentElement.appendChild(footerElement);
|
|
|
|
dialogElement.appendChild(contentElement);
|
|
wrapperElement.appendChild(dialogElement);
|
|
return wrapperElement;
|
|
};
|
|
|
|
const showQuestion = (title, okTitle, message) => {
|
|
const messageElement = document.createElement("p");
|
|
messageElement.innerText = message;
|
|
return new Promise((resolve) => {
|
|
let modalDialog;
|
|
const okCallback = () => {
|
|
modalDialog.hide();
|
|
resolve(true);
|
|
};
|
|
const cancelCallback = () => {
|
|
modalDialog.hide();
|
|
resolve(false);
|
|
};
|
|
const questionElement = modal(title, okTitle, messageElement, okCallback, cancelCallback);
|
|
modalDialog = new Modal(questionElement);
|
|
modalDialog.show();
|
|
});
|
|
};
|
|
|
|
export default showQuestion; |